paraview-glance/src/components/core/Datasets/template.html

Web application for Visualizing Scientific and Medical datasets

<v-expansion-panels
  v-model="panelState"
  multiple
  accordion
>
  <v-expansion-panel
    v-for="(sourceId, index) in datasets"
    :key="sourceId"
    :class="$style.datasetPanel"
  >
    <v-expansion-panel-header
      class="pv-no-select pl-3 pr-3 pt-1 pb-1"
      :class="$style.panelHeader"
    >
      <v-btn
        icon
        small
        class="flex-shrink-0"
        v-on:click.stop="toggleDatasetVisibility(sourceId)"
      >
        <v-icon>
          {{ getDatasetVisibility(sourceId) ? 'mdi-eye' : 'mdi-eye-off' }}
        </v-icon>
      </v-btn>
      <div
        class="subtitle-2 text-truncate pl-2 pr-2"
        :title="getSourceName(sourceId)"
      >
        {{ getSourceName(sourceId) }}
      </div>
      <v-spacer />
      <v-tooltip
        v-if="datasets.length > 1"
        bottom
      >
        <span class="pv-no-select">Activate source</span>
        <template v-slot:activator="{ on }">
          <v-btn
            :class="$style.headerMenuButton"
            icon
            small
            v-on="on"
            v-on:click.stop="activateSource(sourceId)"
          >
            <v-icon>
              {{ activeSourceId === sourceId ? 'mdi-bookmark-check' : 'mdi-bookmark-outline' }}
            </v-icon>
          </v-btn>
        </template>
      </v-tooltip>
      <div v-on:click.stop> <!-- prevent panel expansion on menu click -->
        <v-menu offset-x>
          <template v-slot:activator="{ on }">
            <v-btn
              :class="$style.headerMenuButton"
              icon
              small
              v-on="on"
            >
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </template>
          <v-list dense>
            <v-list-item
              v-on:click="deleteDataset(sourceId)"
            >
              <v-list-item-title>Delete</v-list-item-title>
            </v-list-item>
            <v-list-item
              v-on:click="uploadDataset(sourceId)"
            >
              <v-list-item-title>Upload To Girder</v-list-item-title>

            </v-list-item>
          </v-list>
        </v-menu>
      </div>
    </v-expansion-panel-header>
    <v-expansion-panel-content :class="$style.panelContent">
      <color-group
        :index="index"
        :visible="datasets.length > 1"
      />
      <v-expansion-panels
        v-model="subpanels[sourceId]"
        multiple
        accordion
      >
        <v-expansion-panel
          v-for="(panel,i) in panels"
          :key="i"
          v-if="panel.visible($proxyManager.getProxyById(sourceId))"
          :class="$style.subpanel"
        >
          <v-expansion-panel-header
            class="pv-no-select"
            :class="$style.subpanelHeader"
          >
            <v-icon left class="flex-grow-0">{{ panel.icon }}</v-icon>
            <span class="body-2 font-weight-medium flex-grow-0">{{ panel.name }}</span>
          </v-expansion-panel-header>
          <v-expansion-panel-content :class="$style.panelContent">
            <component
              :is="panel.component"
              :sourceId="sourceId"
            />
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>