volview 4.0.0 → 4.0.1

package/src/components/SampleDataBrowser.vue

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

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

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

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

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

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