volview 4.0.0 → 4.0.1

package/src/components/LabelmapList.vue

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

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

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

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

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

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

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