volview 4.0.0

package/src/components/LabelmapList.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-list dense v-if="labelmaps.length">
+    <v-list-item v-for="lm in labelmaps" :key="lm.id" two-line>
+      <v-list-item-content>
+        <v-list-item-title>Labelmap (ID = {{ lm.id }})</v-list-item-title>
+      </v-list-item-content>
+    </v-list-item>
+  </v-list>
+  <div v-else class="caption empty-state">No labelmaps yet</div>
+</template>
+
+<style scoped>
+.empty-state {
+  text-align: center;
+}
+</style>
+
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api';
+import { useLabelmapStore } from '../store/datasets-labelmaps';
+
+export default defineComponent({
+  name: 'LabelmapList',
+  setup() {
+    const labelmapStore = useLabelmapStore();
+
+    const labelmaps = computed(() =>
+      labelmapStore.idList.map((id) => ({ id }))
+    );
+
+    return {
+      labelmaps,
+    };
+  },
+});
+</script>

package/src/components/LayoutGrid.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="layout-container flex-equal" :class="flexFlow">
+    <div v-for="(item, i) in items" :key="i" class="d-flex flex-equal">
+      <layout-grid v-if="item.type === 'layout'" :layout="item" />
+      <div v-else class="layout-item">
+        <component
+          :is="item.component"
+          :key="item.id"
+          :id="item.id"
+          v-bind="item.props"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  toRefs,
+} from '@vue/composition-api';
+import { Component } from 'vue';
+import { storeToRefs } from 'pinia';
+import VtkTwoView from './VtkTwoView.vue';
+import VtkThreeView from './VtkThreeView.vue';
+import { Layout, LayoutDirection } from '../types/layout';
+import { useViewStore } from '../store/views';
+import { ViewType } from '../types/views';
+
+const TYPE_TO_COMPONENT: Record<ViewType, Component> = {
+  '2D': VtkTwoView,
+  '3D': VtkThreeView,
+};
+
+export default defineComponent({
+  name: 'LayoutGrid',
+  props: {
+    layout: {
+      type: Object as PropType<Layout>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { layout } = toRefs(props);
+    const viewStore = useViewStore();
+    const { viewSpecs } = storeToRefs(viewStore);
+
+    const flexFlow = computed(() => {
+      return layout.value.direction === LayoutDirection.H
+        ? 'flex-column'
+        : 'flex-row';
+    });
+
+    const items = computed(() => {
+      const viewIDToSpecs = viewSpecs.value;
+      return layout.value.items.map((item) => {
+        if (typeof item === 'string') {
+          const spec = viewIDToSpecs[item];
+          return {
+            type: 'view',
+            id: item,
+            component: TYPE_TO_COMPONENT[spec.viewType],
+            props: spec.props,
+          };
+        }
+        return {
+          type: 'layout',
+          ...item,
+        };
+      });
+    });
+
+    return {
+      items,
+      flexFlow,
+    };
+  },
+});
+</script>
+
+<style scoped src="@/src/components/styles/utils.css"></style>
+
+<style scoped>
+.layout-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.layout-item {
+  display: flex;
+  flex: 1;
+  border: 1px solid #222;
+}
+</style>

package/src/components/MeasurementsList.vue

@@ -0,0 +1,134 @@
+<template>
+  <v-list dense v-if="measurements.length">
+    <v-list-item v-for="mm in measurements" :key="mm.id" two-line>
+      <template v-if="mm.type === 'ruler'">
+        <v-menu offset-x :close-on-content-click="false">
+          <template v-slot:activator="{ on, attrs }">
+            <div
+              class="color-dot clickable mr-3"
+              :style="{ backgroundColor: mm.data.color }"
+              v-on="on"
+              v-bind="attrs"
+            />
+          </template>
+          <v-color-picker
+            :value="mm.data.color"
+            @input="updateColor(mm.type, mm.id, $event)"
+            hide-inputs
+          />
+        </v-menu>
+        <v-list-item-content>
+          <v-list-item-title>Ruler (ID = {{ mm.id }})</v-list-item-title>
+          <v-list-item-subtitle>
+            Length: {{ mm.data.length.toFixed(2) }}mm
+          </v-list-item-subtitle>
+        </v-list-item-content>
+        <v-list-item-action>
+          <v-row no-gutters>
+            <v-tooltip top>
+              Reveal slice
+              <template v-slot:activator="{ on }">
+                <v-btn
+                  class="mr-2"
+                  icon
+                  @click="jumpTo(mm.type, mm.id)"
+                  v-on="on"
+                >
+                  <v-icon>mdi-target</v-icon>
+                </v-btn>
+              </template>
+            </v-tooltip>
+            <v-tooltip top>
+              Delete
+              <template v-slot:activator="{ on }">
+                <v-btn icon @click="remove(mm.type, mm.id)" v-on="on">
+                  <v-icon>mdi-delete</v-icon>
+                </v-btn>
+              </template>
+            </v-tooltip>
+          </v-row>
+        </v-list-item-action>
+      </template>
+    </v-list-item>
+  </v-list>
+  <div v-else class="caption empty-state">No measurements yet</div>
+</template>
+
+<style src="@/src/components/styles/utils.css"></style>
+
+<style scoped>
+.empty-state {
+  text-align: center;
+}
+
+.color-dot {
+  width: 24px;
+  height: 24px;
+  background: yellow;
+  border-radius: 16px;
+}
+</style>
+
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api';
+import { useCurrentImage } from '../composables/useCurrentImage';
+import { useRulerStore } from '../store/tools/rulers';
+
+interface Measurement {
+  id: string;
+  type: 'ruler';
+  imageID: string | null;
+  data: any;
+}
+
+export default defineComponent({
+  name: 'MeasurementsList',
+  setup() {
+    const rulerStore = useRulerStore();
+    const { currentImageID } = useCurrentImage();
+
+    const measurements = computed(() => {
+      const imageID = currentImageID.value;
+      return rulerStore.rulerIDs
+        .map((id) => {
+          const ruler = rulerStore.rulers[id];
+          return {
+            id,
+            type: 'ruler',
+            imageID: ruler.imageID,
+            data: {
+              length: rulerStore.lengthByID[id],
+              color: ruler.color,
+            },
+          } as Measurement;
+        })
+        .filter((mm) => mm.imageID === imageID);
+    });
+
+    function remove(type: Measurement['type'], id: string) {
+      if (type === 'ruler') {
+        rulerStore.removeRuler(id);
+      }
+    }
+
+    function jumpTo(type: Measurement['type'], id: string) {
+      if (type === 'ruler') {
+        rulerStore.jumpToRuler(id);
+      }
+    }
+
+    function updateColor(type: Measurement['type'], id: string, color: string) {
+      if (type === 'ruler') {
+        rulerStore.updateRuler(id, { color });
+      }
+    }
+
+    return {
+      measurements,
+      remove,
+      jumpTo,
+      updateColor,
+    };
+  },
+});
+</script>

package/src/components/MessageCenter.vue

@@ -0,0 +1,189 @@
+<script lang="ts">
+import { computed, defineComponent, ref } from '@vue/composition-api';
+import { storeToRefs } from 'pinia';
+import { MessageType, useMessageStore } from '../store/messages';
+import MessageItem from './MessageItem.vue';
+
+function watchResize(
+  element: Element,
+  callback: (el: Element) => void,
+  timeout = 10
+) {
+  let timeoutID = -1;
+  let observer: ResizeObserver;
+
+  const refreshTimeout = (cb: Function) => {
+    clearTimeout(timeoutID);
+    timeoutID = setTimeout(cb, timeout);
+  };
+
+  const cleanup = () => {
+    observer.disconnect();
+  };
+
+  observer = new ResizeObserver(() => {
+    refreshTimeout(cleanup);
+    callback(element);
+  });
+
+  observer.observe(element);
+}
+
+export default defineComponent({
+  components: {
+    MessageItem,
+  },
+  setup() {
+    const messageStore = useMessageStore();
+    const { messages } = storeToRefs(messageStore);
+
+    const showErrors = ref(true);
+    const showWarnings = ref(true);
+    const showInfo = ref(true);
+
+    const filteredMessages = computed(() => {
+      const show = {
+        errors: showErrors.value,
+        warnings: showWarnings.value,
+        info: showInfo.value,
+      };
+      return messages.value.filter(
+        (msg) =>
+          (msg.type === MessageType.Error && show.errors) ||
+          (msg.type === MessageType.Warning && show.warnings) ||
+          (msg.type === MessageType.Info && show.info)
+      );
+    });
+
+    function deleteItem(messageID: string) {
+      messageStore.clearOne(messageID);
+    }
+
+    const messageListEl = ref<HTMLElement>();
+
+    let cachedLast = -Infinity;
+    function scrollIfLast(openPanels: number[]) {
+      const last = Math.max(...openPanels);
+      const listEl = messageListEl.value;
+      if (
+        last === messages.value.length - 1 &&
+        // detect if the last panel is already expanded
+        last !== cachedLast &&
+        listEl?.firstElementChild
+      ) {
+        watchResize(listEl.firstElementChild, () => {
+          const height = listEl.scrollHeight;
+          listEl.scroll(0, height);
+        });
+      }
+      cachedLast = last;
+    }
+
+    return {
+      deleteItem,
+      clearAll: messageStore.clearAll,
+      scrollIfLast,
+      messageListEl,
+      showErrors,
+      showWarnings,
+      showInfo,
+      filteredMessages,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card class="fill-height message-center">
+    <v-card-title>
+      <span>Notifications</span>
+      <v-spacer />
+      <v-btn icon @click="$emit('close')"><v-icon>mdi-close</v-icon></v-btn>
+    </v-card-title>
+    <v-card-text class="content-container pt-4">
+      <div class="action-bar ma-2">
+        <div class="filter-bar">
+          <v-checkbox
+            v-model="showErrors"
+            class="px-2"
+            hide-details
+            label="Error"
+          />
+          <v-checkbox
+            v-model="showWarnings"
+            class="px-2"
+            hide-details
+            label="Warning"
+          />
+          <v-checkbox
+            v-model="showInfo"
+            class="px-2"
+            hide-details
+            label="Info"
+          />
+        </div>
+        <v-btn color="secondary" @click="clearAll">
+          <v-icon class="mr-2">mdi-delete</v-icon>
+          <span>Clear All</span>
+        </v-btn>
+      </div>
+      <div class="message-list ma-2" ref="messageListEl">
+        <v-expansion-panels
+          accordion
+          multiple
+          hover
+          :value="filteredMessages.map((_, i) => i)"
+          @change="scrollIfLast"
+        >
+          <message-item
+            v-for="msg in filteredMessages"
+            :key="msg.id"
+            :message="msg"
+            @delete="deleteItem(msg.id)"
+          />
+        </v-expansion-panels>
+        <template v-if="filteredMessages.length === 0">
+          <div class="empty">No notifications to display</div>
+        </template>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.message-center {
+  display: flex;
+  flex-flow: column;
+}
+
+.content-container {
+  display: flex;
+  flex-flow: column;
+  overflow: hidden;
+}
+
+.message-list {
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+
+.action-bar {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.filter-bar {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+}
+
+.empty {
+  text-align: center;
+  font-size: 1.4rem;
+  margin-top: 36px;
+  padding: 16px;
+}
+</style>

package/src/components/MessageItem.vue

@@ -0,0 +1,83 @@
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  toRefs,
+} from '@vue/composition-api';
+import { Message, MessageType } from '../store/messages';
+
+const MessageTypeClass: Record<MessageType, string> = {
+  [MessageType.Error]: 'error',
+  [MessageType.Warning]: 'warn',
+  [MessageType.Info]: 'info',
+  [MessageType.Success]: '',
+};
+
+export default defineComponent({
+  props: {
+    message: {
+      type: Object as PropType<Message>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { message } = toRefs(props);
+
+    const headerClass = computed(() => {
+      const type = MessageTypeClass[message.value.type];
+      if (type?.length) {
+        return `${type}-message`;
+      }
+      return '';
+    });
+
+    return {
+      headerClass,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-expansion-panel>
+    <v-expansion-panel-header :class="headerClass">
+      <div class="header">
+        <span>{{ message.title }}</span>
+        <v-btn icon small class="mr-3" @click.stop="$emit('delete')">
+          <v-icon small>mdi-delete</v-icon>
+        </v-btn>
+      </div>
+    </v-expansion-panel-header>
+    <v-expansion-panel-content v-if="message.options.details">
+      <div class="mt-4">
+        <pre class="details">{{ message.options.details }}</pre>
+      </div>
+    </v-expansion-panel-content>
+  </v-expansion-panel>
+</template>
+
+<style scoped>
+.error-message {
+  background-color: #ef5350;
+}
+
+.warn-message {
+  background-color: #ffa726;
+}
+
+.info-message {
+  background-color: #26c6da;
+}
+
+.header {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.details {
+  white-space: break-spaces;
+}
+</style>

package/src/components/MessageNotificationContent.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <span>{{ message }}</span>
+    &nbsp;
+    <v-btn v-if="detailsButton" dark depressed small color="#00000022">
+      details
+    </v-btn>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  props: {
+    message: String,
+    detailsButton: Boolean,
+  },
+});
+</script>

package/src/components/MessageNotifications.vue

@@ -0,0 +1,84 @@
+<script lang="ts">
+import { defineComponent, del, watch } from '@vue/composition-api';
+import { useToast } from '@/src/composables/useToast';
+import { storeToRefs } from 'pinia';
+import { ToastID } from 'vue-toastification/dist/types/src/types';
+import { Message, MessageType, useMessageStore } from '../store/messages';
+import MessageNotificationContent from './MessageNotificationContent.vue';
+
+const TIMEOUT = 5000;
+
+export default defineComponent({
+  setup(props, { emit }) {
+    const messageStore = useMessageStore();
+    const { byID } = storeToRefs(messageStore);
+
+    const toasts = {} as Record<string, ToastID>;
+
+    const toast = useToast();
+    type ToastMethod =
+      | typeof toast.info
+      | typeof toast.success
+      | typeof toast.warning
+      | typeof toast.error;
+
+    const makeToastOptions = (msgID: string) => ({
+      timeout: byID.value[msgID].options.persist ? (false as const) : TIMEOUT,
+      closeOnClick: !byID.value[msgID].options.persist,
+      onClick: () => emit('open-notifications'),
+      onClose: () => {
+        del(toasts, msgID);
+      },
+    });
+
+    // remove toasts if the message is gone
+    watch(byID, (msgLookup) => {
+      Object.keys(toasts).forEach((msgID) => {
+        if (!(msgID in msgLookup)) {
+          toast.dismiss(toasts[msgID]);
+          del(toasts, msgID);
+        }
+      });
+    });
+
+    messageStore.$onAction(({ name, args, after }) => {
+      if (name === '_addMessage') {
+        const message = args[0] as Omit<Message, 'id'>;
+        after((msgID) => {
+          if (!msgID) {
+            return;
+          }
+
+          let toastMethod: ToastMethod = toast.info;
+          let showDetailsButton = false;
+
+          if (message.type === MessageType.Error) {
+            toastMethod = toast.error;
+            showDetailsButton = true;
+          } else if (message.type === MessageType.Warning) {
+            toastMethod = toast.warning;
+            showDetailsButton = true;
+          } else if (message.type === MessageType.Info) {
+            toastMethod = toast.info;
+          } else if (message.type === MessageType.Success) {
+            toastMethod = toast.success;
+          }
+
+          toasts[msgID] = toastMethod(
+            {
+              component: MessageNotificationContent,
+              props: {
+                message: message.title,
+                detailsButton: showDetailsButton,
+              },
+            },
+            makeToastOptions(msgID)
+          );
+        });
+      }
+    });
+
+    return () => null;
+  },
+});
+</script>