feat(config): add disabledViewTypes to filter view options

Author: PaulHax

src/components/ViewTypeSwitcher.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { getAvailableViews } from '@/src/config';
 import { useViewStore } from '@/src/store/views';
 import { Maybe } from '@/src/types';
 import { computed, toRefs } from 'vue';
@@ -17,11 +16,14 @@ const viewName = computed(() => {
   return viewInfo?.name ?? '';
 });
 
-const availableViews = getAvailableViews().list;
-const availableViewNames = availableViews.map((v) => v.name);
+const availableViewNames = computed(() =>
+  viewStore.availableViewsForSwitcher.map((v) => v.name)
+);
 
 function updateView(newViewName: string) {
-  const selectedView = availableViews.find((v) => v.name === newViewName);
+  const selectedView = viewStore.availableViewsForSwitcher.find(
+    (v) => v.name === newViewName
+  );
   if (!selectedView) return;
   viewStore.replaceView(viewId.value, {
     ...selectedView,

src/io/import/configJson.ts

@@ -133,12 +133,15 @@ const windowing = z
   })
   .optional();
 
+const disabledViewTypes = z.array(z.enum(['2D', '3D', 'Oblique'])).optional();
+
 export const config = z.object({
   layout,
   labels,
   shortcuts,
   io,
   windowing,
+  disabledViewTypes,
 });
 
 export type Config = z.infer<typeof config>;
@@ -363,7 +366,14 @@ const applyWindowing = (manifest: Config) => {
   useWindowingStore().runtimeConfigWindowLevel = manifest.windowing;
 };
 
+const applyDisabledViewTypes = (manifest: Config) => {
+  if (!manifest.disabledViewTypes) return;
+
+  useViewStore().disabledViewTypes = manifest.disabledViewTypes;
+};
+
 export const applyPreStateConfig = (manifest: Config) => {
+  applyDisabledViewTypes(manifest);
   applyLayout(manifest);
   applyShortcuts(manifest);
   applyIo(manifest);

src/store/views.ts

@@ -1,11 +1,11 @@
 import { defineStore } from 'pinia';
-import { computed, markRaw, reactive, ref } from 'vue';
+import { computed, markRaw, reactive, ref, watch } from 'vue';
 import { createEventHook } from '@vueuse/core';
 import type { Maybe } from '@/src/types';
 import type { Layout, LayoutItem } from '@/src/types/layout';
 import { useIdStore } from '@/src/store/id';
-import type { ViewInfo, ViewInfoInit } from '@/src/types/views';
-import { DefaultLayout, DefaultLayoutSlots } from '@/src/config';
+import type { ViewInfo, ViewInfoInit, ViewType } from '@/src/types/views';
+import { DefaultLayout, DefaultLayoutSlots, getAvailableViews } from '@/src/config';
 import type { StateFile } from '../io/state-file/schema';
 
 const DEFAULT_VIEW_INIT: ViewInfoInit = {
@@ -70,6 +70,7 @@ export const useViewStore = defineStore('view', () => {
   const layoutSlots = ref<string[]>([]);
   const viewByID = reactive<Record<string, ViewInfo>>({});
   const activeView = ref<Maybe<string>>();
+  const disabledViewTypes = ref<ViewType[]>([]);
 
   const isActiveViewMaximized = ref(false);
   const maximizedView = computed(() => {
@@ -78,6 +79,13 @@ export const useViewStore = defineStore('view', () => {
     return undefined;
   });
 
+  const availableViewsForSwitcher = computed(() => {
+    const allViews = getAvailableViews();
+    return allViews.list.filter(
+      (view) => !disabledViewTypes.value.includes(view.type)
+    );
+  });
+
   const visibleViews = computed(() => {
     if (maximizedView.value) return [maximizedView.value];
     const views: ViewInfo[] = [];
@@ -211,6 +219,20 @@ export const useViewStore = defineStore('view', () => {
     });
   }
 
+  function applyDisabledViewTypesFilter() {
+    if (!disabledViewTypes.value.length) return;
+
+    layoutSlots.value.forEach((id) => {
+      const view = viewByID[id];
+      if (disabledViewTypes.value.includes(view.type)) {
+        const replacement = availableViewsForSwitcher.value[0];
+        if (replacement) {
+          replaceView(id, replacement);
+        }
+      }
+    });
+  }
+
   function serialize(stateFile: StateFile) {
     const { manifest } = stateFile;
     manifest.layout = layout.value;
@@ -247,6 +269,10 @@ export const useViewStore = defineStore('view', () => {
     layoutSlots.value.push(addView(viewInit));
   });
 
+  watch(disabledViewTypes, () => {
+    applyDisabledViewTypesFilter();
+  });
+
   return {
     visibleLayout: computed<Layout>(() => {
       if (maximizedView.value)
@@ -260,6 +286,8 @@ export const useViewStore = defineStore('view', () => {
     viewIDs,
     activeView,
     viewByID,
+    disabledViewTypes,
+    availableViewsForSwitcher,
     getView,
     getAllViews,
     getViewsForData,

tests/specs/layout-config.e2e.ts

@@ -213,4 +213,65 @@ describe('VolView Layout Configuration', () => {
     expect(await views2D.length).toBe(2);
     expect(view3D).not.toBeNull();
   });
+
+  it('should disable 3D and Oblique view types', async () => {
+    const config = {
+      disabledViewTypes: ['3D', 'Oblique'],
+    };
+
+    const configFileName = 'disabled-view-types-config.json';
+    await writeManifestToFile(config, configFileName);
+
+    const manifest = {
+      resources: [
+        { url: `/tmp/${configFileName}` },
+        {
+          url: 'https://data.kitware.com/api/v1/file/6566aa81c5a2b36857ad1783/download',
+          name: 'CT000085.dcm',
+        },
+      ],
+    };
+
+    const manifestFileName = 'disabled-view-types-manifest.json';
+    await writeManifestToFile(manifest, manifestFileName);
+
+    await volViewPage.open(`?urls=[tmp/${manifestFileName}]`);
+    await volViewPage.waitForViews();
+
+    await browser.waitUntil(
+      async () => {
+        const views2D = await volViewPage.getViews2D();
+        const view3D = await volViewPage.getView3D();
+        return (await views2D.length) === 4 && view3D === null;
+      },
+      {
+        timeout: DOWNLOAD_TIMEOUT,
+        timeoutMsg: 'Expected 4 2D views and no 3D view',
+        interval: 1000,
+      }
+    );
+
+    const views2D = await volViewPage.getViews2D();
+    const view3D = await volViewPage.getView3D();
+
+    expect(await views2D.length).toBe(4);
+    expect(view3D).toBeNull();
+
+    const viewTypeSwitchers = await $$('.view-type-select');
+    expect(viewTypeSwitchers.length).toBeGreaterThan(0);
+
+    const firstSwitcher = viewTypeSwitchers[0];
+    await firstSwitcher.click();
+
+    const optionTexts = await browser.execute(() => {
+      const items = Array.from(document.querySelectorAll('.v-list-item-title'));
+      return items.map((item) => item.textContent?.trim() ?? '');
+    });
+
+    expect(optionTexts).not.toContain('Volume');
+    expect(optionTexts).not.toContain('Oblique');
+    expect(optionTexts).toContain('Axial');
+    expect(optionTexts).toContain('Coronal');
+    expect(optionTexts).toContain('Sagittal');
+  });
 });