volview 4.0.0 → 4.0.1

package/src/components/PatientStudyVolumeBrowser.vue

@@ -1,325 +0,0 @@
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  del,
-  reactive,
-  set,
-  toRefs,
-  watch,
-} from '@vue/composition-api';
-import Image from 'itk-wasm/dist/core/Image';
-import type { PropType } from '@vue/composition-api';
-import GroupableItem from '@/src/components/GroupableItem.vue';
-import { useDICOMStore } from '../store/datasets-dicom';
-import {
-  DataSelection,
-  selectionEquals,
-  useDatasetStore,
-} from '../store/datasets';
-import { useMultiSelection } from '../composables/useMultiSelection';
-import { useMessageStore } from '../store/messages';
-
-const canvas = document.createElement('canvas');
-
-function dicomCacheKey(volKey: string) {
-  return `dicom-${volKey}`;
-}
-
-// Assume itkImage type is Uint8Array
-function itkImageToURI(itkImage: Image) {
-  const [width, height] = itkImage.size;
-  const im = new ImageData(width, height);
-  const arr32 = new Uint32Array(im.data.buffer);
-  const itkBuf = itkImage.data;
-  if (!itkBuf) {
-    return '';
-  }
-
-  for (let i = 0; i < itkBuf.length; i += 1) {
-    const byte = itkBuf[i] as number;
-    // ABGR order
-    // eslint-disable-next-line no-bitwise
-    arr32[i] = (255 << 24) | (byte << 16) | (byte << 8) | byte;
-  }
-
-  canvas.width = width;
-  canvas.height = height;
-  const ctx = canvas.getContext('2d');
-  if (ctx) {
-    ctx.putImageData(im, 0, 0);
-    return canvas.toDataURL('image/png');
-  }
-  return '';
-}
-
-async function generateDICOMThumbnail(
-  dicomStore: ReturnType<typeof useDICOMStore>,
-  volumeKey: string
-) {
-  if (volumeKey in dicomStore.volumeInfo) {
-    const info = dicomStore.volumeInfo[volumeKey];
-    const middleSlice = Math.ceil(Number(info.NumberOfSlices) / 2);
-    const thumb = (await dicomStore.getVolumeSlice(
-      volumeKey,
-      middleSlice,
-      true
-    )) as Image;
-
-    return thumb;
-  }
-  return null;
-}
-
-export default defineComponent({
-  name: 'PatientBrowser',
-  props: {
-    volumeKeys: {
-      type: Array as PropType<Array<string>>,
-      required: true,
-    },
-  },
-  components: {
-    GroupableItem,
-  },
-  setup(props) {
-    const { volumeKeys } = toRefs(props);
-    const dicomStore = useDICOMStore();
-    const dataStore = useDatasetStore();
-
-    const volumes = computed(() => {
-      const { volumeInfo } = dicomStore;
-      return volumeKeys.value.map((volumeKey) => ({
-        key: volumeKey,
-        // for thumbnailing
-        cacheKey: dicomCacheKey(volumeKey),
-        info: volumeInfo[volumeKey],
-        // for UI selection
-        selectionKey: {
-          type: 'dicom',
-          volumeKey,
-        } as DataSelection,
-      }));
-    });
-
-    // --- thumbnails --- //
-
-    const thumbnailCache = reactive<Record<string, string>>({});
-
-    watch(
-      volumeKeys,
-      (keys) => {
-        keys.forEach(async (key) => {
-          const cacheKey = dicomCacheKey(key);
-          if (cacheKey in thumbnailCache) {
-            return;
-          }
-
-          try {
-            const thumb = await generateDICOMThumbnail(dicomStore, key);
-            if (thumb !== null) {
-              const encodedImage = itkImageToURI(thumb);
-              set(thumbnailCache, cacheKey, encodedImage);
-            }
-          } catch (err) {
-            if (err instanceof Error) {
-              const messageStore = useMessageStore();
-              messageStore.addError('Failed to generate thumbnails', {
-                details: `${err}. More details can be found in the developer's console.`,
-              });
-            }
-          }
-        });
-
-        // deletion case
-        const lookup = new Set(keys.map((key) => dicomCacheKey(key)));
-        Object.keys(thumbnailCache).forEach((key) => {
-          if (!lookup.has(key)) {
-            del(thumbnailCache, key);
-          }
-        });
-      },
-      { immediate: true, deep: true }
-    );
-
-    // --- selection --- //
-
-    const { selected, selectedAll, selectedSome } =
-      useMultiSelection(volumeKeys);
-
-    const removeSelectedDICOMVolumes = () => {
-      selected.value.forEach(async (volumeKey) => {
-        dicomStore.deleteVolume(volumeKey);
-      });
-
-      selected.value = [];
-    };
-
-    return {
-      selected,
-      selectedAll,
-      selectedSome,
-      thumbnailCache,
-      volumes,
-      removeSelectedDICOMVolumes,
-      selectionEquals,
-      setPrimarySelection: (sel: DataSelection) => {
-        dataStore.setPrimarySelection(sel);
-      },
-    };
-  },
-});
-</script>
-
-<template>
-  <v-container 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"
-          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="removeSelectedDICOMVolumes"
-              v-bind="attrs"
-              v-on="on"
-            >
-              <v-icon>mdi-delete</v-icon>
-            </v-btn>
-          </template>
-          Delete selected
-        </v-tooltip>
-      </v-col>
-    </v-row>
-    <v-row no-gutters>
-      <v-col>
-        <div class="my-2 volume-list">
-          <groupable-item
-            v-for="volume in volumes"
-            :key="volume.info.VolumeID"
-            v-slot:default="{ active, select }"
-            :value="volume.selectionKey"
-          >
-            <v-card
-              outlined
-              ripple
-              :class="{
-                'volume-card': true,
-                'volume-card-active': active,
-              }"
-              min-height="180px"
-              min-width="180px"
-              :title="volume.info.SeriesDescription"
-              @click="select"
-            >
-              <v-row no-gutters class="pa-0" justify="center">
-                <div>
-                  <v-img
-                    contain
-                    max-height="150px"
-                    max-width="150px"
-                    :src="(thumbnailCache || {})[volume.cacheKey] || ''"
-                  >
-                    <template v-slot:placeholder>
-                      <v-row
-                        class="fill-height ma-0"
-                        align="center"
-                        justify="center"
-                      >
-                        <v-progress-circular
-                          indeterminate
-                          color="grey lighten-5"
-                        ></v-progress-circular>
-                      </v-row>
-                    </template>
-                    <v-overlay
-                      absolute
-                      class="thumbnail-overlay"
-                      :value="true"
-                      opacity="0"
-                    >
-                      <div class="d-flex flex-column fill-height">
-                        <v-row no-gutters justify="end" align-content="start">
-                          <v-checkbox
-                            :key="volume.info.VolumeID"
-                            :value="volume.key"
-                            v-model="selected"
-                            @click.stop
-                            dense
-                          />
-                        </v-row>
-                        <v-spacer />
-                        <v-row no-gutters justify="start" align="end">
-                          <div class="mb-1 ml-1 text-caption">
-                            [{{ volume.info.NumberOfSlices }}]
-                          </div>
-                        </v-row>
-                      </div>
-                    </v-overlay>
-                  </v-img>
-                </div>
-              </v-row>
-              <v-card-text
-                class="text--primary text-caption text-center series-desc mt-n3"
-              >
-                <div class="text-ellipsis">
-                  {{ volume.info.SeriesDescription || '(no description)' }}
-                </div>
-              </v-card-text>
-            </v-card>
-          </groupable-item>
-        </div>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<style scoped>
-.volume-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 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;
-}
-
-.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>

package/src/components/RenderingModule.vue

@@ -1,49 +0,0 @@
-<script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
-import { useCurrentImage } from '../composables/useCurrentImage';
-import VolumeProperties from './VolumeProperties.vue';
-import VolumeRendering from './VolumeRendering.vue';
-import VolumePresets from './VolumePresets.vue';
-
-export default defineComponent({
-  components: { VolumeRendering, VolumePresets, VolumeProperties },
-  setup() {
-    const { currentImageData } = useCurrentImage();
-    const hasCurrentImage = computed(() => !!currentImageData.value);
-    return {
-      hasCurrentImage,
-    };
-  },
-});
-</script>
-
-<template>
-  <div class="overflow-y-auto mx-2 fill-height">
-    <template v-if="hasCurrentImage">
-      <volume-rendering />
-      <v-expansion-panels multiple accordion :value="[1]">
-        <v-expansion-panel>
-          <v-expansion-panel-header>
-            <v-icon class="flex-grow-0 mr-4">mdi-palette</v-icon>
-            Color Presets
-          </v-expansion-panel-header>
-          <v-expansion-panel-content>
-            <volume-presets />
-          </v-expansion-panel-content>
-        </v-expansion-panel>
-        <v-expansion-panel>
-          <v-expansion-panel-header>
-            <v-icon class="flex-grow-0 mr-4">mdi-cube-scan</v-icon>
-            Cinematic Rendering
-          </v-expansion-panel-header>
-          <v-expansion-panel-content>
-            <volume-properties />
-          </v-expansion-panel-content>
-        </v-expansion-panel>
-      </v-expansion-panels>
-    </template>
-    <template v-else>
-      <div class="text-center pt-12 text-subtitle-1">No image selected</div>
-    </template>
-  </div>
-</template>

package/src/components/ResizableNavDrawer.vue

@@ -1,158 +0,0 @@
-<script>
-import { VNavigationDrawer } from 'vuetify/lib';
-
-export const RESIZE_CURSOR = 'ew-resize';
-
-/**
- * Events: onResize(width:Number)
- */
-export default {
-  name: 'ResizableNavDrawer',
-  props: {
-    minWidth: Number,
-    maxWidth: Number,
-    width: Number,
-    handleSize: {
-      type: Number,
-      default: 4,
-    },
-  },
-
-  data() {
-    return {
-      internalWidth: this.width,
-    };
-  },
-
-  computed: {
-    handleSizeCSS() {
-      return `${this.handleSize}px`;
-    },
-  },
-
-  mounted() {
-    this.oldCursor = '';
-    this.oldUserSelect = '';
-
-    this.setResizableStyles();
-    this.setEvents();
-  },
-
-  beforeDestroy() {
-    this.clearEvents();
-    this.stopResize();
-  },
-
-  render(h) {
-    // forwards slots, scoped slots, and more to v-navigation-drawer
-    return h(
-      VNavigationDrawer,
-      {
-        props: {
-          // this.$attrs is the non-prop attrs we receive, which should
-          // be forwarded to v-navigation-drawer
-          ...this.$attrs,
-          width: this.internalWidth,
-        },
-        on: this.$listeners,
-        scopedSlots: this.$scopedSlots,
-        ref: 'infoPane',
-      },
-      this.$slots.default
-    );
-  },
-
-  methods: {
-    setResizableStyles() {
-      // manual styling
-      const el = this.$refs.infoPane.$el.querySelector(
-        '.v-navigation-drawer__border'
-      );
-
-      // NOTE: width is not reactive to handle size
-      el.style.width = this.handleSizeCSS;
-      el.style.backgroundColor = 'transparent';
-      el.style.touchAction = 'none';
-      // NOTE: dynamically setting "right" won't update the border position
-      if ('right' in this.$attrs) {
-        el.style.borderLeft = '2px solid rgba(0, 0, 0, 0.24)';
-      } else {
-        el.style.borderRight = '2px solid rgba(0, 0, 0, 0.24)';
-      }
-      el.style.cursor = RESIZE_CURSOR;
-    },
-
-    setEvents() {
-      this.drawerBorder = this.$refs.infoPane.$el.querySelector(
-        '.v-navigation-drawer__border'
-      );
-      this.drawerBorder.addEventListener('pointerdown', this.startResize);
-      this.drawerBorder.addEventListener('pointermove', this.handleResize);
-      this.drawerBorder.addEventListener('pointerup', this.stopResize);
-    },
-
-    clearEvents() {
-      this.drawerBorder.removeEventListener('pointerdown', this.startResize);
-      this.drawerBorder.removeEventListener('pointermove', this.handleResize);
-      this.drawerBorder.removeEventListener('pointerup', this.stopResize);
-    },
-
-    startResize(ev) {
-      if (this.drawerBorder.hasPointerCapture(ev.pointerId)) return;
-      this.drawerBorder.setPointerCapture(ev.pointerId);
-
-      this.$refs.infoPane.$el.style.transition = 'initial';
-
-      this.setCursor(RESIZE_CURSOR);
-      this.disableSelection();
-    },
-
-    stopResize(ev) {
-      if (ev) {
-        if (!this.drawerBorder.hasPointerCapture(ev.pointerId)) return;
-        this.drawerBorder.releasePointerCapture(ev.pointerId);
-      }
-
-      this.$refs.infoPane.$el.style.transition = '';
-
-      this.resetCursor();
-      this.resetSelection();
-    },
-
-    handleResize(evt) {
-      if (!this.drawerBorder.hasPointerCapture(evt.pointerId)) return;
-
-      const width =
-        'right' in this.$attrs
-          ? document.body.scrollWidth - evt.clientX
-          : evt.clientX;
-
-      const min = this.minWidth || this.handleSize;
-      const max = this.maxWidth || Infinity;
-      this.internalWidth = Math.min(max, Math.max(min, width));
-
-      this.$emit('resize', this.internalWidth);
-    },
-
-    setCursor(cursor) {
-      this.oldCursor = document.body.style.cursor;
-      document.body.style.cursor = cursor;
-    },
-
-    resetCursor() {
-      document.body.style.cursor = this.oldCursor;
-      this.oldCursor = '';
-    },
-
-    disableSelection() {
-      this.oldUserSelect = document.body.style.userSelect;
-      document.body.style.userSelect = 'none';
-    },
-
-    resetSelection() {
-      document.body.style.userSelect = this.oldUserSelect;
-      this.oldUserSelect = '';
-    },
-  },
-};
-</script>