From f578f5cd36f06d5debe019665b890fd90ce01532 Mon Sep 17 00:00:00 2001 From: Luke Schreiber <131496683+Luke-Schreiber@users.noreply.github.com> Date: Tue, 9 Dec 2025 11:58:19 -0700 Subject: [PATCH 1/3] Default layout changes if more than 20 locations --- .../interactionStores/gridstackLayoutStore.ts | 295 +++++++++--------- 1 file changed, 151 insertions(+), 144 deletions(-) diff --git a/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts b/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts index 9086c6bc..3d4359a9 100644 --- a/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts +++ b/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts @@ -3,6 +3,7 @@ import { ref, computed } from 'vue'; import { defineStore } from 'pinia'; import { v4 as uuidv4 } from 'uuid'; import { cloneDeep } from 'lodash-es'; +import { useDatasetSelectionStore } from '../dataStores/datasetSelectionUntrrackedStore'; export interface LayoutItem { // gridstack properties plus my own component: string; @@ -262,166 +263,172 @@ export const useGridstackLayoutStore = defineStore( // }, // ]; - const allEqualItems: LayoutItem[] = [ - { - component: 'ConditionSelector', - displayName: 'Condition Selector', - h: 20, - icon: 'apps', - id: 'ConditionSelector', - noPadding: true, - w: 6, - x: 0, - y: 0, - }, - { - component: 'ExemplarView', - displayName: 'Exemplar View', - h: 10, - hideOverflow: true, - icon: 'location_on', - id: 'ExemplarView', - noPadding: true, - sidebar: 'ExemplarViewSettingsSidebar', - toolbar: 'ExemplarViewSettingsToolbar', - w: 6, - x: 6, - y: 0, - }, - { - component: 'LooneageViewGL', - displayName: 'Looneage', - h: 10, - hideOverflow: true, - icon: 'account_tree', - id: 'LooneageViewGL', - noPadding: true, - sidebar: 'LooneageViewSettingsSidebar', - toolbar: 'LooneageViewSettingsToolbar', - w: 6, - x: 0, - y: 20, - }, - { - component: 'AggregateLineChart', - displayName: 'Line Chart', - h: 10, - icon: 'timeline', - id: 'AggregateLineChart', - noPadding: true, - sidebar: 'AggregateLineChartSettingsSidebar', - toolbar: 'AggregateLineChartSettingsToolbar', - w: 6, - x: 6, - y: 10, - }, - { - component: 'SimpleTable', - displayName: 'Lineages', - h: 10, - icon: 'table_chart', - id: 'SimpleTable-lineage', - noPadding: true, - props: { - attributeLevel: 'lineage', + const datasetSelectionStore = useDatasetSelectionStore(); + + const allEqualItems = computed(() => { + const items: LayoutItem[] = [ + { + component: 'ConditionSelector', + displayName: 'Condition Selector', + h: 20, + icon: 'apps', + id: 'ConditionSelector', + noPadding: true, + w: 6, + x: 0, + y: 10, + }, + { + component: 'ExemplarView', + displayName: 'Exemplar View', + h: 10, + hideOverflow: true, + icon: 'location_on', + id: 'ExemplarView', + noPadding: true, + sidebar: 'ExemplarViewSettingsSidebar', + toolbar: 'ExemplarViewSettingsToolbar', + w: 6, + x: 6, + y: 0, + }, + { + component: 'LooneageViewGL', + displayName: 'Looneage', + h: 10, + hideOverflow: true, + icon: 'account_tree', + id: 'LooneageViewGL', + noPadding: true, + sidebar: 'LooneageViewSettingsSidebar', + toolbar: 'LooneageViewSettingsToolbar', + w: 6, + x: 0, + y: 0, + }, + { + component: 'AggregateLineChart', + displayName: 'Line Chart', + h: 10, + icon: 'timeline', + id: 'AggregateLineChart', + noPadding: true, + sidebar: 'AggregateLineChartSettingsSidebar', + toolbar: 'AggregateLineChartSettingsToolbar', + w: 6, + x: 6, + y: 10, }, - w: 6, - x: 0, - y: 30, - }, - { - component: 'ImageViewer', - displayName: 'Images', - h: 10, - hideOverflow: true, - icon: 'image', - id: 'ImageViewer', - noPadding: true, - sidebar: 'ImageViewerSettingsSidebar', - toolbar: 'ImageViewerSettingsToolbar', - w: 6, - x: 6, - y: 20, - }, - { - component: 'SimpleTable', - displayName: 'Tracks', - h: 10, - icon: 'table_chart', - id: 'SimpleTable-track', - noPadding: true, - props: { - attributeLevel: 'track', + { + component: 'SimpleTable', + displayName: 'Lineages', + h: 10, + icon: 'table_chart', + id: 'SimpleTable-lineage', + noPadding: true, + props: { + attributeLevel: 'lineage', + }, + w: 6, + x: 0, + y: 30, }, - w: 6, - x: 0, - y: 40, - }, - { - component: 'SimpleTable', - displayName: 'Cells', - h: 10, - icon: 'table_chart', - id: 'SimpleTable-cell', - noPadding: true, - props: { - attributeLevel: 'cell', + { + component: 'ImageViewer', + displayName: 'Images', + h: 10, + hideOverflow: true, + icon: 'image', + id: 'ImageViewer', + noPadding: true, + sidebar: 'ImageViewerSettingsSidebar', + toolbar: 'ImageViewerSettingsToolbar', + w: 6, + x: 6, + y: 20, }, - w: 6, - x: 6, - y: 30, - }, - { - component: 'TrrackVisWrapper', - displayName: 'History', - h: 10, - icon: 'history', - id: 'TrrackVisWrapper', - noPadding: true, - w: 6, - x: 0, - y: 50, - }, - ]; + { + component: 'SimpleTable', + displayName: 'Tracks', + h: 10, + icon: 'table_chart', + id: 'SimpleTable-track', + noPadding: true, + props: { + attributeLevel: 'track', + }, + w: 6, + x: 0, + y: 40, + }, + { + component: 'SimpleTable', + displayName: 'Cells', + h: 10, + icon: 'table_chart', + id: 'SimpleTable-cell', + noPadding: true, + props: { + attributeLevel: 'cell', + }, + w: 6, + x: 6, + y: 30, + }, + { + component: 'TrrackVisWrapper', + displayName: 'History', + h: 10, + icon: 'history', + id: 'TrrackVisWrapper', + noPadding: true, + w: 6, + x: 0, + y: 50, + }, + ]; - const defaultId = 'system_layout_0'; + const locationCount = + datasetSelectionStore.currentExperimentMetadata + ?.locationMetadataList.length ?? 0; - // const smallImageLayout: Layout = { - // name: 'Small Image', - // editable: false, - // editing: false, - // id: defaultId, - // initialItems: cloneDeep(smallImageItems), - // currentItems: cloneDeep(smallImageItems), - // }; - // const largeImageLayout: Layout = { - // name: 'Large Image', - // editable: false, - // editing: false, - // id: 'system_layout_1', - // initialItems: cloneDeep(largeImageItems), - // currentItems: cloneDeep(largeImageItems), - // }; + if (locationCount > 20) { + const conditionSelector = items.find( + (item) => item.id === 'ConditionSelector' + ); + const looneageView = items.find( + (item) => item.id === 'LooneageViewGL' + ); - const allEqualLayout: Layout = { + if (conditionSelector && looneageView) { + conditionSelector.y = 0; + looneageView.y = 20; + } + } + + return items; + }); + + const defaultId = 'system_layout_0'; + + const allEqualLayout = computed(() => ({ name: 'Default', editable: false, editing: false, id: defaultId, - initialItems: cloneDeep(allEqualItems), - currentItems: cloneDeep(allEqualItems), - }; - console.log('Default layout object:', allEqualLayout); + initialItems: cloneDeep(allEqualItems.value), + currentItems: cloneDeep(allEqualItems.value), + })); + + // console.log('Default layout object:', allEqualLayout.value); const currentLayoutId = useStorage( 'currentLayoutId', defaultId ); - const systemLayoutOptions = ref([ - // smallImageLayout, - // largeImageLayout, - allEqualLayout, + const systemLayoutOptions = computed(() => [ + allEqualLayout.value, ]); const userLayoutOptions = useStorage('userLayoutOptions', []); const allLayouts = computed>(() => { From 2a5546e2ed9b46a7e9a15344edbf43a0d34c8b66 Mon Sep 17 00:00:00 2001 From: Luke Schreiber <131496683+Luke-Schreiber@users.noreply.github.com> Date: Mon, 15 Dec 2025 16:44:00 -0700 Subject: [PATCH 2/3] Update apps/client/src/stores/interactionStores/gridstackLayoutStore.ts Co-authored-by: Devin Lange --- apps/client/src/stores/interactionStores/gridstackLayoutStore.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts b/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts index 3d4359a9..cfe14bb0 100644 --- a/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts +++ b/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts @@ -483,7 +483,6 @@ export const useGridstackLayoutStore = defineStore( currentLayout.value.initialItems = cloneDeep( currentLayout.value.currentItems ); - console.log('Saved current layout:', currentLayout.value); } function deleteLayout(index: number): void { From 8a324ffb50dacf27c279be6414ab32fe28192cfe Mon Sep 17 00:00:00 2001 From: Luke Schreiber <131496683+Luke-Schreiber@users.noreply.github.com> Date: Mon, 15 Dec 2025 16:47:07 -0700 Subject: [PATCH 3/3] Remove unneeded files from PR --- apps/client/src/App.vue | 1 - .../client/src/components/BasicInfoCounts.vue | 137 ------------------ apps/client/src/main.ts | 2 - 3 files changed, 140 deletions(-) delete mode 100644 apps/client/src/components/BasicInfoCounts.vue diff --git a/apps/client/src/App.vue b/apps/client/src/App.vue index b3e6904c..703eb7d8 100644 --- a/apps/client/src/App.vue +++ b/apps/client/src/App.vue @@ -60,7 +60,6 @@ onBeforeMount(() => { > Loon - -import { computed } from 'vue'; -import { storeToRefs } from 'pinia'; -import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore'; -import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore'; - -const cellMetaData = useCellMetaData(); -const { selectedLineage, selectedTrack } = storeToRefs(cellMetaData); -const imageViewerStoreUntrracked = useImageViewerStoreUntrracked(); -const { sizeT } = storeToRefs(imageViewerStoreUntrracked); - -const cellsCount = computed(() => { - const total = cellMetaData.cellArray - ? cellMetaData.cellArray.length.toLocaleString() - : '—'; - - if (selectedLineage.value) { - let count = 0; - const iterator = cellMetaData.makeLineageCellIterator(selectedLineage.value.founder); - for (const _ of iterator) { - count++; - } - return `${count.toLocaleString()} / ${total}`; - } else if (selectedTrack.value) { - return `${selectedTrack.value.cells.length.toLocaleString()} / ${total}`; - } - - return total; -}); - -const tracksCount = computed(() => { - const total = cellMetaData.trackArray - ? cellMetaData.trackArray.length.toLocaleString() - : '—'; - - if (selectedLineage.value) { - let count = 0; - const iterator = cellMetaData.makeLineageTrackIterator(selectedLineage.value.founder); - for (const _ of iterator) { - count++; - } - return `${count.toLocaleString()} / ${total}`; - } else if (selectedTrack.value) { - return `1 / ${total}`; - } - - return total; -}); - -const lineagesCount = computed(() => { - const total = (cellMetaData.lineageArray - ? cellMetaData.lineageArray.filter((l) => l.founder.children.length > 0) - .length - : null) !== null - ? cellMetaData - .lineageArray!.filter((l) => l.founder.children.length > 0) - .length.toLocaleString() - : '—'; - - if (selectedLineage.value) { - return `1 / ${total}`; - } else if (selectedTrack.value) { - return `1 / ${total}`; - } - - return total; -}); - -const imagesCount = computed(() => { - const total = sizeT.value != null ? sizeT.value.toLocaleString() : '—'; - - if (selectedLineage.value) { - const frames = new Set(); - const iterator = cellMetaData.makeLineageCellIterator(selectedLineage.value.founder); - for (const cell of iterator) { - frames.add(cellMetaData.getFrame(cell)); - } - return `${frames.size.toLocaleString()} / ${total}`; - } else if (selectedTrack.value) { - const frames = new Set(); - for (const cell of selectedTrack.value.cells) { - frames.add(cellMetaData.getFrame(cell)); - } - return `${frames.size.toLocaleString()} / ${total}`; - } - - return total; -}); - -const hasSelection = computed(() => { - return !!selectedLineage.value || !!selectedTrack.value; -}); - - - - - diff --git a/apps/client/src/main.ts b/apps/client/src/main.ts index 2ff29d1d..b92c7e50 100644 --- a/apps/client/src/main.ts +++ b/apps/client/src/main.ts @@ -13,7 +13,6 @@ import LooneageViewGL from './components/LooneageViewGL.vue'; import LooneageViewSettingsSidebar from './components/LooneageViewSettingsSidebar.vue'; import LooneageViewSettingsToolbar from './components/LooneageViewSettingsToolbar.vue'; import BasicInfo from './components/BasicInfo.vue'; -import BasicInfoCounts from './components/BasicInfoCounts.vue'; import SimpleTable from './components/SimpleTable.vue'; import ImageViewer from './components/ImageViewer.vue'; import ImageViewerSettingsSidebar from './components/ImageViewerSettingsSidebar.vue'; @@ -93,7 +92,6 @@ createApp(App) .component('LooneageViewSettingsSidebar', LooneageViewSettingsSidebar) .component('LooneageViewSettingsToolbar', LooneageViewSettingsToolbar) .component('BasicInfo', BasicInfo) - .component('BasicInfoCounts', BasicInfoCounts) .component('SimpleTable', SimpleTable) .component('NoDataSplash', NoDataSplash) .component('StubView', StubView)