Merge pull request #107 from visdesignlab/70-multi-location

Added composite tabular data file creation

.build-files/BuildConfig.py

@@ -37,8 +37,6 @@ def __init__(self, message):
         # Now for your custom code...
 
 
-
-
 class BuildConfig:
     def __init__(self, configFile, envFile):
         try:

.build-files/docker-compose-local.template.yml

@@ -31,6 +31,8 @@ services:
       - "8000:8000"
     environment:
       DJANGO_ENV_FILE: "/app/.env"
+    volumes:
+      - ../apps/server/api/migrations:/app/api/migrations
     depends_on:
       db:
         condition: service_healthy

.build-files/docker-compose.template.yml

@@ -34,6 +34,8 @@ services:
       - "8000:8000"
     environment:
       DJANGO_ENV_FILE: "/app/.env"
+    volumes:
+      - ../apps/server/api/migrations:/app/api/migrations
     depends_on:
       db:
         condition: service_healthy

apps/client/src/App.scss

@@ -51,3 +51,10 @@
 // Utilities
 @import 'bootstrap/scss/utilities';
 @import 'bootstrap/scss/utilities/api';
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+:root,
+[data-bs-theme='light'] {
+    --bs-font-sans-serif: 'Inter', sans-serif;
+}

apps/client/src/App.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { watch, onBeforeMount, ref } from 'vue';
 import { useQuasar } from 'quasar';
-import GridstackLayout from './components/GridstackLayout.vue';
 import GlobalSettingsView from './components/globalSettings/GlobalSettingsView.vue';
-import { useProvenanceStore } from '@/stores/provenanceStore';
+import { useProvenanceStore } from '@/stores/misc/provenanceStore';
 import { onKeyStroke } from '@vueuse/core';
 import { router } from '@/router';
+import LBtn from './components/custom/LBtn.vue';
 
 const $q = useQuasar();
 const provenanceStore = useProvenanceStore();
@@ -60,8 +60,17 @@ onBeforeMount(() => {
         >
             <q-toolbar>
                 <q-toolbar-title>Loon</q-toolbar-title>
-                <q-btn @click="router.push('/')" flat dense>Home</q-btn>
-                <q-btn @click="router.push('/upload')" flat dense>Upload</q-btn>
+                <l-btn
+                    @click="router.push('/')"
+                    type="basic"
+                    label="Home"
+                    class="q-mr-sm"
+                />
+                <l-btn
+                    @click="router.push('/upload')"
+                    type="basic"
+                    label="Upload"
+                />
             </q-toolbar>
         </q-header>
         <GlobalSettingsView></GlobalSettingsView>

apps/client/src/components/AggregateLineChart.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
 import { useElementSize } from '@vueuse/core';
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import {
     useAggregateLineChartStore,
     type AggDataPoint,
     type AggLineData,
-} from '@/stores/aggregateLineChartStore';
+} from '@/stores/componentStores/aggregateLineChartStore';
 import { scaleLinear } from 'd3-scale';
 import { extent, max, min } from 'd3-array';
 import { area, line } from 'd3-shape';
 import { axisBottom, axisLeft } from 'd3-axis';
 import { select } from 'd3-selection';
 import { format } from 'd3-format';
-import { useDataPointSelectionUntrracked } from '@/stores/dataPointSelectionUntrracked';
-import { useDataPointSelection } from '@/stores/dataPointSelection';
-import { useImageViewerStore } from '@/stores/imageViewerStore';
+import { useDataPointSelectionUntrracked } from '@/stores/interactionStores/dataPointSelectionUntrrackedStore';
+import { useDataPointSelection } from '@/stores/interactionStores/dataPointSelectionTrrackedStore';
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
 import CellSnippetsLayer from './layers/CellSnippetsLayer';
 import type { Selection } from './layers/CellSnippetsLayer';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
-import { useDatasetSelectionStore } from '@/stores/datasetSelectionStore';
-import { useLooneageViewStore } from '@/stores/looneageViewStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useLooneageViewStore } from '@/stores/componentStores/looneageViewStore';
 import { Deck, OrthographicView } from '@deck.gl/core/typed';
 import {
     GeoJsonLayer,
@@ -42,9 +42,11 @@ import { storeToRefs } from 'pinia';
 import { LRUCache } from 'lru-cache';
 import { getBBoxAroundPoint } from '@/util/imageSnippets';
 import colors from '@/util/colors';
+import { useConfigStore } from '@/stores/misc/configStore';
 
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
+const configStore = useConfigStore();
 const aggregateLineChartStore = useAggregateLineChartStore();
 const dataPointSelectionUntrracked = useDataPointSelectionUntrracked();
 const dataPointSelection = useDataPointSelection();
@@ -262,7 +264,7 @@ watch(currentLocationMetadata, async () => {
 
     pixelSource.value = null;
 
-    const fullImageUrl = datasetSelectionStore.getFileUrl(
+    const fullImageUrl = configStore.getFileUrl(
         currentLocationMetadata.value.imageDataFilename
     );
     loader.value = await loadOmeTiff(fullImageUrl, { pool: new Pool() });

apps/client/src/components/AggregateLineChartSettingsSidebar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useAggregateLineChartStore } from '@/stores/aggregateLineChartStore';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useAggregateLineChartStore } from '@/stores/componentStores/aggregateLineChartStore';
 const cellMetaData = useCellMetaData();
 const aggregateLineChartStore = useAggregateLineChartStore();
 const globalSettings = useGlobalSettings();

apps/client/src/components/AggregateLineChartSettingsToolbar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useAggregateLineChartStore } from '@/stores/aggregateLineChartStore';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useAggregateLineChartStore } from '@/stores/componentStores/aggregateLineChartStore';
 const cellMetaData = useCellMetaData();
 const aggregateLineChartStore = useAggregateLineChartStore();
 const globalSettings = useGlobalSettings();

apps/client/src/components/BasicInfo.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useCellMetaData, type Lineage } from '@/stores/cellMetaData';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
+import {
+    useCellMetaData,
+    type Lineage,
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
 import { storeToRefs } from 'pinia';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
 

apps/client/src/components/CellTrackView.vue

@@ -7,14 +7,14 @@ import {
     type Lineage,
     type Track,
     type Cell,
-} from '@/stores/cellMetaData';
-import { useDataPointSelection } from '@/stores/dataPointSelection';
-import { useSegmentationStore } from '@/stores/segmentationStore';
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useDataPointSelection } from '@/stores/interactionStores/dataPointSelectionTrrackedStore';
+import { useSegmentationStore } from '@/stores/dataStores/segmentationStore';
 import CellSnippetsLayer from './layers/CellSnippetsLayer.js';
-import { useImageViewerStore } from '@/stores/imageViewerStore';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
-import { useDatasetSelectionStore } from '@/stores/datasetSelectionStore';
-import { useEventBusStore } from '@/stores/eventBusStore';
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
 import { clamp } from 'lodash-es';
 import Pool from '../util/Pool';
 import type { Feature } from 'geojson';
@@ -45,6 +45,7 @@ import {
 // @ts-ignore
 import { TripsLayer } from '@deck.gl/geo-layers';
 import { render } from 'vue';
+import { useConfigStore } from '@/stores/misc/configStore';
 
 const cellMetaData = useCellMetaData();
 
@@ -55,6 +56,7 @@ const datasetSelectionStore = useDatasetSelectionStore();
 const { currentLocationMetadata } = storeToRefs(datasetSelectionStore);
 const { contrastLimitSlider } = storeToRefs(imageViewerStoreUntrracked);
 const { selectedTrack } = storeToRefs(cellMetaData);
+const configStore = useConfigStore();
 const eventBusStore = useEventBusStore();
 const segmentationStore = useSegmentationStore();
 
@@ -76,7 +78,7 @@ watch(currentLocationMetadata, async () => {
 
     pixelSource.value = null;
 
-    const fullImageUrl = datasetSelectionStore.getFileUrl(
+    const fullImageUrl = configStore.getFileUrl(
         currentLocationMetadata.value.imageDataFilename
     );
     loader.value = await loadOmeTiff(fullImageUrl, { pool: new Pool() });

apps/client/src/components/GridstackLayout.vue

@@ -4,8 +4,8 @@ import { onMounted } from 'vue';
 import { GridStack } from 'gridstack';
 import screenfull from 'screenfull';
 import 'gridstack/dist/gridstack.min.css';
-import { useGridstackLayoutStore } from '@/stores/gridstackLayoutStore';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGridstackLayoutStore } from '@/stores/interactionStores/gridstackLayoutStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 const globalSettings = useGlobalSettings();
 const gridstackLayoutStore = useGridstackLayoutStore();
 // useful reference

apps/client/src/components/HorizonChartLegend.vue

@@ -4,7 +4,7 @@ import HorizonChart from '@/components/HorizonChart.vue';
 import { scaleLinear } from 'd3-scale';
 import { format } from 'd3-format';
 
-import { useLooneageViewStore } from '@/stores/looneageViewStore';
+import { useLooneageViewStore } from '@/stores/componentStores/looneageViewStore';
 
 const looneageViewStore = useLooneageViewStore();
 

apps/client/src/components/ImageViewer.vue

@@ -7,19 +7,20 @@ import {
     type Lineage,
     type Track,
     type Cell,
-} from '@/stores/cellMetaData';
-import { useDataPointSelection } from '@/stores/dataPointSelection';
-
-import { useImageViewerStore } from '@/stores/imageViewerStore';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
-import { useDatasetSelectionStore } from '@/stores/datasetSelectionStore';
-import { useDataPointSelectionUntrracked } from '@/stores/dataPointSelectionUntrracked';
-import { useSegmentationStore } from '@/stores/segmentationStore';
-import { useEventBusStore } from '@/stores/eventBusStore';
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useDataPointSelection } from '@/stores/interactionStores/dataPointSelectionTrrackedStore';
+
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useDataPointSelectionUntrracked } from '@/stores/interactionStores/dataPointSelectionUntrrackedStore';
+import { useSegmentationStore } from '@/stores/dataStores/segmentationStore';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
 import { clamp } from 'lodash-es';
 import Pool from '../util/Pool';
-import { useLooneageViewStore } from '@/stores/looneageViewStore';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useLooneageViewStore } from '@/stores/componentStores/looneageViewStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+
 
 import {
     loadOmeTiff,
@@ -40,9 +41,11 @@ import {
 import { TripsLayer } from '@deck.gl/geo-layers';
 import { format } from 'd3-format';
 import colors from '@/util/colors';
+import { useConfigStore } from '@/stores/misc/configStore';
 
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
+const configStore = useConfigStore();
 const { darkMode } = storeToRefs(globalSettings);
 const segmentationStore = useSegmentationStore();
 const dataPointSelection = useDataPointSelection();
@@ -159,7 +162,7 @@ watch(currentLocationMetadata, async () => {
     // imageViewerStore.frameIndex = 0;
     pixelSource.value = null;
 
-    const fullImageUrl = datasetSelectionStore.getFileUrl(
+    const fullImageUrl = configStore.getFileUrl(
         currentLocationMetadata.value.imageDataFilename
     );
     loader.value = await loadOmeTiff(fullImageUrl, { pool: new Pool() });
@@ -201,7 +204,7 @@ function createBaseImageLayer(): typeof ImageLayer {
 }
 
 function createSegmentationsLayer(): typeof GeoJsonLayer {
-    const folderUrl = datasetSelectionStore.getFileUrl(
+    const folderUrl = configStore.getFileUrl(
         datasetSelectionStore.currentLocationMetadata?.segmentationsFolder ??
             'UNKNOWN'
     );

apps/client/src/components/ImageViewerSettingsSidebar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useImageViewerStore } from '@/stores/imageViewerStore';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
-import { useEventBusStore } from '@/stores/eventBusStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
 
 import { storeToRefs } from 'pinia';
 import { watch } from 'vue';

apps/client/src/components/ImageViewerSettingsToolbar.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useImageViewerStore } from '@/stores/imageViewerStore';
-import { useCellMetaData } from '@/stores/cellMetaData';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
 import { storeToRefs } from 'pinia';
-import { useEventBusStore } from '@/stores/eventBusStore';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
 
 const imageViewerStoreUntrracked = useImageViewerStoreUntrracked();
 const cellMetaData = useCellMetaData();

apps/client/src/components/LooneageViewGL.vue

@@ -7,24 +7,24 @@ import {
     type Lineage,
     type Track,
     type Cell,
-} from '@/stores/cellMetaData';
-import { useDataPointSelection } from '@/stores/dataPointSelection';
-import { useDataPointSelectionUntrracked } from '@/stores/dataPointSelectionUntrracked';
-import { useSegmentationStore } from '@/stores/segmentationStore';
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useDataPointSelection } from '@/stores/interactionStores/dataPointSelectionTrrackedStore';
+import { useDataPointSelectionUntrracked } from '@/stores/interactionStores/dataPointSelectionUntrrackedStore';
+import { useSegmentationStore } from '@/stores/dataStores/segmentationStore';
 import CellSnippetsLayer from './layers/CellSnippetsLayer';
 import type { Selection } from './layers/CellSnippetsLayer';
-import { useImageViewerStore } from '@/stores/imageViewerStore';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
-import { useDatasetSelectionStore } from '@/stores/datasetSelectionStore';
-import { useDatasetSelectionTrrackedStore } from '@/stores/datasetSelectionTrrackedStore';
-import { useEventBusStore } from '@/stores/eventBusStore';
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useDatasetSelectionTrrackedStore } from '@/stores/dataStores/datasetSelectionTrrackedStore';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
 import {
     useLooneageViewStore,
     type SelectedSnippet,
     type InnerHorizonChartSettings,
-} from '@/stores/looneageViewStore';
+} from '@/stores/componentStores/looneageViewStore';
 import { isEqual } from 'lodash-es';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 
 import Pool from '../util/Pool';
 import type { Feature } from 'geojson';
@@ -72,10 +72,11 @@ import SnippetSegmentationLayer from './layers/SnippetSegmentationLayer/SnippetS
 import SnippetSegmentationOutlineLayer from './layers/SnippetSegmentationOutlineLayer/SnippetSegmentationOutlineLayer';
 
 import HorizonChartLayer from './layers/HorizonChartLayer/HorizonChartLayer';
+import { useConfigStore } from '@/stores/misc/configStore';
 
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
-
+const configStore = useConfigStore();
 const dataPointSelection = useDataPointSelection();
 const dataPointSelectionUntrracked = useDataPointSelectionUntrracked();
 const { hoveredCellIndex } = storeToRefs(dataPointSelectionUntrracked);
@@ -247,7 +248,7 @@ watch(currentLocationMetadata, async () => {
 
     pixelSource.value = null;
 
-    const fullImageUrl = datasetSelectionStore.getFileUrl(
+    const fullImageUrl = configStore.getFileUrl(
         currentLocationMetadata.value.imageDataFilename
     );
     loader.value = await loadOmeTiff(fullImageUrl, { pool: new Pool() });