volview 4.0.0

package/src/components/DataBrowser.vue

@@ -0,0 +1,173 @@
+<script lang="ts">
+import { computed, defineComponent, watch } from '@vue/composition-api';
+import SampleDataBrowser from './SampleDataBrowser.vue';
+import ImageDataBrowser from './ImageDataBrowser.vue';
+import PatientBrowser from './PatientBrowser.vue';
+import { useDICOMStore } from '../store/datasets-dicom';
+import { useImageStore } from '../store/datasets-images';
+import { usePanels } from '../composables/usePanels';
+
+const SAMPLE_DATA_KEY = 'sampleData';
+const ANONYMOUS_DATA_KEY = 'anonymousData';
+
+export default defineComponent({
+  name: 'DataBrowser',
+  components: {
+    SampleDataBrowser,
+    ImageDataBrowser,
+    PatientBrowser,
+  },
+  setup() {
+    const dicomStore = useDICOMStore();
+    const imageStore = useImageStore();
+
+    // TODO show patient ID in parens if there is a name conflict
+    const patients = computed(() =>
+      Object.entries(dicomStore.patientInfo)
+        .map(([key, info]) => ({
+          key,
+          name: info.PatientName,
+          info,
+        }))
+        .sort((a, b) => (a.name < b.name ? -1 : 1))
+    );
+
+    const hasAnonymousImages = computed(
+      () =>
+        imageStore.idList.filter((id) => !(id in dicomStore.imageIDToVolumeKey))
+          .length > 0
+    );
+
+    const panelKeys = computed(
+      () =>
+        new Set([
+          SAMPLE_DATA_KEY,
+          ...(hasAnonymousImages.value ? [ANONYMOUS_DATA_KEY] : []),
+          ...patients.value.map((study) => study.key),
+        ])
+    );
+
+    const { handlePanelChange, openPanels } = usePanels(panelKeys);
+
+    // Collapse Sample Data after loading data
+    watch(panelKeys, (newSet, oldSet) => {
+      // Sample Data panel index always 0
+      if (newSet.size > oldSet.size && openPanels.value.includes(0)) {
+        handlePanelChange(SAMPLE_DATA_KEY);
+      }
+    });
+
+    return {
+      openPanels,
+      patients,
+      deletePatient: dicomStore.deletePatient,
+      hasAnonymousImages,
+      handlePanelChange,
+      SAMPLE_DATA_KEY,
+      ANONYMOUS_DATA_KEY,
+    };
+  },
+});
+</script>
+
+<template>
+  <div id="data-module" class="mx-2 fill-height">
+    <div id="data-panels">
+      <v-expansion-panels multiple accordion :value="openPanels">
+        <v-expansion-panel
+          v-if="hasAnonymousImages"
+          key="anonymousImages"
+          @change="handlePanelChange(ANONYMOUS_DATA_KEY)"
+        >
+          <v-expansion-panel-header>
+            <v-icon class="collection-header-icon">mdi-image</v-icon>
+            <span>Anonymous</span>
+          </v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <image-data-browser />
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+        <v-expansion-panel
+          v-for="patient in patients"
+          :key="patient.key"
+          @change="handlePanelChange(patient.key)"
+        >
+          <v-expansion-panel-header>
+            <div class="patient-header">
+              <v-icon class="collection-header-icon">mdi-account</v-icon>
+              <span class="patient-header-name" :title="patient.name">
+                {{ patient.name }}
+              </span>
+              <v-spacer />
+              <v-menu offset-x>
+                <template v-slot:activator="{ on, attrs }">
+                  <v-btn
+                    icon
+                    small
+                    class="mr-3"
+                    @click.stop
+                    v-bind="attrs"
+                    v-on="on"
+                  >
+                    <v-icon small>mdi-dots-vertical</v-icon>
+                  </v-btn>
+                </template>
+                <v-list dense>
+                  <v-list-item @click.stop="deletePatient(patient.key)">
+                    <v-list-item-title>Delete Patient</v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </div>
+          </v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <patient-browser :patient-key="patient.key" />
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+        <v-expansion-panel
+          key="sampleData"
+          @change="handlePanelChange(SAMPLE_DATA_KEY)"
+        >
+          <v-expansion-panel-header>
+            <v-icon class="collection-header-icon">mdi-card-bulleted</v-icon>
+            <span>Sample Data</span>
+          </v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <sample-data-browser />
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#data-module {
+  display: flex;
+  flex-flow: column;
+}
+
+#data-panels {
+  flex: 2;
+  overflow-y: auto;
+}
+
+.collection-header-icon {
+  flex: 0;
+  margin-right: 16px;
+}
+
+.patient-header {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  /* 24px accomodates the open/close icon indicator */
+  max-width: calc(100% - 24px);
+}
+
+.patient-header-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/components/DragAndDrop.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    v-on:dragover.prevent="onDragOver"
+    v-on:dragleave="onDragLeave"
+    v-on:drop.prevent="onDrop"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot :dragHover="dragHover" />
+  </div>
+</template>
+
+<script>
+async function readAllDirEntries(dirEntry) {
+  const reader = dirEntry.createReader();
+  const allEntries = [];
+  let entries = [];
+  do {
+    // eslint-disable-next-line no-await-in-loop
+    entries = await new Promise((resolve, reject) => {
+      reader.readEntries(resolve, reject);
+    });
+    allEntries.push(...entries);
+  } while (entries.length);
+  return allEntries;
+}
+
+async function entryToFile(fileEntry) {
+  return new Promise((resolve, reject) => {
+    fileEntry.file(resolve, reject);
+  });
+}
+
+async function readAllFiles(entries) {
+  const toProcess = [...entries];
+  const fileEntries = [];
+  while (toProcess.length) {
+    const entry = toProcess.shift();
+    if (entry.isFile) {
+      fileEntries.push(entry);
+    } else {
+      // eslint-disable-next-line no-await-in-loop
+      toProcess.push(...(await readAllDirEntries(entry)));
+    }
+  }
+  return Promise.all(fileEntries.map(entryToFile));
+}
+
+export default {
+  name: 'DragAndDrop',
+  props: {
+    enabled: Boolean,
+  },
+  data() {
+    return {
+      dragHover: false,
+    };
+  },
+  methods: {
+    onDragOver(ev) {
+      if (this.enabled) {
+        ev.preventDefault();
+
+        const { types } = ev.dataTransfer;
+        if (
+          types && types instanceof Array
+            ? types.indexOf('Files') !== -1
+            : 'Files' in types
+        ) {
+          this.dragHover = true;
+          if (this.dragTimeout !== null) {
+            window.clearTimeout(this.dragTimeout);
+            this.dragTimeout = null;
+          }
+        }
+      }
+    },
+    onDragLeave() {
+      if (this.enabled) {
+        this.dragTimeout = window.setTimeout(() => {
+          this.dragHover = false;
+          this.dragTimeout = null;
+        }, 50);
+      }
+    },
+    async onDrop(ev) {
+      if (this.enabled) {
+        this.dragHover = false;
+        if (ev.dataTransfer.items) {
+          const entries = [...ev.dataTransfer.items].map((item) => {
+            const getAsEntry = item.webkitGetAsEntry || item.getAsEntry;
+            return getAsEntry.call(item);
+          });
+          const files = await readAllFiles(entries);
+          this.$emit('drop', files);
+        } else {
+          this.$emit('drop', Array.from(ev.dataTransfer.files));
+        }
+      }
+    },
+  },
+  created() {
+    // used to debounce dragover
+    this.dragTimeout = null;
+  },
+};
+</script>

package/src/components/GroupableItem.vue

@@ -0,0 +1,30 @@
+<script>
+export default {
+  name: 'GroupableItem',
+  inject: ['group'],
+  props: {
+    value: { required: true },
+  },
+  render() {
+    const nodes = this.$scopedSlots.default({
+      active: this.group.isSelected(this.value),
+      select: this.select,
+      toggle: this.toggle,
+    });
+    // always return first node, if any.
+    return nodes[0];
+  },
+  methods: {
+    select() {
+      this.group.selectItem(this.value);
+    },
+    toggle() {
+      if (this.group.isSelected(this.value)) {
+        this.group.selectItem(null);
+      } else {
+        this.group.selectItem(this.value);
+      }
+    },
+  },
+};
+</script>

package/src/components/ImageDataBrowser.vue

@@ -0,0 +1,186 @@
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  set,
+  del,
+  reactive,
+  watch,
+} from '@vue/composition-api';
+import ItemGroup from '@/src/components/ItemGroup.vue';
+import GroupableItem from '@/src/components/GroupableItem.vue';
+import ImageListCard from '@/src/components/ImageListCard.vue';
+import { createVTKImageThumbnailer } from '@/src/core/thumbnailers/vtk-image';
+import { useImageStore } from '../store/datasets-images';
+import { useDICOMStore } from '../store/datasets-dicom';
+import {
+  DataSelection,
+  selectionEquals,
+  useDatasetStore,
+} from '../store/datasets';
+import { useMultiSelection } from '../composables/useMultiSelection';
+
+function imageCacheKey(dataID: string) {
+  return `image-${dataID}`;
+}
+
+export default defineComponent({
+  components: {
+    ItemGroup,
+    GroupableItem,
+    ImageListCard,
+  },
+  setup() {
+    const imageStore = useImageStore();
+    const dicomStore = useDICOMStore();
+    const dataStore = useDatasetStore();
+
+    const primarySelection = computed(() => dataStore.primarySelection);
+
+    const nonDICOMImages = computed(() =>
+      imageStore.idList.filter((id) => !(id in dicomStore.imageIDToVolumeKey))
+    );
+
+    const images = computed(() => {
+      const { metadata } = imageStore;
+      return nonDICOMImages.value.map((id) => ({
+        id,
+        cacheKey: imageCacheKey(id),
+        // for UI selection
+        selectionKey: {
+          type: 'image',
+          dataID: id,
+        } as DataSelection,
+        name: metadata[id].name,
+        dimensions: metadata[id].dimensions,
+        spacing: [...metadata[id].spacing].map((s) => s.toFixed(2)),
+      }));
+    });
+
+    // --- thumbnails --- //
+
+    type Thumbnail = {
+      imageURI: string;
+      aspectRatio: number;
+    };
+    const thumbnails = reactive<Record<string, Thumbnail>>({});
+    const thumbnailer = createVTKImageThumbnailer();
+
+    watch(
+      nonDICOMImages,
+      (imageIDs) => {
+        imageIDs.forEach(async (id) => {
+          const cacheKey = imageCacheKey(id);
+          if (!(cacheKey in thumbnails)) {
+            const imageData = imageStore.dataIndex[id];
+            const canvasIM = thumbnailer.generate(imageData);
+            const imageURI = thumbnailer.imageDataToDataURI(canvasIM, 100, 100);
+            const dims = imageData.getDimensions();
+            const aspectRatio = dims[0] / dims[1];
+            set(thumbnails, cacheKey, { imageURI, aspectRatio });
+          }
+        });
+
+        // delete old thumbnails
+        const idLookup = new Set(imageIDs.map((id) => imageCacheKey(id)));
+        Object.keys(thumbnails).forEach((cacheKey) => {
+          if (!idLookup.has(cacheKey)) {
+            del(thumbnails, cacheKey);
+          }
+        });
+      },
+      { immediate: true, deep: true }
+    );
+
+    // --- selection --- //
+
+    const { selected, selectedAll, selectedSome } =
+      useMultiSelection(nonDICOMImages);
+
+    function removeSelection() {
+      selected.value.forEach((id) => {
+        imageStore.deleteData(id);
+      });
+      selected.value = [];
+    }
+
+    return {
+      selected,
+      selectedAll,
+      selectedSome,
+      removeSelection,
+      images,
+      thumbnails,
+      primarySelection,
+      selectionEquals,
+      setPrimarySelection: (sel: DataSelection) => {
+        dataStore.setPrimarySelection(sel);
+      },
+    };
+  },
+});
+</script>
+
+<template>
+  <div>
+    <div v-if="images.length === 0" class="text-center">No images loaded</div>
+    <v-container v-show="images.length" class="pa-0">
+      <v-row no-gutters justify="space-between">
+        <v-col cols="6" align-self="center">
+          <v-checkbox
+            class="ml-3 align-center justify-center"
+            :indeterminate="selectedSome && !selectedAll"
+            label="Select All"
+            v-model="selectedAll"
+          ></v-checkbox>
+        </v-col>
+        <v-col cols="6" align-self="center" class="d-flex justify-end">
+          <v-tooltip left>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn
+                icon
+                :disabled="!selectedSome"
+                @click.stop="removeSelection"
+                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>
+    <item-group
+      :value="primarySelection"
+      :testFunction="selectionEquals"
+      @change="setPrimarySelection"
+    >
+      <groupable-item
+        v-for="image in images"
+        :key="image.id"
+        v-slot="{ active, select }"
+        :value="image.selectionKey"
+      >
+        <image-list-card
+          selectable
+          :active="active"
+          :title="image.name"
+          :image-url="(thumbnails[image.cacheKey] || {}).imageURI || ''"
+          :image-size="100"
+          @click="select"
+          :id="image.id"
+          :inputValue="image.id"
+          v-model="selected"
+        >
+          <div class="text-body-2 font-weight-bold text-no-wrap text-truncate">
+            {{ image.name }}
+          </div>
+          <div class="caption">Dims: ({{ image.dimensions.join(', ') }})</div>
+          <div class="caption">Spacing: ({{ image.spacing.join(', ') }})</div>
+        </image-list-card>
+      </groupable-item>
+    </item-group>
+  </div>
+</template>

package/src/components/ImageListCard.vue

@@ -0,0 +1,114 @@
+<template>
+  <v-hover v-slot="{ hover }">
+    <v-card
+      :disabled="disabled"
+      outlined
+      :ripple="!disabled"
+      :class="{
+        'image-list-card-hover': !disabled && hover,
+        'image-list-card-active': !disabled && active,
+      }"
+      v-on="disabled ? {} : $listeners"
+    >
+      <v-container>
+        <v-row no-gutters class="flex-nowrap">
+          <v-col v-if="selectable" cols="1" class="d-flex align-center">
+            <v-checkbox
+              @click.stop
+              :key="id"
+              :value="inputValue"
+              :input-value="value"
+              :disabled="disabled"
+              @change="onChange"
+            />
+          </v-col>
+          <v-col
+            cols="4"
+            class="image-container flex-grow-0"
+            :style="{ maxWidth: `${imageSize}px` }"
+          >
+            <v-img
+              contain
+              :height="`${imageSize}px`"
+              :width="`${imageSize}px`"
+              :src="imageUrl"
+            />
+            <v-overlay absolute :value="$slots['image-overlay']">
+              <slot name="image-overlay" />
+            </v-overlay>
+          </v-col>
+          <v-col :cols="7">
+            <div class="ml-2">
+              <slot></slot>
+            </div>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card>
+  </v-hover>
+</template>
+
+<style scoped>
+.theme--light.image-list-card-hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-color: rgba(0, 0, 0, 0.1);
+  transition: all 0.25s;
+}
+
+.theme--dark.image-list-card-hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.1);
+  transition: all 0.25s;
+}
+
+.theme--light.image-list-card-active {
+  background-color: #b3e5fc;
+  border-color: #b3e5fc;
+}
+
+.theme--dark.image-list-card-active {
+  background-color: #01579b;
+  border-color: #01579b;
+}
+
+.image-container {
+  position: relative;
+  margin-right: 20px;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  name: 'ImageListCard',
+  props: {
+    active: Boolean,
+    imageSize: {
+      type: Number,
+      default: 80,
+    },
+    imageUrl: {
+      type: String,
+    },
+    selectable: {
+      type: Boolean,
+      default: false,
+    },
+    id: String,
+    value: Array,
+    inputValue: String,
+    disabled: Boolean,
+  },
+
+  setup(props, { emit }) {
+    const onChange = (event: any) => {
+      emit('input', event);
+    };
+
+    return {
+      onChange,
+    };
+  },
+});
+</script>

package/src/components/ItemGroup.vue

@@ -0,0 +1,74 @@
+<script>
+/**
+ * This is meant as a smaller, more specific version of
+ * vuetify's v-item-group + v-item.
+ */
+export default {
+  name: 'ItemGroup',
+  provide() {
+    return {
+      group: {
+        selectItem: this.selectItem,
+        isSelected: this.isSelected,
+      },
+    };
+  },
+  props: {
+    value: {
+      type: null,
+      required: false,
+    },
+    mandatory: {
+      type: Boolean,
+      default: false,
+    },
+    testFunction: {
+      type: Function,
+      required: false,
+    },
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  data() {
+    return {
+      internalValue: null,
+    };
+  },
+  watch: {
+    value(v) {
+      if (v !== this.internalValue) {
+        this.internalValue = v;
+      }
+    },
+  },
+  mounted() {
+    this.internalValue = this.value;
+  },
+  render(h) {
+    return h(
+      'div',
+      { props: this.$attrs, on: this.$listeners },
+      this.$slots.default
+    );
+  },
+  methods: {
+    selectItem(itemValue) {
+      if (!(this.mandatory && !itemValue)) {
+        this.internalValue = itemValue;
+        this.$emit('change', this.internalValue);
+      }
+    },
+    isSelected(valueToTest) {
+      if (this.internalValue === null || this.internalValue === undefined) {
+        return false;
+      }
+      if (this.testFunction) {
+        return this.testFunction(valueToTest, this.internalValue);
+      }
+      return valueToTest === this.internalValue;
+    },
+  },
+};
+</script>