volview 4.0.0

package/src/components/ModelBrowser.vue

@@ -0,0 +1,83 @@
+<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

@@ -0,0 +1,137 @@
+<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

@@ -0,0 +1,174 @@
+<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

@@ -0,0 +1,280 @@
+<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>