view src/app/analysis-item/analysis-item.component.html @ 471:b69a223166b5

Add vertical scale to matrix, but just using matrix bin count to begin
with

<md-card>
  <md-card-header>
    <md-card-title>{{item.title}}</md-card-title>
    <md-card-subtitle>{{item.description}}</md-card-subtitle>
  </md-card-header>
  <md-card-content>
    <div class="content">
      <ng-template [ngIf]="isLoading()">
        <ugly-progress-bar
          [isDeterminate]="true"
          [progress]="item.progress"
        ></ugly-progress-bar>
      </ng-template>
      <ng-template [ngIf]="!isLoading()">
        <ugly-progress-spinner *ngIf="isPending()"></ugly-progress-spinner>
        <ugly-waves-play-head
          [colour]="'#c33c54'"
          [isActive]="isActive"
        >
          <ugly-waveform
            *ngIf="isAudioItem(); else notAudio"
            [timeline]="timeline"
            [width]="contentWidth"
            [audioBuffer]="item.audioData"
            [onSeek]="onSeek"
            [colour]="'#0868ac'"
            [duration]="getDuration()"
          ></ugly-waveform>
        </ugly-waves-play-head>


        <ugly-waves-play-head
          #notAudio
          *ngIf="getFeatureShape() as shape"
          [ngSwitch]="shape"
          [colour]="'#c33c54'"
          [isActive]="isActive"
        >
          <ugly-cross-hair-inspector
            *ngSwitchCase="'vector'"
            [unit]="item.unit"
            [isAnimated]="isActive"
          >
            <ugly-curve
              [colour]="getNextColour()"
              [timeline]="timeline"
              [width]="contentWidth"
              [onSeek]="onSeek"
              [curve]="item.collected"
              [duration]="getDuration()"
            ></ugly-curve>
          </ugly-cross-hair-inspector>
          <ugly-cross-hair-inspector
            *ngSwitchCase="'tracks'"
            [unit]="item.unit"
            [isAnimated]="isActive"
          >
            <ugly-tracks
              [colour]="getNextColour()"
              [timeline]="timeline"
              [width]="contentWidth"
              [onSeek]="onSeek"
              [tracks]="item.collected"
              [duration]="getDuration()"
            ></ugly-tracks>
          </ugly-cross-hair-inspector>
          <ugly-cross-hair-inspector
            *ngSwitchCase="'notes'"
            [unit]="item.unit"
            [isAnimated]="isActive"
          >
            <ugly-notes
              [colour]="getNextColour()"
              [timeline]="timeline"
              [width]="contentWidth"
              [onSeek]="onSeek"
              [notes]="item.collected"
              [duration]="getDuration()"
            ></ugly-notes>
          </ugly-cross-hair-inspector>
          <ugly-cross-hair-inspector
            *ngSwitchCase="'matrix'"
            [unit]="item.unit"
            [isAnimated]="isActive"
          >
            <ugly-grid
              [colour]="getNextColour()"
              [timeline]="timeline"
              [width]="contentWidth"
              [onSeek]="onSeek"
              [grid]="item.collected"
              [duration]="getDuration()"
            ></ugly-grid>
          </ugly-cross-hair-inspector>
          <ugly-instants
            *ngSwitchCase="'instants'"
            [colour]="getNextColour()"
            [timeline]="timeline"
            [width]="contentWidth"
            [onSeek]="onSeek"
            [instants]="item.collected"
            [duration]="getDuration()"
          ></ugly-instants>
<!--          <ugly-grid
            *ngSwitchCase="'matrix'"
            [timeline]="timeline"
            [width]="contentWidth"
            [onSeek]="onSeek"
            [grid]="item.collected"
            [duration]="getDuration()"
          ></ugly-grid>
-->

          <div *ngSwitchDefault>Feature cannot be visualised.</div>
        </ugly-waves-play-head>
      </ng-template>
    </div>
  </md-card-content>
</md-card>