volview 4.0.0

package/src/components/PatientStudyVolumeBrowser.vue

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

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

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