volview 4.0.0 → 4.0.1

package/src/components/DataBrowser.vue

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

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

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

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

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

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