Merge pull request #840 from yeatmanlab/ref/318/query-composables-tas…

…k-dictionary Migrate tasks dictionary from auth store to query composable
yeatmanlab · Oct 2, 2024 · 94ddacb · 94ddacb
2 parents 3132898 + 903a793
commit 94ddacb
Show file tree

Hide file tree

Showing 13 changed files with 483 additions and 334 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import { computed, onBeforeMount, onMounted, ref, defineAsyncComponent, onUpdated } from 'vue';
+import { computed, onBeforeMount, onMounted, ref, defineAsyncComponent } from 'vue';
 import { useRoute } from 'vue-router';
 import { useRecaptchaProvider } from 'vue-recaptcha';
 import { Head } from '@unhead/vue/components';
@@ -84,10 +84,6 @@ const navbarBlacklist = ref([
   'MEP',
 ]);
 
-onUpdated(async () => {
-  await authStore.updateTasksDictionary();
-});
-
 onBeforeMount(async () => {
   await authStore.initFirekit();
   authStore.setUser();

diff --git a/src/components/CardAdministration.vue b/src/components/CardAdministration.vue
@@ -24,24 +24,29 @@
           <PvConfirmPopup />
         </div>
       </div>
+
       <div class="card-admin-details">
         <span class="mr-1"><strong>Dates</strong>:</span>
         <span class="mr-1">
           {{ processedDates.start.toLocaleDateString() }} — {{ processedDates.end.toLocaleDateString() }}
         </span>
       </div>
+
       <div class="card-admin-assessments">
         <span class="mr-1"><strong>Assessments</strong>:</span>
-        <span v-for="assessmentId in assessmentIds" :key="assessmentId" class="card-inline-list-item">
-          <span>{{ tasksDictionary[assessmentId]?.publicName ?? assessmentId }}</span>
-          <span
-            v-if="showParams"
-            v-tooltip.top="'Click to view params'"
-            class="pi pi-info-circle cursor-pointer ml-1"
-            style="font-size: 1rem"
-            @click="toggleParams($event, assessmentId)"
-          />
-        </span>
+        <template v-if="!isLoadingTasksDictionary">
+          <span v-for="assessmentId in assessmentIds" :key="assessmentId" class="card-inline-list-item">
+            <span>{{ tasksDictionary[assessmentId]?.publicName ?? assessmentId }}</span>
+            <span
+              v-if="showParams"
+              v-tooltip.top="'Click to view params'"
+              class="pi pi-info-circle cursor-pointer ml-1"
+              style="font-size: 1rem"
+              @click="toggleParams($event, assessmentId)"
+            />
+          </span>
+        </template>
+
         <div v-if="showParams">
           <PvOverlayPanel v-for="assessmentId in assessmentIds" :key="assessmentId" :ref="paramPanelRefs[assessmentId]">
             <div v-if="getAssessment(assessmentId).variantId">
@@ -62,6 +67,7 @@
           </PvOverlayPanel>
         </div>
       </div>
+
       <div v-if="isAssigned">
         <PvButton
           class="mt-2 m-0 bg-primary text-white border-none border-round h-2rem text-sm hover:bg-red-900"
@@ -72,6 +78,7 @@
           @click="toggleTable"
         />
       </div>
+
       <PvTreeTable
         v-if="showTable"
         class="mt-3"
@@ -161,12 +168,13 @@ import _without from 'lodash/without';
 import _zip from 'lodash/zip';
 import { setBarChartData, setBarChartOptions } from '@/helpers/plotting';
 import useDsgfOrgQuery from '@/composables/queries/useDsgfOrgQuery';
+import useTasksDictionaryQuery from '@/composables/queries/useTasksDictionaryQuery';
 import { SINGULAR_ORG_TYPES } from '@/constants/orgTypes';
 
 const router = useRouter();
 
 const authStore = useAuthStore();
-const { roarfirekit, tasksDictionary } = storeToRefs(authStore);
+const { roarfirekit } = storeToRefs(authStore);
 
 const props = defineProps({
   id: { type: String, required: true },
@@ -274,6 +282,8 @@ const isWideScreen = computed(() => {
   return window.innerWidth > 768;
 });
 
+const { data: tasksDictionary, isLoading: isLoadingTasksDictionary } = useTasksDictionaryQuery();
+
 const { data: orgs, isLoading: isLoadingDsgfOrgs } = useDsgfOrgQuery(props.id, props.assignees, {
   enabled: enableQueries,
 });

diff --git a/src/components/reports/DistributionChartFacet.vue b/src/components/reports/DistributionChartFacet.vue
@@ -18,11 +18,7 @@
 <script setup>
 import { onMounted, ref, watch, computed } from 'vue';
 import embed from 'vega-embed';
-import { useAuthStore } from '@/store/auth';
-import { storeToRefs } from 'pinia';
-
-const authStore = useAuthStore();
-const { tasksDictionary } = storeToRefs(authStore);
+import useTasksDictionaryQuery from '@/composables/queries/useTasksDictionaryQuery';
 
 const props = defineProps({
   initialized: {
@@ -62,6 +58,8 @@ const props = defineProps({
   },
 });
 
+const { data: tasksDictionary, isLoading: isLoadingTasksDictionary } = useTasksDictionaryQuery();
+
 const scoreMode = ref({ name: 'Raw Score', key: 'rawScore' });
 const scoreModes = [
   { name: 'Raw Score', key: 'rawScore' },
@@ -109,11 +107,12 @@ const computedRuns = computed(() => {
   return props.runs;
 });
 
-const distributionChartFacet = (taskId) => {
+const distributionChartFacet = computed(() => {
+  if (isLoadingTasksDictionary.value) return {};
   return {
     background: null,
     title: {
-      text: `${tasksDictionary.value[taskId]?.publicName ?? taskId}`,
+      text: `${tasksDictionary.value[props.taskId]?.publicName ?? props.taskId}`,
       subtitle: `${scoreMode.value.name} Distribution By ${props.facetMode.name}`,
       anchor: 'middle',
       fontSize: 18,
@@ -165,8 +164,8 @@ const distributionChartFacet = (taskId) => {
         field: `scores.${scoreMode.value.key}`,
         title: scoreMode.value.name === 'Percentile' ? `${scoreMode.value.name} Score` : `${scoreMode.value.name}`,
         bin: {
-          step: getBinSize(scoreMode.value.name, taskId),
-          extent: [getRangeLow(scoreMode.value.name, taskId), getRangeHigh(scoreMode.value.name, taskId)],
+          step: getBinSize(scoreMode.value.name, props.taskId),
+          extent: [getRangeLow(scoreMode.value.name, props.taskId), getRangeHigh(scoreMode.value.name, props.taskId)],
         },
         sort: 'ascending',
         axis: {
@@ -208,10 +207,10 @@ const distributionChartFacet = (taskId) => {
       },
     },
   };
-};
+});
 
 const draw = async () => {
-  let chartSpecDist = distributionChartFacet(props.taskId, props.runs);
+  let chartSpecDist = distributionChartFacet.value;
   await embed(`#roar-distribution-chart-${props.taskId}`, chartSpecDist);
 };
 

diff --git a/src/components/reports/DistributionChartOverview.vue b/src/components/reports/DistributionChartOverview.vue
@@ -5,11 +5,7 @@
 <script setup>
 import { computed, onMounted } from 'vue';
 import embed from 'vega-embed';
-import { useAuthStore } from '@/store/auth';
-import { storeToRefs } from 'pinia';
-
-const authStore = useAuthStore();
-const { tasksDictionary } = storeToRefs(authStore);
+import useTasksDictionaryQuery from '@/composables/queries/useTasksDictionaryQuery';
 
 const props = defineProps({
   initialized: {
@@ -48,6 +44,8 @@ const props = defineProps({
   },
 });
 
+const { data: tasksDictionary, isLoading: isLoadingTasksDictionary } = useTasksDictionaryQuery();
+
 const supportLevelsOverview = computed(() => {
   if (!props.runs) return [];
   let values = {};
@@ -66,15 +64,17 @@ const supportLevelsOverview = computed(() => {
     .map(([support_level, count]) => ({ category: support_level, value: count }));
 });
 
-const overviewDistributionChart = (taskId) => {
-  const spec = {
+const overviewDistributionChart = computed(() => {
+  if (isLoadingTasksDictionary.value) return {};
+
+  return {
     mark: 'arc',
     height: 190,
     width: 190,
     spacing: 10,
     background: null,
     title: {
-      text: `${tasksDictionary.value[taskId].publicName ?? taskId}`,
+      text: `${tasksDictionary.value[props.taskId].publicName ?? props.taskId}`,
       subtitle: `Count by Support Level`,
       anchor: 'middle',
       fontSize: 20,
@@ -109,11 +109,10 @@ const overviewDistributionChart = (taskId) => {
       arc: { innerRadius: 0 },
     },
   };
-  return spec;
-};
+});
 
 const draw = async () => {
-  let chartSpecSupport = overviewDistributionChart(props.taskId, props.runs, props.mode);
+  let chartSpecSupport = overviewDistributionChart.value;
   await embed(`#roar-dist-chart-overview-${props.taskId}`, chartSpecSupport);
 };
 

diff --git a/src/components/reports/DistributionChartSupport.vue b/src/components/reports/DistributionChartSupport.vue
@@ -16,11 +16,9 @@
 <script setup>
 import { computed, onMounted, ref, watch } from 'vue';
 import embed from 'vega-embed';
-import { useAuthStore } from '@/store/auth';
-import { storeToRefs } from 'pinia';
+import useTasksDictionaryQuery from '@/composables/queries/useTasksDictionaryQuery';
 
-const authStore = useAuthStore();
-const { tasksDictionary } = storeToRefs(authStore);
+const { data: tasksDictionary, isLoading: isLoadingTasksDictionary } = useTasksDictionaryQuery();
 
 const returnGradeCount = computed(() => {
   const gradeCount = [];
@@ -127,7 +125,8 @@ const graphHeight = computed(() => {
 });
 
 const distributionBySupport = computed(() => {
-  let spec = {
+  if (isLoadingTasksDictionary.value) return {};
+  return {
     mark: 'bar',
     height: graphHeight.value,
     width: 350,
@@ -232,8 +231,6 @@ const distributionBySupport = computed(() => {
       ],
     },
   };
-
-  return spec;
 });
 
 const props = defineProps({