volview 4.0.0

package/src/components/SampleDataBrowser.vue

@@ -0,0 +1,198 @@
+<script lang="ts">
+import {
+  set,
+  del,
+  defineComponent,
+  reactive,
+  computed,
+} from '@vue/composition-api';
+import ImageListCard from '@/src/components/ImageListCard.vue';
+import { SAMPLE_DATA } from '../config';
+import {
+  convertSuccessResultToDataSelection,
+  useDatasetStore,
+} from '../store/datasets';
+import { useMessageStore } from '../store/messages';
+import { SampleDataset } from '../types';
+import { useImageStore } from '../store/datasets-images';
+import { useDICOMStore } from '../store/datasets-dicom';
+import { fetchFile } from '../utils/fetch';
+
+enum ProgressState {
+  Pending,
+  Error,
+  Done,
+}
+
+interface Progress {
+  [name: string]: {
+    state: ProgressState;
+    progress: number;
+  };
+}
+
+export default defineComponent({
+  components: {
+    ImageListCard,
+  },
+  setup() {
+    const datasetStore = useDatasetStore();
+    const status = reactive<{ progress: Progress }>({
+      progress: {},
+    });
+    // URL -> data ID
+    const loaded = reactive<{
+      urlToID: Record<string, string>;
+      idToURL: Record<string, string>;
+    }>({
+      urlToID: {},
+      idToURL: {},
+    });
+
+    const clearLoadedStatus = (id: string) => {
+      const url = loaded.idToURL[id];
+      if (url) {
+        del(loaded.idToURL, id);
+        del(loaded.urlToID, url);
+      }
+    };
+
+    const imageStore = useImageStore();
+    imageStore.$onAction(({ name, args, after }) => {
+      if (name === 'deleteData') {
+        after(() => {
+          const [id] = args;
+          clearLoadedStatus(id as string);
+        });
+      }
+    });
+
+    const dicomStore = useDICOMStore();
+    dicomStore.$onAction(({ name, args, after }) => {
+      if (name === 'deleteVolume') {
+        after(() => {
+          const [key] = args;
+          clearLoadedStatus(key as string);
+        });
+      }
+    });
+
+    async function downloadSample(sample: SampleDataset) {
+      const progress = (percent: number) => {
+        // TODO set/del doesn't exist in vue 3
+        set(status.progress, sample.name, {
+          state: ProgressState.Pending,
+          progress: percent * 100,
+        });
+      };
+      try {
+        progress(Infinity);
+
+        const sampleFile = await fetchFile(sample.url, sample.filename, {
+          progress,
+        });
+        status.progress[sample.name].state = ProgressState.Done;
+
+        if (sampleFile) {
+          const [loadResult] = await datasetStore.loadFiles([sampleFile]);
+          if (loadResult?.loaded) {
+            const selection = convertSuccessResultToDataSelection(loadResult);
+            if (selection) {
+              const id =
+                selection.type === 'image'
+                  ? selection.dataID
+                  : selection.volumeKey;
+              set(loaded.idToURL, id, sample.url);
+              set(loaded.urlToID, sample.url, id);
+            }
+            datasetStore.setPrimarySelection(selection);
+          }
+        }
+      } catch (error) {
+        status.progress[sample.name].state = ProgressState.Error;
+        const messageStore = useMessageStore();
+        messageStore.addError('Failed to load sample data', error as Error);
+      } finally {
+        del(status.progress, sample.name);
+      }
+    }
+
+    const samples = computed(() =>
+      SAMPLE_DATA.map((sample) => {
+        const isDone =
+          status.progress[sample.name]?.state === ProgressState.Done;
+        const isError =
+          status.progress[sample.name]?.state === ProgressState.Error;
+        const isLoaded = !!loaded.urlToID[sample.url];
+        const progress =
+          isDone || isLoaded
+            ? 100
+            : Math.floor(status.progress[sample.name]?.progress);
+        return {
+          ...sample,
+          isDownloading: sample.name in status.progress,
+          isDone,
+          isError,
+          isLoaded,
+          indeterminate: progress === Infinity,
+          progress,
+        };
+      })
+    );
+
+    return {
+      samples,
+      downloadSample,
+    };
+  },
+});
+</script>
+
+<template>
+  <div>
+    <image-list-card
+      v-for="sample in samples"
+      :disabled="sample.isDownloading || sample.isLoaded"
+      :key="sample.name"
+      :title="sample.name"
+      :image-url="sample.image"
+      :image-size="100"
+      @click="downloadSample(sample)"
+    >
+      <div class="body-2 font-weight-bold text-no-wrap text-truncate">
+        {{ sample.name }}
+      </div>
+      <div class="body-2 mt-2">{{ sample.description }}</div>
+      <template
+        v-slot:image-overlay
+        v-if="sample.isDownloading || sample.isLoaded"
+      >
+        <v-row class="fill-height ma-0" align="center" justify="center">
+          <v-progress-circular
+            color="white"
+            :indeterminate="sample.indeterminate && !sample.isDone"
+            :value="sample.progress"
+          >
+            <v-icon v-if="sample.isDone || sample.isLoaded" small color="white"
+              >mdi-check</v-icon
+            >
+            <v-icon v-else-if="sample.isError" small color="white">
+              mdi-alert-circle
+            </v-icon>
+            <span v-else-if="!sample.indeterminate" class="caption text--white">
+              {{ sample.progress }}
+            </span>
+          </v-progress-circular>
+        </v-row>
+      </template>
+    </image-list-card>
+  </div>
+</template>
+
+<style>
+/* The transition animation causes the progress bar to load slowly
+   when the value is updated rapidly. */
+.v-progress-circular__overlay {
+  transition: unset;
+}
+</style>

package/src/components/SaveSession.vue

@@ -0,0 +1,57 @@
+<template>
+  <v-card>
+    <v-card-title>
+      Saving Session State
+      <v-spacer />
+      <v-btn icon @click="$emit('close')"><v-icon>mdi-close</v-icon></v-btn>
+    </v-card-title>
+    <v-card-text>
+      <v-form v-model="valid">
+        <v-text-field
+          v-on:keyup.enter="saveSession"
+          v-model="fileName"
+          hint="The filename to use for the session state file."
+          label="Session State Filename"
+          :rules="[validFileName]"
+        />
+      </v-form>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer />
+      <v-btn color="secondary" @click="saveSession" :disabled="!valid">
+        <v-icon class="mr-2">mdi-content-save-all</v-icon>
+        <span>Save</span>
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+import { save } from '../io/state-file';
+
+const DEFAULT_FILENAME = 'session.volview.zip';
+
+export default defineComponent({
+  setup(props, { emit }) {
+    const fileName = ref(DEFAULT_FILENAME);
+    const valid = ref(true);
+
+    async function saveSession() {
+      await save(fileName.value);
+      emit('close');
+    }
+
+    function validFileName(name: string) {
+      return name.trim().length > 0 || 'Required';
+    }
+
+    return {
+      saveSession,
+      fileName,
+      validFileName,
+      valid,
+    };
+  },
+});
+</script>

package/src/components/Settings.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-card>
+    <v-card-title>
+      Settings
+      <v-spacer />
+      <v-btn icon @click="$emit('close')"><v-icon>mdi-close</v-icon></v-btn>
+    </v-card-title>
+    <v-card-text>
+      <v-switch label="Enable Dark Theme" v-model="dark"></v-switch>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, watchEffect } from '@vue/composition-api';
+import { useLocalStorage } from '@vueuse/core';
+import vuetify from '../plugins/vuetify';
+
+export default defineComponent({
+  setup() {
+    const store = useLocalStorage<boolean>(
+      'dark',
+      vuetify.framework.theme.dark ?? true
+    );
+
+    watchEffect(() => {
+      vuetify.framework.theme.dark = store.value;
+    });
+
+    return {
+      dark: store,
+    };
+  },
+});
+</script>

package/src/components/SliceSlider.vue

@@ -0,0 +1,182 @@
+<template>
+  <div
+    class="slice-slider"
+    ref="handleContainer"
+    @pointerdown="onDragStart"
+    @pointermove="onDragMove"
+    @pointerup="onDragEnd"
+    @pointercancel="onDragEnd"
+    @contextmenu="$event.preventDefault()"
+  >
+    <div class="slice-slider-track" />
+    <div
+      class="slice-slider-handle"
+      ref="handle"
+      :style="{
+        height: `${handleHeight}px`,
+        transform: `translate3d(0, ${handlePosition}px, 0)`,
+      }"
+    />
+  </div>
+</template>
+
+<script>
+function getYOffsetFromTransform(matStr) {
+  if (!matStr || matStr === 'none') {
+    return 0;
+  }
+  const values = matStr
+    .match(/matrix(?:3d)?\((.+)\)/)[1]
+    .split(',')
+    .map((v) => Number(v));
+  const is3D = matStr.includes('3d');
+  return is3D ? values[13] : values[5];
+}
+
+export default {
+  props: {
+    slice: {
+      type: Number,
+      default: 0,
+    },
+    min: {
+      type: Number,
+      required: true,
+    },
+    max: {
+      type: Number,
+      required: true,
+    },
+    step: {
+      type: Number,
+      required: true,
+    },
+    handleHeight: {
+      type: Number,
+      default: 20,
+    },
+  },
+
+  data() {
+    return {
+      maxHandlePos: 0,
+      dragging: false,
+      initialHandlePos: 0,
+      initialMousePosY: 0,
+      yOffset: 0,
+    };
+  },
+
+  computed: {
+    handlePosition() {
+      const range = this.max - this.min <= 0 ? 1 : this.max - this.min;
+      const pos = this.maxHandlePos * ((this.slice - this.min) / range);
+      return this.dragging ? this.draggingHandlePos : pos;
+    },
+    draggingHandlePos() {
+      return Math.min(
+        Math.max(0, this.initialHandlePos + this.yOffset),
+        this.maxHandlePos
+      );
+    },
+  },
+
+  mounted() {
+    this.updateMaxHandlePos();
+    this.resizeObserver = new ResizeObserver((entries) => {
+      if (entries.length === 1) {
+        this.updateMaxHandlePos();
+      }
+    });
+    this.resizeObserver.observe(this.$refs.handleContainer);
+  },
+
+  beforeDestroy() {
+    this.resizeObserver.disconnect();
+  },
+
+  methods: {
+    updateMaxHandlePos() {
+      this.maxHandlePos =
+        this.$refs.handleContainer.clientHeight - this.handleHeight;
+    },
+
+    onDragStart(ev) {
+      ev.preventDefault();
+
+      this.dragging = true;
+      this.initialMousePosY = ev.pageY;
+
+      if (ev.target === this.$refs.handle) {
+        const handleStyles = window.getComputedStyle(this.$refs.handle);
+        this.initialHandlePos = getYOffsetFromTransform(handleStyles.transform);
+      } else {
+        // move handle to mouse pos
+        const { y } = this.$refs.handleContainer.getBoundingClientRect();
+        this.initialHandlePos = Math.max(
+          0,
+          Math.min(this.maxHandlePos, ev.pageY - y - this.handleHeight / 2)
+        );
+        const newSlice = this.getNearestSlice(this.initialHandlePos);
+        this.$emit('input', newSlice);
+      }
+
+      this.yOffset = 0;
+
+      this.$refs.handleContainer.setPointerCapture(ev.pointerId);
+    },
+
+    onDragMove(ev) {
+      if (!this.$refs.handleContainer.hasPointerCapture(ev.pointerId)) return;
+      ev.preventDefault();
+
+      this.yOffset = ev.pageY - this.initialMousePosY;
+      const slice = this.getNearestSlice(this.handlePosition);
+      this.$emit('input', slice);
+    },
+
+    onDragEnd(ev) {
+      if (!this.$refs.handleContainer.hasPointerCapture(ev.pointerId)) return;
+      ev.preventDefault();
+      this.$refs.handleContainer.releasePointerCapture(ev.pointerId);
+
+      this.dragging = false;
+      const slice = this.getNearestSlice(this.handlePosition);
+      this.$emit('input', slice);
+    },
+
+    getNearestSlice(pos) {
+      const sliceEstimate = pos / this.maxHandlePos;
+      const frac = sliceEstimate * (this.max - this.min) + this.min;
+      return Math.round(frac / this.step) * this.step;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.slice-slider {
+  touch-action: none;
+}
+
+.slice-slider-handle {
+  position: relative;
+  width: 100%;
+  background: #ccc;
+  box-sizing: border-box;
+  border-radius: 3px;
+  border: 1px solid #999;
+}
+
+.slice-slider-track {
+  position: absolute;
+  margin: 0 auto;
+  top: 8px;
+  left: 0;
+  right: 0;
+  bottom: 8px;
+  width: 1px;
+  border: 1px solid #888;
+  border-radius: 2px;
+}
+</style>

package/src/components/SpleenModule.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="spleen-module" class="mx-2 height-100">
+    <v-btn
+      :disabled="!canSegment || loading"
+      :loading="loading"
+      @click="segmentCurrentImage"
+    >
+      Segment
+    </v-btn>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent, ref, unref } from '@vue/composition-api';
+
+import { useStore, useComputedState } from '@/src/composables/store';
+import { useWidgetProvider } from '@/src/composables/widgetProvider';
+import HostConnection from '@/server/host';
+import vtkLabelMap from '@/src/vtk/LabelMap';
+import { DEFAULT_LABELMAP_COLORS } from '@/src/constants';
+
+function copyImageToLabelMap(imageData) {
+  const labelmap = vtkLabelMap.newInstance(
+    imageData.get('spacing', 'origin', 'direction')
+  );
+  labelmap.setDimensions(imageData.getDimensions());
+  labelmap.getPointData().setScalars(imageData.getPointData().getScalars());
+  labelmap.computeTransforms();
+
+  labelmap.setColorMap(DEFAULT_LABELMAP_COLORS);
+  return labelmap;
+}
+
+export default defineComponent({
+  name: 'SpleenModule',
+  setup() {
+    const loading = ref(false);
+
+    const store = useStore();
+    const widgetProvider = useWidgetProvider();
+
+    const { currentImageId, currentImage } = useComputedState({
+      currentImageId(state) {
+        return state.selectedBaseImage;
+      },
+      currentImage(state) {
+        return state.data.vtkCache[state.selectedBaseImage] ?? null;
+      },
+    });
+
+    const canSegment = computed(() => Boolean(currentImage.value));
+
+    const connection = new HostConnection('ws://localhost:8888/ws');
+    connection.connect();
+
+    async function segmentCurrentImage() {
+      const curImage = unref(currentImage);
+      const curImageId = unref(currentImageId);
+      if (curImage) {
+        loading.value = true;
+
+        const result = await connection.call('run', currentImage.value, 44);
+        console.log('got result:', result);
+        const { segmentation, measurements } = result;
+
+        const segMap = copyImageToLabelMap(segmentation);
+        await store.dispatch('importLabelMap', {
+          name: 'whodis',
+          labelMap: segMap,
+          parent: curImageId,
+        });
+
+        measurements.measurements.map((mm) => {
+          const rulerState = {
+            version: '1.0',
+            type: 'ruler',
+            name: mm.name,
+            axis: 'IJK'[mm.axis.findIndex((v) => v === 1)],
+            slice: mm.slice,
+            system: mm.coordinate_system,
+            point1: mm.point1,
+            point2: mm.point2,
+          };
+
+          return widgetProvider.createWidget('Ruler', {
+            initialState: rulerState,
+          });
+        });
+
+        loading.value = false;
+      }
+    }
+
+    return {
+      canSegment,
+      segmentCurrentImage,
+      loading,
+    };
+  },
+});
+</script>

package/src/components/ToolButton.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-tooltip right transition="slide-x-transition">
+    <template v-slot:activator="{ on }">
+      <v-btn
+        text
+        tile
+        dark
+        :height="sizeV"
+        :width="sizeV"
+        :min-width="sizeV"
+        :max-width="sizeV"
+        :class="classV"
+        v-bind="$attrs"
+        v-on="{ ...on, ...$listeners }"
+      >
+        <v-icon :size="iconSize">{{ icon }}</v-icon>
+        <slot />
+      </v-btn>
+    </template>
+    <span>{{ name }}</span>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'ToolButton',
+  props: {
+    icon: { type: String, required: true },
+    name: { type: String, required: true },
+    size: { type: [Number, String], default: 40 },
+    buttonClass: [String, Array, Object],
+  },
+
+  computed: {
+    sizeV() {
+      return Number(this.size);
+    },
+    iconSize() {
+      return Math.floor(0.6 * this.sizeV);
+    },
+    classV() {
+      const classSpec = this.buttonClass;
+      if (typeof classSpec === 'string') {
+        return classSpec;
+      }
+      if (Array.isArray(classSpec)) {
+        return classSpec.join(' ');
+      }
+      if (classSpec && Object.keys(classSpec).length) {
+        return Object.keys(this.buttonClass)
+          .filter((key) => this.buttonClass[key])
+          .join(' ');
+      }
+      return '';
+    },
+  },
+};
+</script>