volview 4.0.0

package/src/components/App.vue

@@ -0,0 +1,539 @@
+<template>
+  <drag-and-drop enabled @drop="openFiles" id="app-container">
+    <template v-slot="{ dragHover }">
+      <v-app>
+        <v-app-bar app dense clipped-left>
+          <v-btn
+            v-if="$vuetify.breakpoint.mobile"
+            icon
+            @click="leftSideBar = !leftSideBar"
+          >
+            <v-icon>mdi-menu</v-icon>
+          </v-btn>
+          <v-toolbar-title class="d-flex flex-row align-center mt-1">
+            <vol-view-logo v-if="$vuetify.breakpoint.mobile" />
+            <vol-view-full-logo v-else />
+          </v-toolbar-title>
+          <v-spacer />
+          <v-btn
+            tile
+            icon
+            class="toolbar-button"
+            @click="aboutBoxDialog = !aboutBoxDialog"
+          >
+            <v-icon>mdi-help-circle-outline</v-icon>
+          </v-btn>
+        </v-app-bar>
+        <resizable-nav-drawer
+          id="left-nav"
+          v-model="leftSideBar"
+          app
+          clipped
+          touchless
+          :min-width="450"
+          :max-width="550"
+          :width="450"
+          :handle-size="4"
+        >
+          <module-panel @close="leftSideBar = false" />
+        </resizable-nav-drawer>
+        <v-main id="content-main">
+          <div class="fill-height d-flex flex-row flex-grow-1">
+            <div
+              id="tools-strip"
+              class="grey darken-4 d-flex flex-column align-center"
+            >
+              <tool-button
+                size="40"
+                icon="mdi-folder-open"
+                name="Open files"
+                @click="userPromptFiles"
+              />
+              <tool-button
+                size="40"
+                icon="mdi-content-save-all"
+                name="Save session"
+                @click="saveDialog = true"
+              />
+              <div class="my-1 tool-separator" />
+              <v-menu offset-x>
+                <template v-slot:activator="{ on, attrs }">
+                  <div>
+                    <tool-button
+                      size="40"
+                      icon="mdi-view-dashboard"
+                      name="Layouts"
+                      v-bind="attrs"
+                      v-on="on"
+                    />
+                  </div>
+                </template>
+                <v-card>
+                  <v-card-text>
+                    <v-radio-group
+                      v-model="layoutName"
+                      class="mt-0"
+                      hide-details
+                    >
+                      <v-radio
+                        v-for="(value, key) in Layouts"
+                        :key="key"
+                        :label="value.name"
+                        :value="key"
+                      />
+                    </v-radio-group>
+                  </v-card-text>
+                </v-card>
+              </v-menu>
+              <template v-if="hasData">
+                <tool-strip />
+              </template>
+              <v-spacer />
+              <v-badge
+                overlap
+                offset-x="20"
+                offset-y="20"
+                :content="messageCount"
+                :color="messageBadgeColor"
+                :value="messageCount > 0"
+              >
+                <tool-button
+                  size="40"
+                  icon="mdi-bell-outline"
+                  name="Notifications"
+                  @click="messageDialog = true"
+                />
+              </v-badge>
+              <tool-button
+                size="40"
+                icon="mdi-cog"
+                name="Settings"
+                @click="settingsDialog = true"
+              />
+            </div>
+            <div class="d-flex flex-column flex-grow-1">
+              <layout-grid v-show="hasData" :layout="currentLayout" />
+              <v-row
+                v-show="!hasData"
+                no-gutters
+                align="center"
+                class="clickable grey darken-3"
+                @click="userPromptFiles"
+              >
+                <v-col>
+                  <v-row justify="center">
+                    <v-card
+                      flat
+                      dark
+                      color="transparent"
+                      class="text-center headline"
+                    >
+                      <div>
+                        <v-icon size="64">mdi-folder-open</v-icon>
+                      </div>
+                      <div>Click to open local files.</div>
+                      <div class="mt-8">
+                        <v-icon size="64">mdi-arrow-down-bold</v-icon>
+                      </div>
+                      <div>Drag &amp; drop your DICOM files.</div>
+                      <div class="vertical-offset-margin">
+                        <v-icon size="64">mdi-cloud-off-outline</v-icon>
+                      </div>
+                      <div>Secure: Your data never leaves your machine.</div>
+                    </v-card>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </div>
+          </div>
+        </v-main>
+
+        <v-dialog v-model="aboutBoxDialog" width="35%">
+          <about-box />
+        </v-dialog>
+
+        <v-dialog
+          v-model="messageDialog"
+          width="75%"
+          content-class="fill-height"
+        >
+          <message-center @close="messageDialog = false" />
+        </v-dialog>
+
+        <message-notifications @open-notifications="messageDialog = true" />
+
+        <v-dialog v-model="settingsDialog" width="50%">
+          <settings @close="settingsDialog = false" />
+        </v-dialog>
+
+        <v-dialog v-model="saveDialog" width="30%">
+          <save-session @close="saveDialog = false" />
+        </v-dialog>
+
+        <v-overlay
+          :value="dragHover"
+          color="#fff"
+          z-index="100"
+          class="text-center"
+        >
+          <v-icon color="black" size="4.75rem">mdi-download</v-icon>
+          <div class="text-h2 font-weight-bold black--text">
+            Drop your files to open
+          </div>
+        </v-overlay>
+      </v-app>
+    </template>
+  </drag-and-drop>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  Ref,
+  ref,
+  watch,
+} from '@vue/composition-api';
+import { storeToRefs } from 'pinia';
+import { UrlParams } from '@vueuse/core';
+import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
+
+import ResizableNavDrawer from './ResizableNavDrawer.vue';
+import ToolButton from './ToolButton.vue';
+import LayoutGrid from './LayoutGrid.vue';
+import ModulePanel from './ModulePanel.vue';
+import DragAndDrop from './DragAndDrop.vue';
+import AboutBox from './AboutBox.vue';
+import ToolStrip from './ToolStrip.vue';
+import MessageCenter from './MessageCenter.vue';
+import MessageNotifications from './MessageNotifications.vue';
+import Settings from './Settings.vue';
+import VolViewFullLogo from './icons/VolViewFullLogo.vue';
+import VolViewLogo from './icons/VolViewLogo.vue';
+import {
+  useDatasetStore,
+  convertSuccessResultToDataSelection,
+  LoadResult,
+  FileLoadSuccess,
+  DICOMLoadSuccess,
+  FileLoadFailure,
+  DICOMLoadFailure,
+  DataSelection,
+} from '../store/datasets';
+import { useImageStore } from '../store/datasets-images';
+import { useViewStore } from '../store/views';
+import { MessageType, useMessageStore } from '../store/messages';
+import { useRulerStore } from '../store/tools/rulers';
+import { Layouts } from '../config';
+import { isStateFile, loadState } from '../io/state-file';
+import SaveSession from './SaveSession.vue';
+import { useGlobalErrorHook } from '../composables/useGlobalErrorHook';
+import { useWebGLWatchdog } from '../composables/useWebGLWatchdog';
+import { useAppLoadingNotifications } from '../composables/useAppLoadingNotifications';
+import { wrapInArray } from '../utils';
+import { fetchFile } from '../utils/fetch';
+
+async function loadFiles(files: FileList, setError: (err: Error) => void) {
+  const dataStore = useDatasetStore();
+
+  const loadFirstDataset = !dataStore.primarySelection;
+
+  let statuses: LoadResult[] = [];
+  let stateFile = false;
+  try {
+    // For now only support restoring from a single state files.
+    stateFile = files.length === 1 && (await isStateFile(files[0]));
+    if (stateFile) {
+      statuses = await loadState(files[0]);
+    } else {
+      statuses = await dataStore.loadFiles(Array.from(files));
+    }
+  } catch (error) {
+    setError(error as Error);
+    return;
+  }
+
+  const loaded = statuses.filter((s) => s.loaded) as (
+    | FileLoadSuccess
+    | DICOMLoadSuccess
+  )[];
+  const errored = statuses.filter((s) => !s.loaded) as (
+    | FileLoadFailure
+    | DICOMLoadFailure
+  )[];
+
+  if (
+    loaded.length &&
+    !stateFile &&
+    (loadFirstDataset || loaded.length === 1)
+  ) {
+    const selection = convertSuccessResultToDataSelection(loaded[0]);
+    if (selection) {
+      dataStore.setPrimarySelection(selection);
+    }
+  }
+
+  if (errored.length) {
+    const failedFilenames = errored.map((result) => {
+      if (result.type === 'file') {
+        return result.filename;
+      }
+      return 'DICOM files';
+    });
+    const failedError = new Error(
+      `These files failed to load:\n${failedFilenames.join('\n')}`
+    );
+
+    setError(failedError);
+  }
+}
+
+async function loadRemoteFilesFromURLParams(
+  params: UrlParams,
+  setError: (err: Error) => void
+) {
+  const dataStore = useDatasetStore();
+
+  const urls = wrapInArray(params.urls);
+  const names = wrapInArray(params.names ?? []);
+
+  const fileResults = await Promise.allSettled(
+    urls.map(async (url, index) => {
+      const { pathname } = new URL(url);
+      const name = names[index] || pathname.split('/').at(-1) || '';
+
+      return fetchFile(url, name);
+    })
+  );
+
+  const results = await Promise.allSettled(
+    fileResults.map(async (fileResult) => {
+      if (fileResult.status === 'fulfilled') {
+        const loadResults = await dataStore.loadFiles([fileResult.value]);
+        const errored = loadResults.find((s) => !s.loaded);
+        if (errored) {
+          // force the promise to error out
+          throw new Error();
+        }
+        // only select the first dataset
+        return loadResults[0];
+      }
+      throw fileResult.reason;
+    })
+  );
+
+  const failedURLs: string[] = [];
+  let selectDataID: DataSelection | null = null;
+
+  results.forEach((res, index) => {
+    if (res.status === 'fulfilled' && res.value.loaded && !selectDataID) {
+      selectDataID = convertSuccessResultToDataSelection(res.value);
+    } else if (res.status === 'rejected') {
+      failedURLs.push(urls[index]);
+    }
+  });
+
+  if (selectDataID) {
+    dataStore.setPrimarySelection(selectDataID);
+  }
+
+  if (failedURLs.length) {
+    setError(new Error(`These URLs failed to load:\n${failedURLs.join('\n')}`));
+  }
+}
+
+export default defineComponent({
+  name: 'App',
+
+  components: {
+    ResizableNavDrawer,
+    ToolButton,
+    LayoutGrid,
+    DragAndDrop,
+    AboutBox,
+    ToolStrip,
+    ModulePanel,
+    MessageCenter,
+    MessageNotifications,
+    VolViewFullLogo,
+    VolViewLogo,
+    Settings,
+    SaveSession,
+  },
+
+  setup(props: {}, { root }) {
+    const imageStore = useImageStore();
+    const messageStore = useMessageStore();
+    const viewStore = useViewStore();
+
+    useGlobalErrorHook();
+    useWebGLWatchdog();
+
+    const { runAsLoading } = useAppLoadingNotifications();
+
+    // --- layout --- //
+
+    const layoutName: Ref<string> = ref('Quad View');
+    const { layout: currentLayout } = storeToRefs(viewStore);
+
+    watch(
+      layoutName,
+      () => {
+        const layout = Layouts[layoutName.value] || [];
+        viewStore.setLayout(layout);
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    watch(currentLayout, () => {
+      if (
+        currentLayout.value?.name &&
+        currentLayout.value.name !== layoutName.value
+      ) {
+        layoutName.value = currentLayout.value.name;
+      }
+    });
+
+    // --- file handling --- //
+
+    async function openFiles(files: FileList | null) {
+      if (!files) {
+        return;
+      }
+
+      runAsLoading((setError) => loadFiles(files, setError));
+    }
+
+    const fileEl = document.createElement('input');
+    fileEl.setAttribute('type', 'file');
+    fileEl.setAttribute('multiple', 'multiple');
+    fileEl.setAttribute('accept', '*');
+    fileEl.addEventListener('change', () => openFiles(fileEl.files));
+
+    function userPromptFiles() {
+      fileEl.value = '';
+      fileEl.click();
+    }
+
+    // --- parse URL -- //
+
+    const urlParams = vtkURLExtract.extractURLParameters() as UrlParams;
+
+    onMounted(() => {
+      if (!urlParams.urls) {
+        return;
+      }
+      runAsLoading((setError) =>
+        loadRemoteFilesFromURLParams(urlParams, setError)
+      );
+    });
+
+    // --- store initialization -- //
+
+    const rulerStore = useRulerStore();
+    rulerStore.initialize();
+
+    onBeforeUnmount(() => rulerStore.uninitialize());
+
+    // --- template vars --- //
+
+    const hasData = computed(() => imageStore.idList.length > 0);
+    const messageCount = computed(() => messageStore.importantMessages.length);
+    const messageBadgeColor = computed(() => {
+      if (
+        messageStore.importantMessages.find(
+          (msg) => msg.type === MessageType.Error
+        )
+      ) {
+        return 'error';
+      }
+      if (
+        messageStore.importantMessages.find(
+          (msg) => msg.type === MessageType.Warning
+        )
+      ) {
+        return 'warning';
+      }
+      return 'primary';
+    });
+
+    return {
+      aboutBoxDialog: ref(false),
+      messageDialog: ref(false),
+      settingsDialog: ref(false),
+      saveDialog: ref(false),
+      leftSideBar: ref(!root.$vuetify.breakpoint.mobile),
+      messageCount,
+      messageBadgeColor,
+      layoutName,
+      currentLayout,
+      Layouts,
+      userPromptFiles,
+      openFiles,
+      hasData,
+    };
+  },
+});
+</script>
+
+<style>
+#content-main {
+  /* disable v-content transition when we resize our app drawer */
+  transition: initial;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+}
+
+#content-main > .v-content__wrap {
+  display: flex;
+}
+
+#module-switcher .v-input__prepend-inner {
+  /* better icon alignment */
+  margin-top: 15px;
+}
+
+.alert > .v-snack__wrapper {
+  /* transition background color */
+  transition: background-color 0.25s;
+}
+</style>
+
+<style src="@/src/components/styles/utils.css"></style>
+
+<style scoped>
+#app-container {
+  width: 100%;
+  height: 100%;
+}
+
+#left-nav {
+  display: flex;
+  flex-flow: column;
+}
+
+#tools-strip {
+  border-left: 1px solid #212121;
+  flex: 0 0 40px;
+}
+
+.toolbar-button {
+  min-height: 100%; /* fill toolbar height */
+}
+
+.tool-separator {
+  width: 75%;
+  height: 1px;
+  border: none;
+  border-top: 1px solid rgb(112, 112, 112);
+}
+
+.vertical-offset-margin {
+  margin-top: 128px;
+}
+</style>

package/src/components/ColorFunctionSlider.vue

@@ -0,0 +1,181 @@
+<script>
+import { VRangeSlider } from 'vuetify/lib';
+
+const DEFAULT_TRACK_COLOR = 'rgba(128, 128, 128, 0.2)';
+const CLASS_COLOR_FUNCTION = 'volview__color-function';
+const CLASS_COLOR_FUNCTION_MIDDLE = `${CLASS_COLOR_FUNCTION}_middle`;
+
+export default VRangeSlider.extend({
+  name: 'color-function-slider',
+  props: {
+    rgbPoints: Array,
+    range: Array,
+  },
+  computed: {
+    startBackgroundColor() {
+      if (!this.rgbPoints) {
+        return DEFAULT_TRACK_COLOR;
+      }
+      const [r, g, b] = this.rgbPoints.slice(1, 4).map((c) => c * 255);
+      return `rgb(${r}, ${g}, ${b})`;
+    },
+    filledBackgroundColor() {
+      if (!this.rgbPoints) {
+        return DEFAULT_TRACK_COLOR;
+      }
+      const rangeMax = this.rgbPoints[this.rgbPoints.length - 4];
+      const rangeMin = this.rgbPoints[0];
+      const width = rangeMax - rangeMin;
+      const colorStops = [];
+      for (let i = 0; i < this.rgbPoints.length; i += 4) {
+        const [r, g, b] = [
+          this.rgbPoints[i + 1] * 255,
+          this.rgbPoints[i + 2] * 255,
+          this.rgbPoints[i + 3] * 255,
+        ];
+        const stop = ((this.rgbPoints[i] - rangeMin) / width) * 100; // in percent
+        colorStops.push(`rgba(${r}, ${g}, ${b}) ${stop.toFixed(2)}%`);
+      }
+      return `linear-gradient(to right, ${colorStops.join(', ')})`;
+    },
+    endBackgroundColor() {
+      if (!this.rgbPoints) {
+        return DEFAULT_TRACK_COLOR;
+      }
+      const end = this.rgbPoints.length;
+      const [r, g, b] = this.rgbPoints.slice(end - 3).map((c) => c * 255);
+      return `rgb(${r}, ${g}, ${b})`;
+    },
+  },
+  methods: {
+    // override
+    onSliderMouseDown(e) {
+      if (e.target.classList.contains(CLASS_COLOR_FUNCTION_MIDDLE)) {
+        this._middleDragStart = this.parseMouseMove(e);
+      } else {
+        this._middleDragStart = null;
+      }
+      VRangeSlider.options.methods.onSliderMouseDown.call(this, e);
+    },
+    // override
+    onSliderClick() {
+      // do nothing on click
+    },
+    // override
+    onMouseMove(e) {
+      const value = this.parseMouseMove(e);
+
+      if (e.type === 'mousemove') {
+        this.thumbPressed = true;
+      }
+
+      if (this._middleDragStart != null) {
+        const delta = value - this._middleDragStart;
+        this.applyRangeDelta(delta);
+      } else {
+        if (this.activeThumb === null) {
+          this.activeThumb = this.getIndexOfClosestValue(
+            this.internalValue,
+            value
+          );
+        }
+
+        this.setInternalValue(value);
+      }
+    },
+    // override
+    genTrackContainer() {
+      const children = [];
+
+      const padding = this.isDisabled ? 10 : 0;
+      const sections = [
+        {
+          class: `v-slider__track-background ${CLASS_COLOR_FUNCTION}`,
+          styles: [0, this.inputWidth[0], 0, -padding],
+          extraStyles: {
+            background: this.startBackgroundColor,
+          },
+        },
+        {
+          class: `v-slider__track-background ${CLASS_COLOR_FUNCTION} ${CLASS_COLOR_FUNCTION_MIDDLE}`,
+          styles: [
+            this.inputWidth[0],
+            Math.abs(this.inputWidth[1] - this.inputWidth[0]),
+            padding,
+            padding * -2,
+          ],
+          extraStyles: {
+            background: this.filledBackgroundColor,
+          },
+        },
+        {
+          class: `v-slider__track-background ${CLASS_COLOR_FUNCTION}`,
+          styles: [
+            this.inputWidth[1],
+            Math.abs(100 - this.inputWidth[1]),
+            padding,
+            -padding,
+          ],
+          extraStyles: {
+            background: this.endBackgroundColor,
+          },
+        },
+      ];
+
+      if (this.$vuetify.rtl) sections.reverse();
+
+      children.push(
+        ...sections.map((section) =>
+          this.$createElement('div', {
+            ...this.setBackgroundColor(section.color, {
+              staticClass: section.class,
+              style: {
+                ...this.getTrackStyle(...section.styles),
+                ...section.extraStyles,
+              },
+            }),
+            on: section.events,
+          })
+        )
+      );
+
+      return this.$createElement(
+        'div',
+        {
+          staticClass: 'v-slider__track-container',
+          ref: 'track',
+        },
+        children
+      );
+    },
+    applyRangeDelta(delta) {
+      // this.oldValue is from VRangeSlider::onSliderMouseDown
+      let [low, high] = this.oldValue;
+      // assumption: min <= low < high <= max
+      if (low + delta < this.min) {
+        high -= low - this.min;
+        low = this.min;
+      } else if (high + delta > this.max) {
+        low += this.max - high;
+        high = this.max;
+      } else {
+        low += delta;
+        high += delta;
+      }
+      this.internalValue = [low, high];
+    },
+  },
+});
+</script>
+
+<style scoped>
+.v-slider--horizontal .v-slider__track-container {
+  height: 80%;
+  display: flex;
+  align-items: center;
+}
+
+.volview__color-function_middle:hover {
+  cursor: grab;
+}
+</style>