From 0fcb479348718f56cff687db5f0d7dd0b7ef135c Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 14 May 2026 15:10:08 -0400
Subject: [PATCH 1/2] remove vuex dependency, use composables

---
 .../Attributes/AttributeValueColors.vue       |  12 +-
 client/package-lock.json                      |  12 +-
 client/package.json                           |   3 +-
 client/platform/web-girder/App.vue            |  13 +-
 client/platform/web-girder/main.ts            |  32 +++-
 .../reportHandledPromiseRejection.ts          |  33 ++++
 client/platform/web-girder/store/Brand.ts     |  58 -------
 client/platform/web-girder/store/Config.ts    |  38 -----
 client/platform/web-girder/store/Dataset.ts   |  48 ------
 client/platform/web-girder/store/Jobs.ts      |  95 ------------
 client/platform/web-girder/store/Location.ts  | 111 --------------
 client/platform/web-girder/store/User.ts      |  25 ---
 client/platform/web-girder/store/index.ts     |  44 +++---
 client/platform/web-girder/store/types.ts     |  26 +---
 client/platform/web-girder/store/useBrand.ts  |  68 +++++++++
 client/platform/web-girder/store/useConfig.ts |  69 +++++++++
 .../platform/web-girder/store/useDataset.ts   |  53 +++++++
 client/platform/web-girder/store/useJobs.ts   | 142 ++++++++++++++++++
 .../platform/web-girder/store/useLocation.ts  | 136 +++++++++++++++++
 client/platform/web-girder/store/useUser.ts   |  30 ++++
 .../web-girder/views/Admin/AdminBranding.vue  |   7 +-
 .../web-girder/views/Admin/AdminJobs.vue      |   6 +-
 .../platform/web-girder/views/DataBrowser.vue |  44 +++---
 .../platform/web-girder/views/DataShared.vue  |  17 ++-
 client/platform/web-girder/views/Home.vue     | 121 ++++++++-------
 client/platform/web-girder/views/Jobs.vue     |  13 +-
 client/platform/web-girder/views/JobsTab.vue  |   8 +-
 client/platform/web-girder/views/Login.vue    |   7 +-
 .../web-girder/views/NavigationBar.vue        |  31 ++--
 .../web-girder/views/RunTrainingMenu.vue      |   7 +-
 client/platform/web-girder/views/ShareTab.vue |  13 +-
 .../web-girder/views/TrainedModels.vue        |   6 +-
 .../platform/web-girder/views/ViewerAlert.vue |   8 +-
 .../web-girder/views/ViewerLoader.vue         |  37 +++--
 34 files changed, 772 insertions(+), 601 deletions(-)
 create mode 100644 client/platform/web-girder/reportHandledPromiseRejection.ts
 delete mode 100644 client/platform/web-girder/store/Brand.ts
 delete mode 100644 client/platform/web-girder/store/Config.ts
 delete mode 100644 client/platform/web-girder/store/Dataset.ts
 delete mode 100644 client/platform/web-girder/store/Jobs.ts
 delete mode 100644 client/platform/web-girder/store/Location.ts
 delete mode 100644 client/platform/web-girder/store/User.ts
 create mode 100644 client/platform/web-girder/store/useBrand.ts
 create mode 100644 client/platform/web-girder/store/useConfig.ts
 create mode 100644 client/platform/web-girder/store/useDataset.ts
 create mode 100644 client/platform/web-girder/store/useJobs.ts
 create mode 100644 client/platform/web-girder/store/useLocation.ts
 create mode 100644 client/platform/web-girder/store/useUser.ts

diff --git a/client/dive-common/components/Attributes/AttributeValueColors.vue b/client/dive-common/components/Attributes/AttributeValueColors.vue
index bfa6c3216..cf3e2e0bb 100644
--- a/client/dive-common/components/Attributes/AttributeValueColors.vue
+++ b/client/dive-common/components/Attributes/AttributeValueColors.vue
@@ -1,9 +1,9 @@
 <!-- eslint-disable max-len -->
 <script lang="ts">
 import {
-  defineComponent, ref, PropType, Ref,
+  defineComponent, ref, PropType, Ref, computed,
 } from 'vue';
-import { useStore } from 'platform/web-girder/store/types';
+import { useUser } from 'platform/web-girder/store/useUser';
 import { StringKeyObject } from 'vue-media-annotator/BaseAnnotation';
 import { useCameraStore, useTrackStyleManager } from 'vue-media-annotator/provides';
 import { Attribute } from 'vue-media-annotator/use/AttributeTypes';
@@ -20,8 +20,8 @@ export default defineComponent({
   setup(props, { emit }) {
     const typeStylingRef = useTrackStyleManager().typeStyling;
     const cameraStore = useCameraStore();
-    const store = useStore();
-    const user = (store.state.User.user?.login || '') as string;
+    const { user } = useUser();
+    const userLogin = computed(() => user.value?.login || '');
 
     const predeterminedValues = ref(props.attribute.values || []);
 
@@ -39,7 +39,7 @@ export default defineComponent({
             if (!props.attribute.user && track.attributes[props.attribute.name]) {
               valueMap[track.attributes[props.attribute.name] as string] = true;
             } else if (props.attribute.user && track.attributes.userAttributes) {
-              const userAttr = (track.attributes.userAttributes[user]) as StringKeyObject;
+              const userAttr = (track.attributes.userAttributes[userLogin.value]) as StringKeyObject;
               if (userAttr[props.attribute.name]) {
                 valueMap[userAttr[props.attribute.name] as string] = true;
               }
@@ -50,7 +50,7 @@ export default defineComponent({
                 if (!props.attribute.user && feature.attributes[props.attribute.name]) {
                   valueMap[feature.attributes[props.attribute.name] as string] = true;
                 } else if (props.attribute.user && feature.attributes.userAttributes) {
-                  const userAttr = (feature.attributes.userAttributes[user]) as StringKeyObject;
+                  const userAttr = (feature.attributes.userAttributes[userLogin.value]) as StringKeyObject;
                   if (userAttr[props.attribute.name]) {
                     valueMap[userAttr[props.attribute.name] as string] = true;
                   }
diff --git a/client/package-lock.json b/client/package-lock.json
index 1085d9e5e..d4e03e6c2 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -28,8 +28,7 @@
         "vue": "^2.7.16",
         "vue-gtag": "^1.9.1",
         "vue-router": "^3.0.3",
-        "vuetify": "^2.7.1",
-        "vuex": "^3.0.1"
+        "vuetify": "^2.7.1"
       },
       "bin": {
         "divecli": "bin/platform/desktop/backend/cli.js"
@@ -15115,15 +15114,6 @@
         "vue": "^2.6.4"
       }
     },
-    "node_modules/vuex": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "vue": "^2.0.0"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
diff --git a/client/package.json b/client/package.json
index 62e841e45..7844fb449 100644
--- a/client/package.json
+++ b/client/package.json
@@ -49,8 +49,7 @@
     "vue": "^2.7.16",
     "vue-gtag": "^1.9.1",
     "vue-router": "^3.0.3",
-    "vuetify": "^2.7.1",
-    "vuex": "^3.0.1"
+    "vuetify": "^2.7.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.26.0",
diff --git a/client/platform/web-girder/App.vue b/client/platform/web-girder/App.vue
index 40506514f..b1a19fb6a 100644
--- a/client/platform/web-girder/App.vue
+++ b/client/platform/web-girder/App.vue
@@ -8,7 +8,8 @@
 import { defineComponent } from 'vue';
 import { provideApi } from 'dive-common/apispec';
 import { useRoute } from 'vue-router/composables';
-import { useStore } from 'platform/web-girder/store/types';
+import { useDataset } from 'platform/web-girder/store/useDataset';
+import { useLocation } from 'platform/web-girder/store/useLocation';
 import type { GirderMetadata } from './constants';
 import {
   getPipelineList,
@@ -28,18 +29,22 @@ import {
   getTileURL,
 } from './api';
 import { openFromDisk } from './utils';
+import { reportHandledPromiseRejection } from './reportHandledPromiseRejection';
 
 export default defineComponent({
   name: 'App',
   components: {},
   setup() {
     const route = useRoute();
-    const store = useStore();
+    const { loadDataset } = useDataset();
+    const { setLocationFromRoute } = useLocation();
     async function loadMetadata(datasetId: string): Promise<GirderMetadata> {
-      return store.dispatch('Dataset/load', datasetId);
+      return loadDataset(datasetId);
     }
 
-    store.dispatch('Location/setLocationFromRoute', route);
+    setLocationFromRoute(route).catch((reason) => {
+      reportHandledPromiseRejection('App: setLocationFromRoute', reason);
+    });
 
     provideApi({
       getPipelineList: unwrap(getPipelineList),
diff --git a/client/platform/web-girder/main.ts b/client/platform/web-girder/main.ts
index 1720e1a9c..5b11fe52f 100644
--- a/client/platform/web-girder/main.ts
+++ b/client/platform/web-girder/main.ts
@@ -10,8 +10,16 @@ import vMousetrap from 'dive-common/vue-utilities/v-mousetrap';
 import getVuetify from './plugins/vuetify';
 import girderRest from './plugins/girder';
 import App from './App.vue';
+import './store';
 import router from './router';
-import store from './store';
+import { bindWebGirderRouter } from './store/useLocation';
+import { useBrand } from './store/useBrand';
+import { useConfig } from './store/useConfig';
+import { useUser } from './store/useUser';
+import type { UserState } from './store/types';
+import { reportHandledPromiseRejection } from './reportHandledPromiseRejection';
+
+bindWebGirderRouter(router);
 
 Vue.config.productionTip = false;
 Vue.use(vMousetrap);
@@ -35,18 +43,17 @@ if (
 }
 
 Promise.all([
-  store.dispatch('Brand/loadBrand'),
-  store.dispatch('Config/load'),
+  useBrand().loadBrand(),
+  useConfig().loadConfig(),
   girderRest.fetchUser(),
 ]).then(() => {
-  const vuetify = getVuetify(store.state.Brand.brandData?.vuetify);
+  useUser().setUser(girderRest.user as UserState['user']);
+  const vuetify = getVuetify(useBrand().getBrandData()?.vuetify);
   Vue.use(promptService(vuetify));
   new Vue({
     router,
-    store,
     vuetify,
     provide: {
-      store,
       girderRest,
       notificationBus: girderRest, // gwc.JobList expects this
       vuetify,
@@ -58,4 +65,17 @@ Promise.all([
 
   /** Start notification stream if everything else succeeds */
   registerNotifications(girderRest).connect();
+}).catch((reason) => {
+  reportHandledPromiseRejection('app bootstrap (brand, config, or user)', reason);
+  const el = document.getElementById('app');
+  if (el) {
+    el.innerHTML = `
+      <div style="padding: 1.5rem; font-family: system-ui, sans-serif; max-width: 40rem;">
+        <h1 style="font-size: 1.25rem; margin-top: 0;">Unable to start DIVE</h1>
+        <p>Brand settings, server configuration, or sign-in could not be loaded.
+        Please refresh the page or contact your administrator.</p>
+        <p style="color: #666; font-size: 0.875rem;">
+        Technical details are in the browser developer console.</p>
+      </div>`;
+  }
 });
diff --git a/client/platform/web-girder/reportHandledPromiseRejection.ts b/client/platform/web-girder/reportHandledPromiseRejection.ts
new file mode 100644
index 000000000..89bbd154b
--- /dev/null
+++ b/client/platform/web-girder/reportHandledPromiseRejection.ts
@@ -0,0 +1,33 @@
+/* eslint-disable import/prefer-default-export -- single-purpose helper */
+import * as Sentry from '@sentry/browser';
+
+function normalizeError(reason: unknown): Error {
+  if (reason instanceof Error) {
+    return reason;
+  }
+  if (typeof reason === 'string') {
+    return new Error(reason);
+  }
+  try {
+    return new Error(JSON.stringify(reason));
+  } catch {
+    return new Error('Unknown error');
+  }
+}
+
+/**
+ * For intentional fire-and-forget async: log to the console and send to Sentry
+ * when the SDK is initialized (production builds on viame.kitware.com, etc.).
+ */
+export function reportHandledPromiseRejection(context: string, reason: unknown): void {
+  const err = normalizeError(reason);
+  console.error(`[DIVE] ${context}`, err);
+  try {
+    const client = Sentry.getCurrentHub().getClient();
+    if (client) {
+      Sentry.captureException(err, { tags: { context } });
+    }
+  } catch {
+    /* Sentry not available */
+  }
+}
diff --git a/client/platform/web-girder/store/Brand.ts b/client/platform/web-girder/store/Brand.ts
deleted file mode 100644
index 33d0658c0..000000000
--- a/client/platform/web-girder/store/Brand.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { merge } from 'lodash';
-import { Module } from 'vuex';
-
-import { BrandData, getBrandData } from 'platform/web-girder/api';
-import defaultLogo from 'dive-common/assets/logo.png';
-
-import type { BrandState, RootState } from './types';
-
-function setFavicon(href: string) {
-  let faviconLink = document.querySelector("link[rel~='icon']");
-  if (!faviconLink) {
-    faviconLink = document.createElement('link');
-    faviconLink.setAttribute('rel', 'icon');
-    document.getElementsByTagName('head')[0].appendChild(faviconLink);
-  }
-  faviconLink.setAttribute('href', href);
-}
-
-function setTitle(title?: string) {
-  const titleEl = document.querySelector('title');
-  if (titleEl && title !== undefined) {
-    titleEl.innerText = title;
-  }
-}
-
-const brandModule: Module<BrandState, RootState> = {
-  namespaced: true,
-  state: {
-    brandData: {
-      vuetify: null,
-      favicon: undefined,
-      logo: defaultLogo,
-      name: 'DIVE',
-      loginMessage: `DIVE is automatically updated
-        at 2AM EST/EDT on Thursdays. Downtime is typically
-        less than 10 minutes.`,
-      alertMessage: '',
-      trainingMessage: `Training Jobs depending on the configuration and the size/number of datasets can
-       take a long time to complete.`,
-    },
-  },
-  mutations: {
-    setBrandData(state, data: BrandData) {
-      state.brandData = merge(state.brandData, data);
-      setTitle(state.brandData.name);
-      if (state.brandData.favicon) {
-        setFavicon(state.brandData.favicon);
-      }
-    },
-  },
-  actions: {
-    async loadBrand({ commit }) {
-      commit('setBrandData', (await getBrandData()).data);
-    },
-  },
-};
-
-export default brandModule;
diff --git a/client/platform/web-girder/store/Config.ts b/client/platform/web-girder/store/Config.ts
deleted file mode 100644
index 5ae8c3853..000000000
--- a/client/platform/web-girder/store/Config.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Module } from 'vuex';
-
-import { getConfig } from 'platform/web-girder/api/configuration.service';
-import { RootState } from './types';
-
-export interface ConfigState {
-  distributedWorkerEnabled: boolean;
-  pipelinesEnabled: boolean;
-  trainingEnabled: boolean;
-}
-
-const configModule: Module<ConfigState, RootState> = {
-  namespaced: true,
-  state: {
-    distributedWorkerEnabled: false,
-    pipelinesEnabled: false,
-    trainingEnabled: false,
-  },
-  mutations: {
-    setCapabilities(state, payload: Partial<ConfigState>) {
-      state.distributedWorkerEnabled = payload.distributedWorkerEnabled ?? false;
-      state.pipelinesEnabled = payload.pipelinesEnabled ?? false;
-      state.trainingEnabled = payload.trainingEnabled ?? false;
-    },
-  },
-  actions: {
-    async load({ commit }) {
-      const { data } = await getConfig();
-      commit('setCapabilities', {
-        distributedWorkerEnabled: !!data.distributedWorker,
-        pipelinesEnabled: !!data.pipelinesEnabled,
-        trainingEnabled: !!data.trainingEnabled,
-      });
-    },
-  },
-};
-
-export default configModule;
diff --git a/client/platform/web-girder/store/Dataset.ts b/client/platform/web-girder/store/Dataset.ts
deleted file mode 100644
index 21637d08e..000000000
--- a/client/platform/web-girder/store/Dataset.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { Module } from 'vuex';
-import type { GirderMetadata } from 'platform/web-girder/constants';
-import { getDataset, getDatasetMedia, getFolder } from 'platform/web-girder/api';
-import { MultiType } from 'dive-common/constants';
-import type { DatasetState, RootState } from './types';
-
-const datasetModule: Module<DatasetState, RootState> = {
-  namespaced: true,
-  state: {
-    meta: null,
-  },
-  mutations: {
-    set(state, { dataset }: { dataset: GirderMetadata }) {
-      state.meta = dataset;
-    },
-  },
-  actions: {
-    async load({ commit, dispatch }, datasetId: string): Promise<GirderMetadata> {
-      const [folder, metaStatic, media] = await Promise.all([
-        getFolder(datasetId),
-        getDataset(datasetId),
-        getDatasetMedia(datasetId),
-      ]);
-      const dsMeta = {
-        ...metaStatic.data,
-        ...media.data,
-        videoUrl: media.data.video?.url,
-      };
-      // TODO remove when multi is supported in web
-      if (dsMeta.type === MultiType) {
-        throw new Error('multi is not supported on web yet');
-      }
-      commit('set', { dataset: dsMeta });
-      const { parentId, parentCollection } = folder.data;
-      if (parentId && parentCollection) {
-        dispatch('Location/hydrate', {
-          _id: parentId,
-          _modelType: parentCollection,
-        }, { root: true });
-      } else {
-        throw new Error(`dataset ${datasetId} was not a valid girder folder`);
-      }
-      return dsMeta;
-    },
-  },
-};
-
-export default datasetModule;
diff --git a/client/platform/web-girder/store/Jobs.ts b/client/platform/web-girder/store/Jobs.ts
deleted file mode 100644
index 156e66de4..000000000
--- a/client/platform/web-girder/store/Jobs.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Store, Module } from 'vuex';
-import { GirderJob } from '@girder/components/src';
-import { all } from '@girder/components/src/components/Job/status';
-import Vue from 'vue';
-
-import eventBus from 'platform/web-girder/eventBus';
-import girderRest from 'platform/web-girder/plugins/girder';
-import { RootState, JobState } from './types';
-
-const JobStatus = all();
-const NonRunningStates = [
-  JobStatus.CANCELED.value,
-  JobStatus.ERROR.value,
-  JobStatus.SUCCESS.value,
-];
-
-const jobModule: Module<JobState, RootState> = {
-  namespaced: true,
-  state: {
-    jobIds: {},
-    datasetStatus: {},
-    completeJobsInfo: {},
-  },
-  getters: {
-    runningJobIds(state) {
-      return Object.values(state.jobIds).filter((v) => !NonRunningStates.includes(v)).length >= 1;
-    },
-    datasetRunningState: (state) => (datasetId: string) => {
-      if (datasetId in state.datasetStatus
-        && !NonRunningStates.includes(state.datasetStatus[datasetId].status)) {
-        return `/girder/#job/${state.datasetStatus[datasetId].jobId}`;
-      }
-      return false;
-    },
-    datasetCompleteJobs: (state) => (datasetId: string) => {
-      if (datasetId in state.completeJobsInfo) {
-        return (state.completeJobsInfo[datasetId]);
-      }
-      return false;
-    },
-  },
-  mutations: {
-    setJobState(state, { jobId, value }: { jobId: string; value: number }) {
-      Vue.set(state.jobIds, jobId, value);
-    },
-    setDatasetStatus(state, { datasetId, status, jobId }:
-      { datasetId: string; status: number; jobId: string }) {
-      Vue.set(state.datasetStatus, datasetId, { status, jobId });
-    },
-    setCompleteJobsInfo(state, {
-      datasetId, type, title, success,
-    }:
-      { datasetId: string; type: string; title: string; success: boolean }) {
-      Vue.set(state.completeJobsInfo, datasetId, { type, title, success });
-    },
-    removeCompleteJobsInfo(state, { datasetId }: { datasetId: string }) {
-      if (datasetId in state.completeJobsInfo) {
-        Vue.delete(state.completeJobsInfo, datasetId);
-      }
-    },
-  },
-  actions: {
-    removeCompleteJob({ commit }, { datasetId }: {datasetId: string}) {
-      commit('removeCompleteJobsInfo', { datasetId });
-    },
-  },
-};
-
-export async function init(store: Store<RootState>) {
-  const { data: runningJobs } = await girderRest.get<GirderJob[]>('/job', {
-    params: { statuses: `[${JobStatus.RUNNING.value}, ${JobStatus.QUEUED.value}, ${JobStatus.INACTIVE.value}]` },
-  });
-  function updateJob(job: GirderJob & {type?: string; title?: string}) {
-    store.commit('Jobs/setJobState', { jobId: job._id, value: job.status });
-    if (typeof job.dataset_id === 'string') {
-      store.commit('Jobs/setDatasetStatus', { datasetId: job.dataset_id, status: job.status, jobId: job._id });
-      if (['pipelines', 'convert'].includes(job.type || '') && NonRunningStates.includes(job.status)) {
-        store.commit('Jobs/setCompleteJobsInfo', {
-          datasetId: job.dataset_id,
-          type: job.type,
-          title: job.title,
-          success: job.status === JobStatus.SUCCESS.value,
-        });
-      }
-    }
-  }
-
-  runningJobs.forEach(updateJob);
-  girderRest.$on('message:job_status', ({ data: job }: { data: GirderJob }) => {
-    updateJob(job);
-    eventBus.$emit('refresh-data-browser');
-  });
-}
-
-export default jobModule;
diff --git a/client/platform/web-girder/store/Location.ts b/client/platform/web-girder/store/Location.ts
deleted file mode 100644
index c48736062..000000000
--- a/client/platform/web-girder/store/Location.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import type { Module } from 'vuex';
-import type { GirderModel } from '@girder/components/src';
-import { Route } from 'vue-router';
-import girderRest from 'platform/web-girder/plugins/girder';
-import { getLocationFromRoute, getRouteFromLocation } from 'platform/web-girder/utils';
-import { getFolder } from 'platform/web-girder/api';
-import {
-  isGirderModel,
-  LocationState, RootState, LocationType,
-} from './types';
-import router from '../router';
-
-const locationModule: Module<LocationState, RootState> = {
-  namespaced: true,
-  state: {
-    location: null,
-    selected: [] as GirderModel[],
-  },
-  mutations: {
-    setLocation(state, location: LocationType) {
-      state.location = location;
-    },
-    setSelected(state, selected: GirderModel[]) {
-      state.selected = selected;
-    },
-  },
-  getters: {
-    locationIsViameFolder(state) {
-      if (state.location && isGirderModel(state.location)) {
-        return !!state.location?.meta?.annotate;
-      }
-      return false;
-    },
-    defaultRoute() {
-      if (girderRest.user) {
-        return {
-          name: 'home',
-          params: {
-            routeId: girderRest.user._id,
-            routeType: 'user',
-          },
-        };
-      }
-      /* Public collections is the default route for unautnehticated users */
-      return {
-        name: 'home',
-        params: {
-          routeType: 'collections',
-        },
-      };
-    },
-    locationRoute(state, getters) {
-      if (state.location) {
-        return getRouteFromLocation(state.location);
-      }
-      return getters.defaultRoute;
-    },
-  },
-  actions: {
-    // Populate full girder model on location change if missing.
-    async hydrate({ commit }, location: LocationType) {
-      if (
-        isGirderModel(location)
-        && location._modelType === 'folder'
-        && !location.name
-      ) {
-        commit('setLocation', (await getFolder(location._id)).data);
-      } else {
-        commit('setLocation', location);
-      }
-    },
-    async setLocationFromRoute({ dispatch, state, getters }, route: Route) {
-      /**
-       * Update the location because the route changed.
-       * May need to fetch the full location details from server
-       */
-      const newLocation = getLocationFromRoute(route) || getLocationFromRoute(getters.defaultRoute);
-      if (newLocation === null) {
-        throw new Error('Unexpected null default route');
-      }
-      /** If the current and new location are the same, abort */
-      if (state.location) {
-        if ('type' in state.location && 'type' in newLocation) {
-          if (state.location.type === newLocation.type) return;
-        }
-        if ('_id' in state.location && '_id' in newLocation) {
-          if (state.location._id === newLocation._id) return;
-        }
-      }
-      dispatch('hydrate', newLocation);
-    },
-    setRouteFromLocation({ getters, dispatch }, location: LocationType) {
-      /**
-       * Update the current route because the location was changed,
-       * such as by navigating within the data browser
-       */
-      if (
-        isGirderModel(location)
-        && getters.locationIsViameFolder
-        && location.name === 'auxiliary'
-      ) {
-        /* Prevent navigation into auxiliary folder */
-        return;
-      }
-      router.push(getRouteFromLocation(location));
-      dispatch('hydrate', location);
-    },
-  },
-};
-
-export default locationModule;
diff --git a/client/platform/web-girder/store/User.ts b/client/platform/web-girder/store/User.ts
deleted file mode 100644
index 03722a211..000000000
--- a/client/platform/web-girder/store/User.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { merge } from 'lodash';
-import { Module } from 'vuex';
-
-import type { UserState, RootState } from './types';
-import girderRest from '../plugins/girder';
-
-const userModule: Module<UserState, RootState> = {
-  namespaced: true,
-  state: {
-    user: null,
-  },
-  mutations: {
-    setUserState(state, data: UserState) {
-      state.user = merge(state.user, data);
-    },
-  },
-  actions: {
-    async loadUser({ commit }) {
-      const data = await girderRest.fetchUser();
-      commit('setUserState', data);
-    },
-  },
-};
-
-export default userModule;
diff --git a/client/platform/web-girder/store/index.ts b/client/platform/web-girder/store/index.ts
index 4ad278e1a..a85ad5ee1 100644
--- a/client/platform/web-girder/store/index.ts
+++ b/client/platform/web-girder/store/index.ts
@@ -1,36 +1,26 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-
 import router from '../router';
-import { RootState } from './types';
-import Location from './Location';
-import Dataset from './Dataset';
-import Brand from './Brand';
-import User from './User';
-import Jobs, { init as JobsInit } from './Jobs';
-import Config from './Config';
-
-Vue.use(Vuex);
+import { reportHandledPromiseRejection } from '../reportHandledPromiseRejection';
+import { useLocation } from './useLocation';
+import { initJobs } from './useJobs';
 
-const store = new Vuex.Store<RootState>({
-  modules: {
-    Brand,
-    Location,
-    Dataset,
-    Jobs,
-    User,
-    Config,
-  },
-});
-
-/* Keep location state up to date with current route */
 router.beforeEach((to, from, next) => {
   if (to.name === 'home') {
-    store.dispatch('Location/setLocationFromRoute', to);
+    useLocation().setLocationFromRoute(to).catch((reason) => {
+      reportHandledPromiseRejection('router: setLocationFromRoute (home)', reason);
+    });
   }
   next();
 });
 
-JobsInit(store);
+initJobs().catch((reason) => {
+  reportHandledPromiseRejection('initJobs', reason);
+});
 
-export default store;
+export { useBrand } from './useBrand';
+export { useConfig } from './useConfig';
+export type { ConfigState } from './useConfig';
+export { useDataset } from './useDataset';
+export { useJobs, initJobs } from './useJobs';
+export { useLocation, bindWebGirderRouter } from './useLocation';
+export { useUser } from './useUser';
+export * from './types';
diff --git a/client/platform/web-girder/store/types.ts b/client/platform/web-girder/store/types.ts
index 00dcd64fa..7809f895b 100644
--- a/client/platform/web-girder/store/types.ts
+++ b/client/platform/web-girder/store/types.ts
@@ -1,8 +1,6 @@
 import type { GirderModel, GirderModelType } from '@girder/components/src';
-import { inject } from 'vue';
 import type { BrandData } from 'platform/web-girder/api';
 import type { GirderMetadata } from 'platform/web-girder/constants';
-import { Store } from 'vuex';
 
 /**
  * Location can be either
@@ -38,28 +36,8 @@ export interface UserState {
 }
 export interface JobState {
   jobIds: Record<string, number>;
-  datasetStatus: Record<string, {status: number; jobId: string}>;
-  completeJobsInfo: Record<string, {type: string; title: string; success: boolean}>;
-}
-
-export interface RootState {
-  Location: LocationState;
-  Dataset: DatasetState;
-  Brand: BrandState;
-  User: UserState;
-  Config: {
-    distributedWorkerEnabled: boolean;
-    pipelinesEnabled: boolean;
-    trainingEnabled: boolean;
-  };
-}
-
-export function useStore(): Store<RootState> {
-  const store: Store<RootState> | undefined = inject('store');
-  if (store === undefined) {
-    throw new Error('Store was undefined');
-  }
-  return store;
+  datasetStatus: Record<string, { status: number; jobId: string }>;
+  completeJobsInfo: Record<string, { type: string; title: string; success: boolean }>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/client/platform/web-girder/store/useBrand.ts b/client/platform/web-girder/store/useBrand.ts
new file mode 100644
index 000000000..8581ffda9
--- /dev/null
+++ b/client/platform/web-girder/store/useBrand.ts
@@ -0,0 +1,68 @@
+/* eslint-disable import/prefer-default-export -- singleton composable store */
+import { ref } from 'vue';
+import { merge } from 'lodash';
+
+import type { BrandData } from 'platform/web-girder/api';
+import { getBrandData as fetchBrandData } from 'platform/web-girder/api';
+import defaultLogo from 'dive-common/assets/logo.png';
+
+function setFavicon(href: string) {
+  let faviconLink = document.querySelector("link[rel~='icon']");
+  if (!faviconLink) {
+    faviconLink = document.createElement('link');
+    faviconLink.setAttribute('rel', 'icon');
+    document.getElementsByTagName('head')[0].appendChild(faviconLink);
+  }
+  faviconLink.setAttribute('href', href);
+}
+
+function setTitle(title?: string) {
+  const titleEl = document.querySelector('title');
+  if (titleEl && title !== undefined) {
+    titleEl.innerText = title;
+  }
+}
+
+const defaultBrandData: BrandData = {
+  vuetify: null,
+  favicon: undefined,
+  logo: defaultLogo,
+  name: 'DIVE',
+  loginMessage: `DIVE is automatically updated
+        at 2AM EST/EDT on Thursdays. Downtime is typically
+        less than 10 minutes.`,
+  alertMessage: '',
+  trainingMessage: `Training Jobs depending on the configuration and the size/number of datasets can
+       take a long time to complete.`,
+};
+
+const brandData = ref<BrandData>({ ...defaultBrandData });
+
+function applyBrandSideEffects(data: BrandData) {
+  setTitle(data.name);
+  if (data.favicon) {
+    setFavicon(data.favicon);
+  }
+}
+
+export function useBrand() {
+  function getBrandData(): BrandData {
+    return brandData.value;
+  }
+
+  function setBrandData(data: Partial<BrandData>) {
+    brandData.value = merge({}, brandData.value, data);
+    applyBrandSideEffects(brandData.value);
+  }
+
+  async function loadBrand(): Promise<void> {
+    setBrandData((await fetchBrandData()).data);
+  }
+
+  return {
+    brandData,
+    getBrandData,
+    setBrandData,
+    loadBrand,
+  };
+}
diff --git a/client/platform/web-girder/store/useConfig.ts b/client/platform/web-girder/store/useConfig.ts
new file mode 100644
index 000000000..8704aeded
--- /dev/null
+++ b/client/platform/web-girder/store/useConfig.ts
@@ -0,0 +1,69 @@
+/* eslint-disable import/prefer-default-export -- singleton composable store */
+import { ref } from 'vue';
+
+import { getConfig } from 'platform/web-girder/api/configuration.service';
+
+export interface ConfigState {
+  distributedWorkerEnabled: boolean;
+  pipelinesEnabled: boolean;
+  trainingEnabled: boolean;
+}
+
+const distributedWorkerEnabled = ref(false);
+const pipelinesEnabled = ref(false);
+const trainingEnabled = ref(false);
+
+export function useConfig() {
+  function getDistributedWorkerEnabled(): boolean {
+    return distributedWorkerEnabled.value;
+  }
+
+  function setDistributedWorkerEnabled(value: boolean): void {
+    distributedWorkerEnabled.value = value;
+  }
+
+  function getPipelinesEnabled(): boolean {
+    return pipelinesEnabled.value;
+  }
+
+  function setPipelinesEnabled(value: boolean): void {
+    pipelinesEnabled.value = value;
+  }
+
+  function getTrainingEnabled(): boolean {
+    return trainingEnabled.value;
+  }
+
+  function setTrainingEnabled(value: boolean): void {
+    trainingEnabled.value = value;
+  }
+
+  function setCapabilities(payload: Partial<ConfigState>): void {
+    distributedWorkerEnabled.value = payload.distributedWorkerEnabled ?? false;
+    pipelinesEnabled.value = payload.pipelinesEnabled ?? false;
+    trainingEnabled.value = payload.trainingEnabled ?? false;
+  }
+
+  async function loadConfig(): Promise<void> {
+    const { data } = await getConfig();
+    setCapabilities({
+      distributedWorkerEnabled: !!data.distributedWorker,
+      pipelinesEnabled: !!data.pipelinesEnabled,
+      trainingEnabled: !!data.trainingEnabled,
+    });
+  }
+
+  return {
+    distributedWorkerEnabled,
+    pipelinesEnabled,
+    trainingEnabled,
+    getDistributedWorkerEnabled,
+    setDistributedWorkerEnabled,
+    getPipelinesEnabled,
+    setPipelinesEnabled,
+    getTrainingEnabled,
+    setTrainingEnabled,
+    setCapabilities,
+    loadConfig,
+  };
+}
diff --git a/client/platform/web-girder/store/useDataset.ts b/client/platform/web-girder/store/useDataset.ts
new file mode 100644
index 000000000..df08300cc
--- /dev/null
+++ b/client/platform/web-girder/store/useDataset.ts
@@ -0,0 +1,53 @@
+/* eslint-disable import/prefer-default-export -- singleton composable store */
+import type { GirderMetadata } from 'platform/web-girder/constants';
+import { ref } from 'vue';
+import { getDataset, getDatasetMedia, getFolder } from 'platform/web-girder/api';
+import { MultiType } from 'dive-common/constants';
+
+import { useLocation } from './useLocation';
+
+const meta = ref<GirderMetadata | null>(null);
+
+export function useDataset() {
+  function getMeta(): GirderMetadata | null {
+    return meta.value;
+  }
+
+  function setMeta(dataset: GirderMetadata | null): void {
+    meta.value = dataset;
+  }
+
+  async function loadDataset(datasetId: string): Promise<GirderMetadata> {
+    const [folder, metaStatic, media] = await Promise.all([
+      getFolder(datasetId),
+      getDataset(datasetId),
+      getDatasetMedia(datasetId),
+    ]);
+    const dsMeta: GirderMetadata = {
+      ...metaStatic.data,
+      ...media.data,
+      videoUrl: media.data.video?.url,
+    };
+    if (dsMeta.type === MultiType) {
+      throw new Error('multi is not supported on web yet');
+    }
+    setMeta(dsMeta);
+    const { parentId, parentCollection } = folder.data;
+    if (parentId && parentCollection) {
+      await useLocation().hydrate({
+        _id: parentId,
+        _modelType: parentCollection,
+      });
+    } else {
+      throw new Error(`dataset ${datasetId} was not a valid girder folder`);
+    }
+    return dsMeta;
+  }
+
+  return {
+    meta,
+    getMeta,
+    setMeta,
+    loadDataset,
+  };
+}
diff --git a/client/platform/web-girder/store/useJobs.ts b/client/platform/web-girder/store/useJobs.ts
new file mode 100644
index 000000000..9f8d07c77
--- /dev/null
+++ b/client/platform/web-girder/store/useJobs.ts
@@ -0,0 +1,142 @@
+/* eslint-disable import/prefer-default-export -- singleton composable store */
+import Vue, { computed, ref } from 'vue';
+import { GirderJob } from '@girder/components/src';
+import { all } from '@girder/components/src/components/Job/status';
+
+import eventBus from 'platform/web-girder/eventBus';
+import girderRest from 'platform/web-girder/plugins/girder';
+
+const JobStatus = all();
+const NonRunningStates = [
+  JobStatus.CANCELED.value,
+  JobStatus.ERROR.value,
+  JobStatus.SUCCESS.value,
+];
+
+const jobIds = ref<Record<string, number>>({});
+const datasetStatus = ref<Record<string, { status: number; jobId: string }>>({});
+const completeJobsInfo = ref<Record<string, { type: string; title: string; success: boolean }>>({});
+
+const runningJobIds = computed(
+  () => Object.values(jobIds.value).filter((v) => !NonRunningStates.includes(v)).length >= 1,
+);
+
+export function useJobs() {
+  function getJobIds(): Record<string, number> {
+    return jobIds.value;
+  }
+
+  function setJobState(payload: { jobId: string; value: number }): void {
+    Vue.set(jobIds.value, payload.jobId, payload.value);
+  }
+
+  function getDatasetStatus(): Record<string, { status: number; jobId: string }> {
+    return datasetStatus.value;
+  }
+
+  function setDatasetStatus(payload: { datasetId: string; status: number; jobId: string }): void {
+    Vue.set(datasetStatus.value, payload.datasetId, {
+      status: payload.status,
+      jobId: payload.jobId,
+    });
+  }
+
+  function getCompleteJobsInfo(): Record<string, { type: string; title: string; success: boolean }> {
+    return completeJobsInfo.value;
+  }
+
+  function setCompleteJobsInfo(payload: {
+    datasetId: string;
+    type: string;
+    title: string;
+    success: boolean;
+  }): void {
+    Vue.set(completeJobsInfo.value, payload.datasetId, {
+      type: payload.type,
+      title: payload.title,
+      success: payload.success,
+    });
+  }
+
+  function removeCompleteJobsInfo(payload: { datasetId: string }): void {
+    if (payload.datasetId in completeJobsInfo.value) {
+      Vue.delete(completeJobsInfo.value, payload.datasetId);
+    }
+  }
+
+  function getRunningJobIds(): boolean {
+    return runningJobIds.value;
+  }
+
+  function getDatasetRunningState(datasetId: string): string | false {
+    if (
+      datasetId in datasetStatus.value
+      && !NonRunningStates.includes(datasetStatus.value[datasetId].status)
+    ) {
+      return `/girder/#job/${datasetStatus.value[datasetId].jobId}`;
+    }
+    return false;
+  }
+
+  function getDatasetCompleteJobs(datasetId: string):
+  | false
+  | { type: string; title: string; success: boolean } {
+    if (datasetId in completeJobsInfo.value) {
+      return completeJobsInfo.value[datasetId];
+    }
+    return false;
+  }
+
+  function removeCompleteJob(payload: { datasetId: string }): void {
+    removeCompleteJobsInfo(payload);
+  }
+
+  return {
+    jobIds,
+    datasetStatus,
+    completeJobsInfo,
+    runningJobIds,
+    getJobIds,
+    setJobState,
+    getDatasetStatus,
+    setDatasetStatus,
+    getCompleteJobsInfo,
+    setCompleteJobsInfo,
+    removeCompleteJobsInfo,
+    getRunningJobIds,
+    getDatasetRunningState,
+    getDatasetCompleteJobs,
+    removeCompleteJob,
+  };
+}
+
+function updateJobFromMessage(job: GirderJob & { type?: string; title?: string }) {
+  const jobs = useJobs();
+  jobs.setJobState({ jobId: job._id, value: job.status });
+  if (typeof job.dataset_id === 'string') {
+    jobs.setDatasetStatus({
+      datasetId: job.dataset_id,
+      status: job.status,
+      jobId: job._id,
+    });
+    if (['pipelines', 'convert'].includes(job.type || '') && NonRunningStates.includes(job.status)) {
+      jobs.setCompleteJobsInfo({
+        datasetId: job.dataset_id,
+        type: job.type || '',
+        title: job.title || '',
+        success: job.status === JobStatus.SUCCESS.value,
+      });
+    }
+  }
+}
+
+export async function initJobs(): Promise<void> {
+  const { data: runningJobs } = await girderRest.get<GirderJob[]>('/job', {
+    params: { statuses: `[${JobStatus.RUNNING.value}, ${JobStatus.QUEUED.value}, ${JobStatus.INACTIVE.value}]` },
+  });
+  runningJobs.forEach(updateJobFromMessage);
+  girderRest.$on('message:job_status', ({ data: job }: { data: GirderJob }) => {
+    updateJobFromMessage(job);
+    eventBus.$emit('refresh-data-browser');
+  });
+}
diff --git a/client/platform/web-girder/store/useLocation.ts b/client/platform/web-girder/store/useLocation.ts
new file mode 100644
index 000000000..89f74cc2b
--- /dev/null
+++ b/client/platform/web-girder/store/useLocation.ts
@@ -0,0 +1,136 @@
+/* eslint-disable import/prefer-default-export -- singleton composable store */
+import type { GirderModel } from '@girder/components/src';
+import { computed, ref } from 'vue';
+import type { Route } from 'vue-router';
+import type VueRouter from 'vue-router';
+
+import girderRest from 'platform/web-girder/plugins/girder';
+import { getLocationFromRoute, getRouteFromLocation } from 'platform/web-girder/utils';
+import { getFolder } from 'platform/web-girder/api';
+
+import { isGirderModel } from './types';
+import type { LocationType } from './types';
+
+let boundRouter: VueRouter | null = null;
+
+/** Call once from main.ts with the app router (avoids circular imports: router → views → useLocation). */
+export function bindWebGirderRouter(router: VueRouter): void {
+  boundRouter = router;
+}
+
+function getRouter(): VueRouter {
+  if (!boundRouter) {
+    throw new Error('bindWebGirderRouter must be called before using location navigation');
+  }
+  return boundRouter;
+}
+
+const location = ref<LocationType | null>(null);
+const selected = ref<GirderModel[]>([]);
+
+const defaultRoute = computed(() => {
+  if (girderRest.user) {
+    return {
+      name: 'home',
+      params: {
+        routeId: girderRest.user._id,
+        routeType: 'user',
+      },
+    };
+  }
+  return {
+    name: 'home',
+    params: {
+      routeType: 'collections',
+    },
+  };
+});
+
+const locationIsViameFolder = computed(() => {
+  const loc = location.value;
+  if (loc && isGirderModel(loc)) {
+    return !!loc?.meta?.annotate;
+  }
+  return false;
+});
+
+const locationRoute = computed(() => {
+  if (location.value) {
+    return getRouteFromLocation(location.value);
+  }
+  return defaultRoute.value;
+});
+
+export function useLocation() {
+  function getLocation(): LocationType | null {
+    return location.value;
+  }
+
+  function setLocation(value: LocationType | null): void {
+    location.value = value;
+  }
+
+  function getSelected(): GirderModel[] {
+    return selected.value;
+  }
+
+  function setSelected(value: GirderModel[]): void {
+    selected.value = value;
+  }
+
+  async function hydrate(loc: LocationType): Promise<void> {
+    if (
+      isGirderModel(loc)
+      && loc._modelType === 'folder'
+      && !loc.name
+    ) {
+      setLocation((await getFolder(loc._id)).data);
+    } else {
+      setLocation(loc);
+    }
+  }
+
+  async function setLocationFromRoute(route: Route): Promise<void> {
+    const newLocation = getLocationFromRoute(route) || getLocationFromRoute(defaultRoute.value as Route);
+    if (newLocation === null) {
+      throw new Error('Unexpected null default route');
+    }
+    const current = location.value;
+    if (current) {
+      if ('type' in current && 'type' in newLocation) {
+        if (current.type === newLocation.type) return;
+      }
+      if ('_id' in current && '_id' in newLocation) {
+        if (current._id === newLocation._id) return;
+      }
+    }
+    await hydrate(newLocation);
+  }
+
+  async function setRouteFromLocation(loc: LocationType): Promise<void> {
+    if (
+      isGirderModel(loc)
+      && locationIsViameFolder.value
+      && loc.name === 'auxiliary'
+    ) {
+      return;
+    }
+    getRouter().push(getRouteFromLocation(loc));
+    await hydrate(loc);
+  }
+
+  return {
+    location,
+    selected,
+    defaultRoute,
+    locationIsViameFolder,
+    locationRoute,
+    getLocation,
+    setLocation,
+    getSelected,
+    setSelected,
+    hydrate,
+    setLocationFromRoute,
+    setRouteFromLocation,
+  };
+}
diff --git a/client/platform/web-girder/store/useUser.ts b/client/platform/web-girder/store/useUser.ts
new file mode 100644
index 000000000..e706b9a71
--- /dev/null
+++ b/client/platform/web-girder/store/useUser.ts
@@ -0,0 +1,30 @@
+/* eslint-disable import/prefer-default-export -- singleton composable store */
+import { merge } from 'lodash';
+import { ref } from 'vue';
+
+import girderRest from '../plugins/girder';
+import type { UserState } from './types';
+
+const user = ref<UserState['user']>(null);
+
+export function useUser() {
+  function getUser(): UserState['user'] {
+    return user.value;
+  }
+
+  function setUser(next: UserState['user']): void {
+    user.value = next;
+  }
+
+  async function loadUser(): Promise<void> {
+    const data = await girderRest.fetchUser();
+    user.value = merge({}, user.value, data as object);
+  }
+
+  return {
+    user,
+    getUser,
+    setUser,
+    loadUser,
+  };
+}
diff --git a/client/platform/web-girder/views/Admin/AdminBranding.vue b/client/platform/web-girder/views/Admin/AdminBranding.vue
index c6483ca0b..d0b2ef2f3 100644
--- a/client/platform/web-girder/views/Admin/AdminBranding.vue
+++ b/client/platform/web-girder/views/Admin/AdminBranding.vue
@@ -1,16 +1,15 @@
 <script lang="ts">
 import {
-  defineComponent, ref, Ref, toRef,
+  defineComponent, ref, Ref,
 } from 'vue';
 import { putBrandData, getBrandData, BrandData } from 'platform/web-girder/api/configuration.service';
-import { useStore } from 'platform/web-girder/store/types';
+import { useBrand } from 'platform/web-girder/store/useBrand';
 
 export default defineComponent({
   name: 'AdminBranding',
   setup() {
     const brandData: Ref<BrandData> = ref({});
-    const store = useStore();
-    const rootBrandData = toRef(store.state.Brand, 'brandData');
+    const { brandData: rootBrandData } = useBrand();
     const getData = async () => {
       const resp = await getBrandData();
       brandData.value = { ...rootBrandData.value, ...resp.data };
diff --git a/client/platform/web-girder/views/Admin/AdminJobs.vue b/client/platform/web-girder/views/Admin/AdminJobs.vue
index ce68eaa7e..8f67320f5 100644
--- a/client/platform/web-girder/views/Admin/AdminJobs.vue
+++ b/client/platform/web-girder/views/Admin/AdminJobs.vue
@@ -12,7 +12,7 @@ import { all, getByValue, Status } from '@girder/components/src/components/Job/s
 import moment from 'moment';
 import { isObject } from 'lodash';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
-import { useStore } from 'platform/web-girder/store/types';
+import { useJobs } from 'platform/web-girder/store/useJobs';
 
 const JobStatus = all();
 const JobStatusMap = {
@@ -32,7 +32,7 @@ export default defineComponent({
   setup() {
     const limit = ref(50);
     const offset = ref(0);
-    const store = useStore();
+    const jobs = useJobs();
     const { prompt } = usePrompt();
     const table: Ref<(GirderJob & {type: string})[]> = ref([]);
     const jobTypes: Ref<string[]> = ref(['convert', 'celery', 'large_image_tiff', 'pipelines', 'private', 'training', 'DIVE Batch Postprocess']);
@@ -104,7 +104,7 @@ export default defineComponent({
       await getData();
     });
 
-    watch(() => store.getters['Jobs/runningJobIds'], async (prev: boolean, current: boolean) => {
+    watch(() => jobs.runningJobIds.value, async (prev: boolean, current: boolean) => {
       if (prev !== current) {
         await getData();
       }
diff --git a/client/platform/web-girder/views/DataBrowser.vue b/client/platform/web-girder/views/DataBrowser.vue
index a071f1df5..84ba98de5 100644
--- a/client/platform/web-girder/views/DataBrowser.vue
+++ b/client/platform/web-girder/views/DataBrowser.vue
@@ -7,9 +7,12 @@ import {
 } from '@girder/components/src';
 import { itemsPerPageOptions } from 'dive-common/constants';
 import { clientSettings } from 'dive-common/store/settings';
-import { useStore, LocationType } from '../store/types';
+import { LocationType } from '../store/types';
+import { useLocation } from '../store/useLocation';
+import { useJobs } from '../store/useJobs';
 import Upload from './Upload.vue';
 import eventBus from '../eventBus';
+import { reportHandledPromiseRejection } from '../reportHandledPromiseRejection';
 
 import DiveGirderBrowser from './DiveGirderBrowser.vue';
 
@@ -21,14 +24,17 @@ export default defineComponent({
 
   setup() {
     const fileManager = ref();
-    const store = useStore();
     const uploading = ref(false);
     const uploaderDialog = ref(false);
-    const locationStore = store.state.Location;
-    const { getters } = store;
+    const {
+      location, selected, locationIsViameFolder, setRouteFromLocation,
+    } = useLocation();
+    const jobs = useJobs();
 
-    function setLocation(location: LocationType) {
-      store.dispatch('Location/setRouteFromLocation', location);
+    function setLocation(loc: LocationType) {
+      setRouteFromLocation(loc).catch((reason) => {
+        reportHandledPromiseRejection('DataBrowser: setRouteFromLocation', reason);
+      });
     }
 
     function handleNotification() {
@@ -48,10 +54,10 @@ export default defineComponent({
     }
 
     const shouldShowUpload = computed(() => (
-      locationStore.location
-      && !getters['Location/locationIsViameFolder']
-      && getLocationType(locationStore.location) === 'folder'
-      && !locationStore.selected.length
+      location.value
+      && !locationIsViameFolder.value
+      && getLocationType(location.value) === 'folder'
+      && !selected.value.length
     ));
 
     eventBus.$on('refresh-data-browser', handleNotification);
@@ -61,8 +67,10 @@ export default defineComponent({
 
     return {
       fileManager,
-      locationStore,
-      getters,
+      location,
+      selected,
+      locationIsViameFolder,
+      jobs,
       shouldShowUpload,
       uploaderDialog,
       uploading,
@@ -81,12 +89,12 @@ export default defineComponent({
 <template>
   <DiveGirderBrowser
     ref="fileManager"
-    v-model="locationStore.selected"
-    :selectable="!getters['Location/locationIsViameFolder']"
+    v-model="selected"
+    :selectable="!locationIsViameFolder"
     :new-folder-enabled="
-      !locationStore.selected.length && !getters['Location/locationIsViameFolder']
+      !selected.length && !locationIsViameFolder
     "
-    :location="locationStore.location"
+    :location="location"
     :items-per-page.sync="clientSettings.rowsPerPage"
     :items-per-page-options="itemsPerPageOptions"
     @update:location="setLocation($event)"
@@ -115,7 +123,7 @@ export default defineComponent({
           </v-btn>
         </template>
         <Upload
-          :location="locationStore.location"
+          :location="location"
           @update:uploading="updateUploading"
           @close="uploaderDialog = false"
         />
@@ -124,7 +132,7 @@ export default defineComponent({
     <template #row="{ item }">
       <span>{{ item.name }}</span>
       <v-icon
-        v-if="getters['Jobs/datasetRunningState'](item._id)"
+        v-if="jobs.getDatasetRunningState(item._id)"
         color="warning"
         class="rotate"
       >
diff --git a/client/platform/web-girder/views/DataShared.vue b/client/platform/web-girder/views/DataShared.vue
index cd4f55c8a..b0e510386 100644
--- a/client/platform/web-girder/views/DataShared.vue
+++ b/client/platform/web-girder/views/DataShared.vue
@@ -7,7 +7,7 @@ import { GirderModel, mixins } from '@girder/components/src';
 import { clientSettings } from 'dive-common/store/settings';
 import { itemsPerPageOptions } from 'dive-common/constants';
 import { getSharedWithMeFolders } from '../api';
-import { useStore } from '../store/types';
+import { useLocation } from '../store/useLocation';
 
 export default defineComponent({
   name: 'DataShared',
@@ -19,9 +19,9 @@ export default defineComponent({
       sortBy: ['created'],
       sortDesc: [true],
     } as DataOptions);
-    const store = useStore();
-    const { getters } = store;
-    const locationStore = store.state.Location;
+    const {
+      location, selected, locationIsViameFolder,
+    } = useLocation();
 
     const headers = [
       { text: 'File Name', value: 'name' },
@@ -65,10 +65,11 @@ export default defineComponent({
     return {
       isAnnotationFolder,
       dataList,
-      getters,
       updateOptions,
       total,
-      locationStore,
+      location,
+      selected,
+      locationIsViameFolder,
       clientSettings,
       itemsPerPageOptions,
       ...toRefs(tableOptions),
@@ -81,8 +82,8 @@ export default defineComponent({
 
 <template>
   <v-data-table
-    v-model="locationStore.selected"
-    :selectable="!getters['Location/locationIsViameFolder']"
+    v-model="selected"
+    :selectable="!locationIsViameFolder"
     :headers="headers"
     :page.sync="page"
     :items-per-page.sync="clientSettings.rowsPerPage"
diff --git a/client/platform/web-girder/views/Home.vue b/client/platform/web-girder/views/Home.vue
index 5113e47f6..6ea5609f3 100644
--- a/client/platform/web-girder/views/Home.vue
+++ b/client/platform/web-girder/views/Home.vue
@@ -1,15 +1,17 @@
-<script>
+<script lang="ts">
 import {
   defineComponent,
   ref,
+  computed,
 } from 'vue';
 import {
   GirderFileManager, GirderMarkdown,
 } from '@girder/components/src';
-import { mapGetters, mapState } from 'vuex';
-
 import RunPipelineMenu from 'dive-common/components/RunPipelineMenu.vue';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
+import { useConfig } from '../store/useConfig';
+import { useJobs } from '../store/useJobs';
+import { useLocation } from '../store/useLocation';
 import RunTrainingMenu from './RunTrainingMenu.vue';
 
 import { deleteResources } from '../api';
@@ -18,7 +20,6 @@ import Upload from './Upload.vue';
 import DataDetails from './DataDetails.vue';
 import Clone from './Clone.vue';
 import ShareTab from './ShareTab.vue';
-import { useStore } from '../store/types';
 import eventBus from '../eventBus';
 
 const buttonOptions = {
@@ -53,68 +54,85 @@ export default defineComponent({
   setup() {
     const loading = ref(false);
     const { prompt } = usePrompt();
-    const store = useStore();
-    const { getters } = store;
+    const {
+      location, selected, locationIsViameFolder, setSelected,
+    } = useLocation();
+    const { pipelinesEnabled, trainingEnabled } = useConfig();
+    const jobs = useJobs();
 
     const clearSelected = () => {
-      store.commit('Location/setSelected', []);
+      setSelected([]);
     };
 
+    const runningPipelines = computed(() => {
+      const results = [];
+      const inputs = locationIsViameFolder.value && location.value
+        ? [(location.value as { _id: string })._id]
+        : selected.value.filter(
+          ({ _modelType, meta }) => _modelType === 'folder' && meta && meta.annotate,
+        ).map(({ _id }) => _id);
+      inputs.forEach((item) => {
+        if (jobs.getDatasetRunningState(item)) {
+          results.push(item);
+        }
+      });
+      return results;
+    });
+
+    const selectedViameFolderIds = computed(() => selected.value.filter(
+      ({ _modelType, meta }) => _modelType === 'folder' && meta && meta.annotate,
+    ).map(({ _id }) => _id));
+
+    const selectedViameFolderNames = computed(() => selected.value.filter(
+      ({ _modelType, meta }) => _modelType === 'folder' && meta && meta.annotate,
+    ).map(({ name }) => name));
+
+    const selectedFileIds = computed(() => selected.value.filter(
+      (element) => element._modelType === 'item',
+    ).map(({ _id }) => _id));
+
+    const includesLargeImage = computed(() => (selected.value.filter(
+      ({ meta }) => meta && meta.type === 'large-image',
+    )).length > 0);
+
+    const locationInputs = computed(() => (
+      locationIsViameFolder.value && location.value
+        ? [(location.value as { _id: string })._id]
+        : selectedViameFolderIds.value
+    ));
+
+    const locationInputNames = computed(() => (
+      locationIsViameFolder.value && location.value
+        ? [(location.value as { name: string }).name]
+        : selectedViameFolderNames.value
+    ));
+
+    const selectedDescription = computed(() => (location.value as { description?: string } | null)?.description);
+
     return {
       // data
       buttonOptions,
       menuOptions,
       loading,
+      location,
+      selected,
+      locationIsViameFolder,
+      pipelinesEnabled,
+      trainingEnabled,
+      runningPipelines,
+      selectedViameFolderIds,
+      selectedViameFolderNames,
+      selectedFileIds,
+      includesLargeImage,
+      locationInputs,
+      locationInputNames,
+      selectedDescription,
       // methods
       prompt,
       clearSelected,
       eventBus,
-      getters,
     };
   },
-  computed: {
-    ...mapState('Location', ['selected', 'location']),
-    ...mapState('Config', ['pipelinesEnabled', 'trainingEnabled']),
-    ...mapGetters('Location', ['locationIsViameFolder']),
-    selectedViameFolderIds() {
-      return this.selected.filter(
-        ({ _modelType, meta }) => _modelType === 'folder' && meta && meta.annotate,
-      ).map(({ _id }) => _id);
-    },
-    selectedViameFolderNames() {
-      return this.selected.filter(
-        ({ _modelType, meta }) => _modelType === 'folder' && meta && meta.annotate,
-      ).map(({ name }) => name);
-    },
-    selectedFileIds() {
-      return this.selected.filter(
-        (element) => element._modelType === 'item',
-      ).map(({ _id }) => _id);
-    },
-    includesLargeImage() {
-      return (this.selected.filter(
-        ({ meta }) => meta && meta.type === 'large-image',
-      )).length > 0;
-    },
-    locationInputs() {
-      return this.locationIsViameFolder ? [this.location._id] : this.selectedViameFolderIds;
-    },
-    locationInputNames() {
-      return this.locationIsViameFolder ? [this.location.name] : this.selectedViameFolderNames;
-    },
-    selectedDescription() {
-      return this.location?.description;
-    },
-    runningPipelines() {
-      const results = [];
-      this.locationInputs.forEach((item) => {
-        if (this.getters['Jobs/datasetRunningState'](item)) {
-          results.push(item);
-        }
-      });
-      return results;
-    },
-  },
   methods: {
     async deleteSelection() {
       const result = await this.prompt({
@@ -146,7 +164,6 @@ export default defineComponent({
     },
   },
 });
-
 </script>
 
 <template>
diff --git a/client/platform/web-girder/views/Jobs.vue b/client/platform/web-girder/views/Jobs.vue
index 47e6961de..80db96855 100644
--- a/client/platform/web-girder/views/Jobs.vue
+++ b/client/platform/web-girder/views/Jobs.vue
@@ -1,11 +1,12 @@
 <script lang="ts">
 import {
-  computed, defineComponent, ref, toRef, watch,
+  defineComponent, ref, watch,
 } from 'vue';
 import { GirderJobList } from '@girder/components/src';
 import { setUsePrivateQueue } from 'platform/web-girder/api';
 import { useGirderRest } from 'platform/web-girder/plugins/girder';
-import { useStore } from '../store/types';
+import { useConfig } from '../store/useConfig';
+import { useJobs } from '../store/useJobs';
 
 export default defineComponent({
   name: 'Jobs',
@@ -14,13 +15,11 @@ export default defineComponent({
     const privateQueueEnabled = ref(false);
     const loading = ref(true);
     const restClient = useGirderRest();
-    const store = useStore();
+    const { distributedWorkerEnabled } = useConfig();
+    const { runningJobIds } = useJobs();
     const outstandingJobs = ref(0);
-    const distributedWorkerEnabled = computed(
-      () => store.state.Config.distributedWorkerEnabled,
-    );
 
-    watch(toRef(store.getters, 'Jobs/runningJobIds'), () => {
+    watch(runningJobIds, () => {
       restClient.get('job/queued').then(({ data }) => {
         outstandingJobs.value = data.outstanding;
       });
diff --git a/client/platform/web-girder/views/JobsTab.vue b/client/platform/web-girder/views/JobsTab.vue
index 5736714b0..807c3cf27 100644
--- a/client/platform/web-girder/views/JobsTab.vue
+++ b/client/platform/web-girder/views/JobsTab.vue
@@ -1,12 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from 'platform/web-girder/store/types';
+import { useJobs } from 'platform/web-girder/store/useJobs';
 
 export default defineComponent({
   name: 'JobsTab',
   setup() {
-    const store = useStore();
-    return { getters: store.getters };
+    const { runningJobIds } = useJobs();
+    return { runningJobIds };
   },
 });
 </script>
@@ -15,7 +15,7 @@ export default defineComponent({
   <v-tab to="/jobs">
     Jobs
     <v-badge
-      :value="getters['Jobs/runningJobIds']"
+      :value="runningJobIds"
       overlap
       bottom
       offset-x="-6"
diff --git a/client/platform/web-girder/views/Login.vue b/client/platform/web-girder/views/Login.vue
index e0fd7952e..3ea5ac7ef 100644
--- a/client/platform/web-girder/views/Login.vue
+++ b/client/platform/web-girder/views/Login.vue
@@ -1,12 +1,12 @@
 <script lang="ts">
 import {
-  defineComponent, reactive, toRefs, onBeforeUnmount, toRef,
+  defineComponent, reactive, toRefs, onBeforeUnmount,
 } from 'vue';
 import { GirderAuthentication } from '@girder/components/src';
 
 import { useGirderRest } from 'platform/web-girder/plugins/girder';
 import { useRouter } from 'vue-router/composables';
-import { useStore } from 'platform/web-girder/store/types';
+import { useBrand } from 'platform/web-girder/store/useBrand';
 
 export default defineComponent({
   name: 'Login',
@@ -19,8 +19,7 @@ export default defineComponent({
       userDialog: true,
     });
     const router = useRouter();
-    const store = useStore();
-    const brandData = toRef(store.state.Brand, 'brandData');
+    const { brandData } = useBrand();
     const girderRest = useGirderRest();
     function onLogin() {
       router.push('/');
diff --git a/client/platform/web-girder/views/NavigationBar.vue b/client/platform/web-girder/views/NavigationBar.vue
index 4f8d91ade..3b2a5fce2 100644
--- a/client/platform/web-girder/views/NavigationBar.vue
+++ b/client/platform/web-girder/views/NavigationBar.vue
@@ -1,13 +1,16 @@
-<script>
-import { mapActions, mapGetters, mapState } from 'vuex';
+<script lang="ts">
+import { defineComponent } from 'vue';
 
 import { GirderSearch } from '@girder/components/src';
 import NavigationTitle from 'dive-common/components/NavigationTitle.vue';
 import UserGuideButton from 'dive-common/components/UserGuideButton.vue';
 
+import { useBrand } from '../store/useBrand';
+import { useConfig } from '../store/useConfig';
+import { useLocation } from '../store/useLocation';
 import JobsTab from './JobsTab.vue';
 
-export default {
+export default defineComponent({
   name: 'GenericNavigationBar',
   components: {
     NavigationTitle,
@@ -16,13 +19,20 @@ export default {
     GirderSearch,
   },
   inject: ['girderRest'],
-  data: () => ({
-    runningJobIds: [],
-  }),
+  setup() {
+    const { brandData } = useBrand();
+    const { pipelinesEnabled, trainingEnabled } = useConfig();
+    const { locationRoute, setRouteFromLocation } = useLocation();
+
+    return {
+      brandData,
+      pipelinesEnabled,
+      trainingEnabled,
+      locationRoute,
+      setRouteFromLocation,
+    };
+  },
   computed: {
-    ...mapGetters('Location', ['locationRoute']),
-    ...mapState('Brand', ['brandData']),
-    ...mapState('Config', ['pipelinesEnabled', 'trainingEnabled']),
     isAdmin() {
       if (this.girderRest) {
         return this.girderRest?.user?.admin || false;
@@ -37,7 +47,6 @@ export default {
     this.girderRest.$off('logout', this.onLogout);
   },
   methods: {
-    ...mapActions('Location', ['setRouteFromLocation']),
     onLogout() {
       this.$router.push({ name: 'login' });
     },
@@ -45,7 +54,7 @@ export default {
       this.girderRest.logout();
     },
   },
-};
+});
 </script>
 
 <template>
diff --git a/client/platform/web-girder/views/RunTrainingMenu.vue b/client/platform/web-girder/views/RunTrainingMenu.vue
index 20e9f02b8..e34f18707 100644
--- a/client/platform/web-girder/views/RunTrainingMenu.vue
+++ b/client/platform/web-girder/views/RunTrainingMenu.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  defineComponent, computed, PropType, ref, onBeforeMount, watch, toRef,
+  defineComponent, computed, PropType, ref, onBeforeMount, watch,
 } from 'vue';
 
 import { useApi, TrainingConfigs } from 'dive-common/apispec';
@@ -8,7 +8,7 @@ import JobLaunchDialog from 'dive-common/components/JobLaunchDialog.vue';
 import ImportButton from 'dive-common/components/ImportButton.vue';
 import { useRequest } from 'dive-common/use';
 import { simplifyTrainingName } from 'dive-common/constants';
-import { useStore } from 'platform/web-girder/store/types';
+import { useBrand } from 'platform/web-girder/store/useBrand';
 
 export default defineComponent({
   name: 'RunTrainingMenu',
@@ -31,8 +31,7 @@ export default defineComponent({
   },
 
   setup(props) {
-    const store = useStore();
-    const brandData = toRef(store.state.Brand, 'brandData');
+    const { brandData } = useBrand();
     const { getTrainingConfigurations, runTraining } = useApi();
 
     const trainingConfigurations = ref<TrainingConfigs | null>(null);
diff --git a/client/platform/web-girder/views/ShareTab.vue b/client/platform/web-girder/views/ShareTab.vue
index edd3e1b56..01a9dd245 100644
--- a/client/platform/web-girder/views/ShareTab.vue
+++ b/client/platform/web-girder/views/ShareTab.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store/types';
+import { useLocation } from '../store/useLocation';
 
 export default defineComponent({
   name: 'ShareTab',
@@ -11,17 +11,14 @@ export default defineComponent({
     },
   },
   setup() {
-    const store = useStore();
-    const locationStore = store.state.Location;
-    const { getters } = store;
+    const { locationRoute, setSelected } = useLocation();
 
     const clearSelected = () => {
-      store.commit('Location/setSelected', []);
+      setSelected([]);
     };
 
     return {
-      locationStore,
-      getters,
+      locationRoute,
       clearSelected,
     };
   },
@@ -35,7 +32,7 @@ export default defineComponent({
     class="px-4"
     @change="clearSelected"
   >
-    <v-tab :to="getters['Location/locationRoute']">
+    <v-tab :to="locationRoute">
       <v-icon class="mr-2">
         mdi-folder-multiple
       </v-icon>
diff --git a/client/platform/web-girder/views/TrainedModels.vue b/client/platform/web-girder/views/TrainedModels.vue
index 138e6fa1f..f33faf5ee 100644
--- a/client/platform/web-girder/views/TrainedModels.vue
+++ b/client/platform/web-girder/views/TrainedModels.vue
@@ -6,7 +6,7 @@ import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { Pipelines, useApi, Pipe } from 'dive-common/apispec';
 import { DataTableHeader } from 'vuetify';
 import { useRouter } from 'vue-router/composables';
-import { useStore } from 'platform/web-girder/store/types';
+import { useConfig } from 'platform/web-girder/store/useConfig';
 
 export default defineComponent({
   name: 'TrainedModels',
@@ -16,13 +16,13 @@ export default defineComponent({
     } = useApi();
     const { prompt } = usePrompt();
     const router = useRouter();
-    const store = useStore();
+    const { getPipelinesEnabled, getTrainingEnabled } = useConfig();
 
     const unsortedPipelines = ref({} as Pipelines);
     const search = ref('');
 
     onBeforeMount(async () => {
-      if (!store.state.Config.pipelinesEnabled && !store.state.Config.trainingEnabled) {
+      if (!getPipelinesEnabled() && !getTrainingEnabled()) {
         router.push('/');
         return;
       }
diff --git a/client/platform/web-girder/views/ViewerAlert.vue b/client/platform/web-girder/views/ViewerAlert.vue
index a5f5fa16c..9766a9ee4 100644
--- a/client/platform/web-girder/views/ViewerAlert.vue
+++ b/client/platform/web-girder/views/ViewerAlert.vue
@@ -1,15 +1,13 @@
 <script lang="ts">
-import { useStore } from 'platform/web-girder/store/types';
-import { defineComponent, ref, toRef } from 'vue';
+import { useBrand } from 'platform/web-girder/store/useBrand';
+import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   name: 'ViewerAlert',
   setup() {
-    const store = useStore();
+    const { brandData } = useBrand();
     const dialog = ref(false);
 
-    const brandData = toRef(store.state.Brand, 'brandData');
-
     return {
       dialog,
       brandData,
diff --git a/client/platform/web-girder/views/ViewerLoader.vue b/client/platform/web-girder/views/ViewerLoader.vue
index 224cfe9ed..2a8232dc8 100644
--- a/client/platform/web-girder/views/ViewerLoader.vue
+++ b/client/platform/web-girder/views/ViewerLoader.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  computed, defineComponent, onBeforeUnmount, onMounted, ref, toRef, watch, Ref, PropType,
+  computed, defineComponent, onBeforeUnmount, onMounted, ref, watch, Ref, PropType,
 } from 'vue';
 
 import Viewer from 'dive-common/components/Viewer.vue';
@@ -9,7 +9,11 @@ import RunPipelineMenu from 'dive-common/components/RunPipelineMenu.vue';
 import ImportAnnotations from 'dive-common/components/ImportAnnotations.vue';
 import SidebarContext from 'dive-common/components/SidebarContext.vue';
 import context from 'dive-common/store/context';
-import { useStore } from 'platform/web-girder/store/types';
+import { useBrand } from 'platform/web-girder/store/useBrand';
+import { useConfig } from 'platform/web-girder/store/useConfig';
+import { useDataset } from 'platform/web-girder/store/useDataset';
+import { useLocation } from 'platform/web-girder/store/useLocation';
+import { useJobs } from 'platform/web-girder/store/useJobs';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { useApi } from 'dive-common/apispec';
 import { convertLargeImage } from 'platform/web-girder/api/rpc.service';
@@ -95,16 +99,17 @@ export default defineComponent({
     const { prompt } = usePrompt();
     const router = useRouter();
     const viewerRef = ref();
-    const store = useStore();
-    const brandData = toRef(store.state.Brand, 'brandData');
-    const pipelinesEnabled = toRef(store.state.Config, 'pipelinesEnabled');
+    const { brandData } = useBrand();
+    const { pipelinesEnabled } = useConfig();
+    const { meta: datasetMeta } = useDataset();
+    const jobs = useJobs();
+    const { locationRoute } = useLocation();
     const revisionNum = computed(() => {
       const parsed = Number.parseInt(props.revision, 10);
       if (Number.isNaN(parsed)) return undefined;
       return parsed;
     });
-    const { getters } = store;
-    const currentJob = computed(() => getters['Jobs/datasetCompleteJobs'](props.id));
+    const currentJob = computed(() => jobs.getDatasetCompleteJobs(props.id));
 
     const typeList: Ref<string[]> = ref([]);
 
@@ -115,7 +120,7 @@ export default defineComponent({
     findType();
     const runningPipelines = computed(() => {
       const results: string[] = [];
-      if (getters['Jobs/datasetRunningState'](props.id)) {
+      if (jobs.getDatasetRunningState(props.id)) {
         results.push(props.id);
       }
       return results;
@@ -138,7 +143,7 @@ export default defineComponent({
             positiveButton: 'Reload',
             negativeButton: '',
           });
-          store.dispatch('Jobs/removeCompleteJob', { datasetId: props.id });
+          jobs.removeCompleteJob({ datasetId: props.id });
           if (result) {
             viewerRef.value.reloadAnnotations();
           }
@@ -149,7 +154,7 @@ export default defineComponent({
               'either failed or was cancelled by the user',
             ],
           });
-          store.dispatch('Jobs/removeCompleteJob', { datasetId: props.id });
+          jobs.removeCompleteJob({ datasetId: props.id });
         }
       }
     });
@@ -220,7 +225,9 @@ export default defineComponent({
       menuOptions,
       revisionNum,
       viewerRef,
-      getters,
+      jobs,
+      locationRoute,
+      datasetMeta,
       currentJob,
       runningPipelines,
       routeRevision,
@@ -240,7 +247,7 @@ export default defineComponent({
     ref="viewerRef"
     :revision="revisionNum"
     :current-set="set"
-    :read-only-mode="!!getters['Jobs/datasetRunningState'](id)"
+    :read-only-mode="!!jobs.getDatasetRunningState(id)"
     :comparison-sets="comparisonSets"
     @large-image-warning="largeImageWarning()"
     @update:set="routeSet"
@@ -254,7 +261,7 @@ export default defineComponent({
         class="mx-2"
         style="flex-basis:0; flex-grow:0;"
       >
-        <v-tab :to="getters['Location/locationRoute']">
+        <v-tab :to="locationRoute">
           Data
           <v-icon>mdi-database</v-icon>
         </v-tab>
@@ -272,7 +279,7 @@ export default defineComponent({
       <ImportAnnotations
         :button-options="buttonOptions"
         :menu-options="menuOptions"
-        :read-only-mode="!!getters['Jobs/datasetRunningState'](id) || revisionNum !== undefined"
+        :read-only-mode="!!jobs.getDatasetRunningState(id) || revisionNum !== undefined"
         :dataset-id="id"
         block-on-unsaved
       />
@@ -282,7 +289,7 @@ export default defineComponent({
         block-on-unsaved
       />
       <Clone
-        v-if="$store.state.Dataset.meta"
+        v-if="datasetMeta"
         v-bind="{ buttonOptions, menuOptions }"
         :dataset-id="id"
         :revision="revisionNum"

From 04a238ac2d82c7d16a2c90fa2a02ca19198d31de Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 14 May 2026 15:29:15 -0400
Subject: [PATCH 2/2] adding tests

---
 client/package-lock.json                      | 514 ++++++++++++++++++
 client/package.json                           |   3 +-
 .../store/webGirderStoreComposables.spec.ts   | 320 +++++++++++
 3 files changed, 836 insertions(+), 1 deletion(-)
 create mode 100644 client/platform/web-girder/store/webGirderStoreComposables.spec.ts

diff --git a/client/package-lock.json b/client/package-lock.json
index d4e03e6c2..d9a5a6743 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -76,6 +76,7 @@
         "ffmpeg-ffprobe-static": "^4.4.0-rc.11",
         "fs-extra": "^9.0.1",
         "js-yaml": "^4.1.0",
+        "jsdom": "^24.1.3",
         "mime-types": "^2.1.27",
         "mock-fs": "^5.2.0",
         "proper-lockfile": "^4.1.1",
@@ -108,6 +109,27 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -1706,6 +1728,121 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@derhuerst/http-basic": {
       "version": "8.2.4",
       "resolved": "https://registry.npmjs.org/@derhuerst/http-basic/-/http-basic-8.2.4.tgz",
@@ -6668,6 +6805,27 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssstyle": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cssstyle/node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -7001,6 +7159,20 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@@ -7080,6 +7252,13 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -7717,6 +7896,19 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/env-paths": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
@@ -9680,6 +9872,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -10249,6 +10454,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -10700,6 +10912,71 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/jsdom": {
+      "version": "24.1.3",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.3.tgz",
+      "integrity": "sha512-MyL55p3Ut3cXbeBEG7Hcv0mVM8pp8PBNWxRqchZnSfAiES1v1mRnMeFfaHWIPULpwsYfvO+ZmMZz5tGCnjzDUQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.0.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.4.3",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.5",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.12",
+        "parse5": "^7.1.2",
+        "rrweb-cssom": "^0.7.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.1.4",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^2.11.2"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/jsdom/node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -11508,6 +11785,13 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.23",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.23.tgz",
+      "integrity": "sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -11740,6 +12024,19 @@
       "integrity": "sha512-Tz11t3uKztEW5FEVZnj1ox8GKblWn+PvHY9TmJV5Mll2uHEwRdR/5Li1OlXoECjLYkApdhWy44ocONwXLiKO5A==",
       "license": "MIT"
     },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -12237,6 +12534,19 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/psl": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
+      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/lupomontero"
+      }
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -12273,6 +12583,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/queue-lit": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/queue-lit/-/queue-lit-1.5.2.tgz",
@@ -12522,6 +12839,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/resedit": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/resedit/-/resedit-1.7.2.tgz",
@@ -12646,6 +12970,13 @@
       "license": "BSD-3-Clause",
       "optional": true
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+      "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -12773,6 +13104,19 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
@@ -13469,6 +13813,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tapable": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
@@ -13803,6 +14154,45 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie/node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/truncate-utf8-bytes": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
@@ -14156,6 +14546,17 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/utf8-byte-length": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.5.tgz",
@@ -15114,6 +15515,19 @@
         "vue": "^2.6.4"
       }
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
@@ -15134,6 +15548,16 @@
       "integrity": "sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==",
       "license": "Apache-2.0"
     },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/webpack": {
       "version": "5.106.2",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.106.2.tgz",
@@ -15297,6 +15721,57 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -15491,6 +15966,28 @@
       "devOptional": true,
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.20.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.1.tgz",
+      "integrity": "sha512-It4dO0K5v//JtTXuPkfEOaI3uUN87iYPnqo/ZzqCoG3g8uhA66QUMs/SrM0YK7/NAu+r4LMh/9dq2A7k+rHs+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/wslink": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/wslink/-/wslink-2.5.0.tgz",
@@ -15514,6 +16011,16 @@
         "xml-js": "bin/cli.js"
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/xml-utils": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.10.2.tgz",
@@ -15561,6 +16068,13 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/client/package.json b/client/package.json
index 7844fb449..93d9193b4 100644
--- a/client/package.json
+++ b/client/package.json
@@ -40,11 +40,11 @@
     "d3": "^5.12.0",
     "geojs": "~1.6.2",
     "geotiff": "^3.0.0",
-    "pngjs": "^7.0.0",
     "glob-to-regexp": "^0.4.1",
     "lodash": "^4.17.19",
     "moment": "^2.29.1",
     "mousetrap": "^1.6.5",
+    "pngjs": "^7.0.0",
     "semver": "^7.3.5",
     "vue": "^2.7.16",
     "vue-gtag": "^1.9.1",
@@ -94,6 +94,7 @@
     "ffmpeg-ffprobe-static": "^4.4.0-rc.11",
     "fs-extra": "^9.0.1",
     "js-yaml": "^4.1.0",
+    "jsdom": "^24.1.3",
     "mime-types": "^2.1.27",
     "mock-fs": "^5.2.0",
     "proper-lockfile": "^4.1.1",
diff --git a/client/platform/web-girder/store/webGirderStoreComposables.spec.ts b/client/platform/web-girder/store/webGirderStoreComposables.spec.ts
new file mode 100644
index 000000000..9da3ccc8c
--- /dev/null
+++ b/client/platform/web-girder/store/webGirderStoreComposables.spec.ts
@@ -0,0 +1,320 @@
+// @vitest-environment jsdom
+
+// eslint-disable-next-line import/no-extraneous-dependencies -- Vitest is only used in tests
+import {
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
+
+import type { Route } from 'vue-router';
+
+import { MultiType, VideoType } from '../../../dive-common/constants';
+
+import * as api from '../api';
+import * as configurationService from '../api/configuration.service';
+import girderRest from '../plugins/girder';
+
+import { bindWebGirderRouter, useLocation } from './useLocation';
+import { useBrand } from './useBrand';
+import { useConfig } from './useConfig';
+import { useDataset } from './useDataset';
+import { initJobs, useJobs } from './useJobs';
+import { useUser } from './useUser';
+
+function resetAllStoreState() {
+  const user = useUser();
+  user.setUser(null);
+
+  const brand = useBrand();
+  brand.setBrandData({
+    name: 'DIVE',
+    vuetify: null,
+    favicon: undefined,
+    logo: brand.getBrandData().logo,
+    loginMessage: '',
+    alertMessage: '',
+    trainingMessage: '',
+  });
+
+  const config = useConfig();
+  config.setCapabilities({
+    distributedWorkerEnabled: false,
+    pipelinesEnabled: false,
+    trainingEnabled: false,
+  });
+
+  const dataset = useDataset();
+  dataset.setMeta(null);
+
+  const location = useLocation();
+  location.setLocation(null);
+  location.setSelected([]);
+
+  const jobs = useJobs();
+  jobs.jobIds.value = {};
+  jobs.datasetStatus.value = {};
+  jobs.completeJobsInfo.value = {};
+}
+
+describe('web-girder store composables', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    resetAllStoreState();
+  });
+
+  describe('useUser', () => {
+    it('setUser and getUser round-trip', () => {
+      const { setUser, getUser } = useUser();
+      const u = {
+        admin: false,
+        email: 'a@b.c',
+        firstName: 'A',
+        login: 'alice',
+        lastName: 'B',
+        status: 'active',
+      };
+      setUser(u);
+      expect(getUser()).toEqual(u);
+    });
+
+    it('loadUser merges fetchUser result into user', async () => {
+      const partial = {
+        admin: true,
+        email: 'x@y.z',
+        firstName: 'X',
+        login: 'bob',
+        lastName: 'Y',
+        status: 'active',
+      };
+      vi.spyOn(girderRest, 'fetchUser').mockResolvedValue(partial as never);
+      useUser().setUser({
+        admin: false,
+        email: '',
+        firstName: '',
+        login: 'bob',
+        lastName: '',
+        status: 'active',
+      });
+      await useUser().loadUser();
+      expect(useUser().getUser()).toMatchObject({
+        login: 'bob',
+        admin: true,
+        email: 'x@y.z',
+      });
+    });
+  });
+
+  describe('useConfig', () => {
+    it('setCapabilities maps API flags', async () => {
+      vi.spyOn(configurationService, 'getConfig').mockResolvedValue({
+        data: {
+          distributedWorker: true,
+          pipelinesEnabled: true,
+          trainingEnabled: false,
+        },
+      } as never);
+      await useConfig().loadConfig();
+      expect(useConfig().getDistributedWorkerEnabled()).toBe(true);
+      expect(useConfig().getPipelinesEnabled()).toBe(true);
+      expect(useConfig().getTrainingEnabled()).toBe(false);
+    });
+  });
+
+  describe('useBrand', () => {
+    it('setBrandData merges partial brand', () => {
+      const brand = useBrand();
+      brand.setBrandData({ name: 'Test Brand' });
+      expect(brand.getBrandData().name).toBe('Test Brand');
+    });
+
+    it('loadBrand applies API response', async () => {
+      vi.spyOn(api, 'getBrandData').mockResolvedValue({
+        data: {
+          name: 'From API',
+          vuetify: null,
+          favicon: undefined,
+          logo: '',
+          loginMessage: '',
+          alertMessage: '',
+          trainingMessage: '',
+        },
+      } as never);
+      await useBrand().loadBrand();
+      expect(useBrand().getBrandData().name).toBe('From API');
+    });
+  });
+
+  describe('useLocation', () => {
+    it('setLocationFromRoute hydrates from route params', async () => {
+      const route = {
+        name: 'home',
+        params: { routeType: 'collections' },
+      } as unknown as Route;
+      await useLocation().setLocationFromRoute(route);
+      expect(useLocation().getLocation()).toEqual({ type: 'collections' });
+    });
+
+    it('hydrate loads unnamed folder via getFolder', async () => {
+      vi.spyOn(api, 'getFolder').mockResolvedValue({
+        data: {
+          _id: 'f1',
+          _modelType: 'folder',
+          name: 'Hydrated',
+        },
+      } as never);
+      await useLocation().hydrate({
+        _id: 'f1',
+        _modelType: 'folder',
+      } as never);
+      const loc = useLocation().getLocation() as { name?: string };
+      expect(loc?.name).toBe('Hydrated');
+    });
+
+    it('setRouteFromLocation skips push for auxiliary under annotate folder', async () => {
+      const push = vi.fn().mockResolvedValue(undefined);
+      bindWebGirderRouter({ push } as never);
+      const locApi = useLocation();
+      locApi.setLocation({
+        _id: 'ds',
+        _modelType: 'folder',
+        name: 'D',
+        meta: { annotate: true },
+      } as never);
+      await locApi.setRouteFromLocation({
+        _id: 'aux',
+        _modelType: 'folder',
+        name: 'auxiliary',
+      } as never);
+      expect(push).not.toHaveBeenCalled();
+    });
+
+    it('setRouteFromLocation pushes route when bound', async () => {
+      const push = vi.fn().mockResolvedValue(undefined);
+      bindWebGirderRouter({ push } as never);
+      await useLocation().setRouteFromLocation({ type: 'users' });
+      expect(push).toHaveBeenCalledWith('/users');
+    });
+  });
+
+  describe('useDataset', () => {
+    it('loadDataset merges metadata and hydrates parent location', async () => {
+      vi.spyOn(api, 'getFolder').mockImplementation(async (id: string) => {
+        if (id === 'ds1') {
+          return {
+            data: {
+              parentId: 'p1',
+              parentCollection: 'folder',
+            },
+          } as never;
+        }
+        if (id === 'p1') {
+          return {
+            data: {
+              _id: 'p1',
+              _modelType: 'folder',
+              name: 'Parent',
+            },
+          } as never;
+        }
+        throw new Error(`unexpected getFolder(${id})`);
+      });
+      vi.spyOn(api, 'getDataset').mockResolvedValue({
+        data: {
+          id: 'ds1',
+          type: VideoType,
+          name: 'N',
+          fps: 30,
+          imageData: [],
+          createdAt: '',
+          subType: null,
+          multiCamMedia: null,
+          annotate: true,
+        },
+      } as never);
+      vi.spyOn(api, 'getDatasetMedia').mockResolvedValue({
+        data: {
+          video: { url: 'http://video' },
+        },
+      } as never);
+
+      const meta = await useDataset().loadDataset('ds1');
+      expect(meta.type).toBe(VideoType);
+      expect(meta.videoUrl).toBe('http://video');
+      const parent = useLocation().getLocation() as { _id?: string; name?: string };
+      expect(parent._id).toBe('p1');
+      expect(parent.name).toBe('Parent');
+    });
+
+    it('loadDataset rejects multi type', async () => {
+      vi.spyOn(api, 'getFolder').mockResolvedValue({
+        data: { parentId: 'p', parentCollection: 'folder' },
+      } as never);
+      vi.spyOn(api, 'getDataset').mockResolvedValue({
+        data: {
+          id: 'm',
+          type: MultiType,
+          name: '',
+          fps: 1,
+          imageData: [],
+          createdAt: '',
+          subType: null,
+          multiCamMedia: null,
+          annotate: false,
+        },
+      } as never);
+      vi.spyOn(api, 'getDatasetMedia').mockResolvedValue({ data: {} } as never);
+
+      await expect(useDataset().loadDataset('m1')).rejects.toThrow('multi is not supported');
+    });
+  });
+
+  describe('useJobs', () => {
+    it('setJobState and runningJobIds track running status', () => {
+      const jobs = useJobs();
+      jobs.setJobState({ jobId: 'j1', value: 2 });
+      expect(jobs.getRunningJobIds()).toBe(true);
+      jobs.setJobState({ jobId: 'j1', value: 3 });
+      expect(jobs.getRunningJobIds()).toBe(false);
+    });
+
+    it('getDatasetRunningState returns job link while running', () => {
+      const jobs = useJobs();
+      jobs.setDatasetStatus({ datasetId: 'd1', status: 2, jobId: 'job99' });
+      expect(jobs.getDatasetRunningState('d1')).toBe('/girder/#job/job99');
+    });
+
+    it('setCompleteJobsInfo and removeCompleteJob', () => {
+      const jobs = useJobs();
+      jobs.setCompleteJobsInfo({
+        datasetId: 'd1',
+        type: 'pipelines',
+        title: 'T',
+        success: true,
+      });
+      expect(jobs.getDatasetCompleteJobs('d1')).toMatchObject({ type: 'pipelines', success: true });
+      jobs.removeCompleteJob({ datasetId: 'd1' });
+      expect(jobs.getDatasetCompleteJobs('d1')).toBe(false);
+    });
+  });
+
+  describe('initJobs', () => {
+    it('fetches running jobs and subscribes to job status messages', async () => {
+      const job = {
+        _id: 'job1',
+        status: 2,
+        dataset_id: 'ds1',
+        type: 'pipelines',
+        title: 'P',
+      };
+      vi.spyOn(girderRest, 'get').mockResolvedValue({ data: [job] } as never);
+      vi.spyOn(girderRest, '$on').mockImplementation(() => girderRest);
+      await initJobs();
+      expect(girderRest.get).toHaveBeenCalled();
+      expect(girderRest.$on).toHaveBeenCalledWith('message:job_status', expect.any(Function));
+      expect(useJobs().getJobIds().job1).toBe(2);
+    });
+  });
+});