volview 4.0.0 → 4.0.1

package/src/components/ModelBrowser.vue

@@ -1,83 +0,0 @@
-<template>
-  <div id="model-module" class="mx-2 height-100">
-    <template v-if="hasModels">
-      <v-expansion-panels>
-        <v-expansion-panel v-for="model in models" :key="model.id">
-          <v-expansion-panel-header>
-            {{ model.name }}
-          </v-expansion-panel-header>
-          <v-expansion-panel-content>
-            <v-select
-              label="Color By"
-              :items="model.pointArrays"
-              item-text="name"
-              item-value="value"
-              :value="model.colorBy"
-              @change="setColorBy(model.id, $event)"
-            />
-          </v-expansion-panel-content>
-        </v-expansion-panel>
-      </v-expansion-panels>
-    </template>
-    <template v-else>
-      <div>No models loaded</div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from 'vuex';
-
-const SOLID_COLOR = Symbol('SOLID_COLOR');
-
-export default {
-  name: 'ModelBrowser',
-
-  computed: {
-    ...mapState({
-      vtkCache: (state) => state.data.vtkCache,
-      dataIndex: (state) => state.data.index,
-      modelIDs: (state) => state.data.modelIDs,
-    }),
-    ...mapState('visualization', ['colorBy']),
-
-    models() {
-      return this.modelIDs.map((id) => ({
-        ...this.dataIndex[id],
-        id,
-        colorBy: this.colorBy[id]?.array || SOLID_COLOR,
-        pointArrays: [{ name: 'Solid Color', value: SOLID_COLOR }].concat(
-          this.vtkCache[id]
-            .getPointData()
-            .getArrays()
-            .map((arr) => ({ name: arr.getName(), value: arr.getName() }))
-        ),
-      }));
-    },
-
-    hasModels() {
-      return !!this.models.length;
-    },
-  },
-
-  methods: {
-    setColorBy(id, arrayName) {
-      let array;
-      let location;
-      if (arrayName === SOLID_COLOR) {
-        array = '';
-        location = '';
-      } else {
-        array = arrayName;
-        location = 'pointData';
-      }
-
-      this.setModelColorBy({
-        id,
-        colorBy: { array, location },
-      });
-    },
-    ...mapActions('visualization', ['setModelColorBy']),
-  },
-};
-</script>

package/src/components/ModulePanel.vue

@@ -1,137 +0,0 @@
-<template>
-  <div class="fill-height d-flex flex-column">
-    <div id="module-switcher">
-      <v-btn
-        v-if="$vuetify.breakpoint.mobile"
-        icon
-        id="close-btn"
-        @click="$emit('close')"
-      >
-        <v-icon>mdi-arrow-left</v-icon>
-      </v-btn>
-      <v-tabs
-        id="module-switcher-tabs"
-        v-model="selectedModuleIndex"
-        icons-and-text
-        :show-arrows="true"
-      >
-        <v-tab v-for="item in Modules" :key="item.name" class="pl-1 pr-1">
-          <div class="tab-content">
-            <span class="mb-0 mt-1 module-text">{{ item.name }}</span>
-            <v-icon>mdi-{{ item.icon }}</v-icon>
-          </div>
-        </v-tab>
-      </v-tabs>
-    </div>
-    <div id="module-container">
-      <v-tabs-items v-model="selectedModuleIndex" touchless class="fill-height">
-        <v-tab-item v-for="mod in Modules" :key="mod.name" class="fill-height">
-          <component
-            :key="mod.name"
-            v-show="Modules[selectedModuleIndex] === mod"
-            :is="mod.component"
-          />
-        </v-tab-item>
-      </v-tabs-items>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api';
-
-import DataBrowser from './DataBrowser.vue';
-import RenderingModule from './RenderingModule.vue';
-import AnnotationsModule from './AnnotationsModule.vue';
-
-export const Modules = [
-  {
-    name: 'Data',
-    icon: 'database',
-    component: DataBrowser,
-  },
-  {
-    name: 'Annotations',
-    icon: 'pencil',
-    component: AnnotationsModule,
-  },
-  {
-    name: 'Rendering',
-    icon: 'cube',
-    component: RenderingModule,
-  },
-  // {
-  //   name: 'AI',
-  //   icon: 'robot-outline',
-  //   component: null,
-  // },
-];
-
-export default defineComponent({
-  name: 'ModulePanel',
-  setup() {
-    const selectedModuleIndex = ref(0);
-
-    return {
-      selectedModuleIndex,
-      Modules,
-    };
-  },
-});
-</script>
-
-<style scoped>
-#module-switcher {
-  display: relative;
-  flex: 0 2;
-  /* roughly match vuetify's dark/light transition */
-  transition: border-bottom 0.3s;
-}
-
-.theme--light #module-switcher {
-  border-bottom: 2px solid #efefef;
-}
-
-.theme--dark #module-switcher {
-  border-bottom: 2px solid #2f2f2f;
-}
-
-#close-btn {
-  position: absolute;
-  top: 1.5em;
-  left: 0.5em;
-  z-index: 10;
-}
-
-#module-container {
-  position: relative;
-  flex: 2;
-  overflow: auto;
-}
-
-.module-text {
-  font-size: 0.6rem;
-  white-space: pre;
-}
-
-.tab-content {
-  display: flex;
-  padding-top: 14px;
-  justify-content: flex-end;
-  flex-direction: column-reverse;
-  height: 100%;
-  align-items: center;
-}
-
-#module-switcher-tabs >>> .v-tabs-bar__content {
-  justify-content: center;
-}
-
-#module-switcher-tabs >>> .v-slide-group__prev.v-slide-group__prev--disabled {
-  visibility: hidden;
-}
-
-#module-switcher-tabs >>> .v-slide-group__next.v-slide-group__next--disabled {
-  visibility: hidden;
-}
-</style>

package/src/components/PaintControls.vue

@@ -1,174 +0,0 @@
-<template>
-  <v-card width="350px">
-    <v-container>
-      <!--
-      <v-row no-gutters align="center">
-        <v-col>
-          <v-select
-            dense
-            outlined
-            hide-details
-            label="Select or create a labelmap"
-          />
-        </v-col>
-      </v-row>
-      -->
-      <v-row no-gutters align="center">
-        <v-col>
-          <v-slider
-            :value="brushSize"
-            @input="setBrushSize"
-            dense
-            hide-details
-            label="Size"
-            min="1"
-            max="50"
-          >
-            <template v-slot:append>
-              <v-text-field
-                :value="brushSize"
-                @input="setBrushSize"
-                class="mt-n1 pt-0"
-                style="width: 40px"
-                hide-details
-                type="number"
-                min="1"
-                max="50"
-              />
-            </template>
-          </v-slider>
-        </v-col>
-      </v-row>
-      <v-row no-gutters align="center">
-        <v-col>
-          <v-slider
-            :value="opacity"
-            @input="setOpacity"
-            dense
-            hide-details
-            label="Opacity"
-            min="0"
-            max="1"
-            step="0.01"
-          >
-            <template v-slot:append>
-              <v-text-field
-                :value="opacity"
-                @input="setOpacity"
-                class="mt-n1 pt-0"
-                style="width: 40px"
-                hide-details
-                type="number"
-                min="0"
-                max="1"
-                step="0.1"
-              />
-            </template>
-          </v-slider>
-        </v-col>
-      </v-row>
-      <v-row no-gutters align="center">
-        <v-col>
-          <v-color-picker
-            hide-canvas
-            hide-inputs
-            hide-mode-switch
-            hide-sliders
-            show-swatches
-            :swatches="swatches"
-            :value="brushColor"
-            @input="setBrushColor"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-card>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
-import { LABELMAP_PALETTE } from '../config';
-import { usePaintToolStore } from '../store/tools/paint';
-import { rgbaToHexa } from '../utils/color';
-
-// generates both the swatches for v-color-picker and the color-to-value mapping
-function convertToSwatches(
-  palette: typeof LABELMAP_PALETTE,
-  width: number = 5
-) {
-  const hexToValue: Record<string, number> = {};
-  const swatches: string[][] = [];
-  const entries = Object.entries(palette);
-  while (entries.length) {
-    const [value, rgba] = entries.shift()!;
-    const hex = rgbaToHexa(rgba).toUpperCase();
-    hexToValue[hex] = Number(value);
-
-    let row = swatches[swatches.length - 1];
-    if (!row || row.length === width) {
-      row = [];
-      swatches.push(row);
-    }
-    row.push(hex);
-  }
-
-  return { hexToValue, swatches };
-}
-
-export default defineComponent({
-  name: 'PaintControls',
-
-  setup() {
-    const paintStore = usePaintToolStore();
-
-    const { hexToValue, swatches } = convertToSwatches(LABELMAP_PALETTE, 3);
-    const brushColor = computed(() => {
-      const value = paintStore.brushValue;
-      if (value in LABELMAP_PALETTE) {
-        return rgbaToHexa(LABELMAP_PALETTE[value]);
-      }
-      return null;
-    });
-
-    const setBrushColor = (color: string) => {
-      const hexa = color.toUpperCase();
-      if (hexa in hexToValue) {
-        paintStore.setBrushValue(hexToValue[hexa]);
-      }
-    };
-
-    const brushSize = computed(() => paintStore.brushSize);
-    const setBrushSize = (size: number) => {
-      paintStore.setBrushSize(Number(size));
-    };
-
-    const opacity = computed(() => paintStore.labelmapOpacity);
-    const setOpacity = (op: number) => {
-      paintStore.setLabelmapOpacity(Number(op));
-    };
-
-    return {
-      brushSize,
-      setBrushSize,
-      swatches,
-      brushColor,
-      setBrushColor,
-      opacity,
-      setOpacity,
-    };
-  },
-});
-</script>
-
-<style scoped>
-.form-label {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.scrolled-radios {
-  max-height: 300px;
-  overflow: auto;
-  /* prevents hover circle from clipping left */
-  padding-left: 6px;
-}
-</style>

package/src/components/PatientBrowser.vue

@@ -1,280 +0,0 @@
-<script lang="ts">
-import { computed, defineComponent, ref, toRefs } from '@vue/composition-api';
-import type { Ref } from '@vue/composition-api';
-import ItemGroup from '@/src/components/ItemGroup.vue';
-import { useDICOMStore } from '../store/datasets-dicom';
-import {
-  DataSelection,
-  DICOMSelection,
-  selectionEquals,
-  useDatasetStore,
-} from '../store/datasets';
-import { useMultiSelection } from '../composables/useMultiSelection';
-import PatientStudyVolumeBrowser from './PatientStudyVolumeBrowser.vue';
-import { usePanels } from '../composables/usePanels';
-
-export default defineComponent({
-  name: 'PatientBrowser',
-  props: {
-    patientKey: {
-      type: String,
-      required: true,
-    },
-  },
-  components: {
-    ItemGroup,
-    PatientStudyVolumeBrowser,
-  },
-  setup(props) {
-    const { patientKey } = toRefs(props);
-
-    const selectedSeries: Ref<DICOMSelection[]> = ref([]);
-
-    const dicomStore = useDICOMStore();
-    const dataStore = useDatasetStore();
-
-    const primarySelection = computed(() => dataStore.primarySelection);
-
-    const studies = computed(() => {
-      const selPatient = patientKey.value;
-      const { patientStudies, studyInfo, studyVolumes } = dicomStore;
-      return patientStudies[selPatient].map((studyKey) => {
-        const info = studyInfo[studyKey];
-        return {
-          ...info,
-          key: studyKey,
-          title:
-            info.StudyDescription || info.StudyDate || info.StudyInstanceUID,
-          volumeKeys: studyVolumes[studyKey].sort(),
-        };
-      });
-    });
-
-    const studyKeys = computed(() => studies.value.map((study) => study.key));
-    const studyKeysSet = computed(() => new Set(studyKeys.value));
-
-    const { handlePanelChange, openPanels } = usePanels(studyKeysSet);
-
-    // --- selection --- //
-
-    const { selected, selectedAll, selectedSome } =
-      useMultiSelection(studyKeys);
-
-    const removeSelectedStudies = () => {
-      selected.value.forEach(async (study) => {
-        dicomStore.deleteStudy(study);
-      });
-      selected.value = [];
-
-      // Handle the case where we are deleting the selected study
-      // if (selected.value.indexOf(selectedStudy.value) !== -1) {
-      //   dataStore.setPrimarySelection(null);
-      // }
-    };
-
-    return {
-      selected,
-      selectedAll,
-      selectedSome,
-      selectedSeries,
-      primarySelection,
-      removeSelectedStudies,
-      studies,
-      selectionEquals,
-      setPrimarySelection: (sel: DataSelection) => {
-        dataStore.setPrimarySelection(sel);
-      },
-      openPanels,
-      handlePanelChange,
-    };
-  },
-});
-</script>
-
-<template>
-  <item-group
-    :value="primarySelection"
-    :testFunction="selectionEquals"
-    @change="setPrimarySelection"
-  >
-    <v-container class="pa-0">
-      <v-row no-gutters justify="space-between" class="mb-2">
-        <v-col cols="6" align-self="center">
-          <v-checkbox
-            class="ml-3 align-center justify-center"
-            :indeterminate="selectedSome && !selectedAll"
-            label="Select All Studies"
-            v-model="selectedAll"
-            dense
-            hide-details
-          />
-        </v-col>
-        <v-col cols="6" align-self="center" class="d-flex justify-end mt-2">
-          <v-tooltip left>
-            <template v-slot:activator="{ on, attrs }">
-              <v-btn
-                icon
-                small
-                :disabled="!selectedSome"
-                @click.stop="removeSelectedStudies"
-                v-bind="attrs"
-                v-on="on"
-              >
-                <v-icon>mdi-delete</v-icon>
-              </v-btn>
-            </template>
-            Delete selected
-          </v-tooltip>
-        </v-col>
-      </v-row>
-    </v-container>
-    <v-expansion-panels
-      id="patient-data-studies"
-      accordion
-      multiple
-      :value="openPanels"
-    >
-      <v-expansion-panel
-        v-for="study in studies"
-        :key="study.StudyInstanceUID"
-        class="patient-data-study-panel"
-        @change="handlePanelChange(study.StudyInstanceUID)"
-      >
-        <v-expansion-panel-header
-          color="#1976fa0a"
-          class="pl-3 no-select"
-          :title="study.StudyDate"
-        >
-          <div class="study-header">
-            <div class="study-header-title">
-              <v-checkbox
-                dense
-                :key="study.StudyInstanceUID"
-                :value="study.StudyInstanceUID"
-                v-model="selected"
-                @click.stop
-              />
-              <v-icon class="mb-2">mdi-folder-table</v-icon>
-              <div class="ml-2 overflow-hidden text-no-wrap">
-                <div class="text-subtitle-2 text-truncate" :title="study.title">
-                  {{ study.title }}
-                </div>
-                <div
-                  v-if="study.StudyDescription"
-                  class="text-caption text-truncate"
-                >
-                  {{ study.StudyDate }}
-                </div>
-              </div>
-            </div>
-
-            <div class="d-flex flex-column align-center justify-end mx-2">
-              <v-tooltip bottom>
-                Total series in study
-                <template v-slot:activator="{ on }">
-                  <div class="d-flex flex-row align-center mr-2" v-on="on">
-                    <v-icon small>mdi-folder-open</v-icon>
-                    <span class="text-caption text--secondary text-no-wrap">
-                      : {{ study.volumeKeys.length }}
-                    </span>
-                  </div>
-                </template>
-              </v-tooltip>
-            </div>
-          </div>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
-          <patient-study-volume-browser :volume-keys="study.volumeKeys" />
-        </v-expansion-panel-content>
-      </v-expansion-panel>
-    </v-expansion-panels>
-  </item-group>
-</template>
-
-<style>
-#patient-data-studies .v-expansion-panel--active > .v-expansion-panel-header {
-  min-height: unset;
-}
-
-#patient-data-studies .v-expansion-panel-content__wrap {
-  padding: 0 8px;
-}
-
-#patient-data-studies .v-expansion-panel::before {
-  box-shadow: none;
-}
-</style>
-
-<style scoped>
-.theme--light .patient-data-study-panel {
-  border: 1px solid #ddd;
-}
-
-.theme--dark .patient-data-study-panel {
-  border: 1px solid #171519;
-}
-
-.volume-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  grid-auto-rows: 200px;
-  justify-content: center;
-}
-
-.volume-card {
-  padding: 8px;
-  cursor: pointer;
-}
-
-.theme--light.volume-card-active {
-  background-color: #b3e5fc;
-  border-color: #b3e5fc;
-}
-
-.theme--dark.volume-card-active {
-  background-color: #01579b;
-  border-color: #01579b;
-}
-
-.study-header {
-  display: flex;
-  flex-flow: row;
-  align-items: center;
-  width: calc(100% - 24px);
-}
-
-.study-header-title {
-  display: flex;
-  flex-flow: row;
-  align-items: center;
-  flex-grow: 1;
-  /* used to ensure that the text can truncate */
-  min-width: 0;
-}
-
-.study-header-content {
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.study-header-line {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.series-desc {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.thumbnail-overlay >>> .v-overlay__content {
-  height: 100%;
-  width: 100%;
-}
-
-.volume-list >>> .theme--light.v-sheet--outlined {
-  border: none;
-}
-</style>