first draft of testing done; cut time down in half but its still taki…

…ng too long at around 300 something ms

frontend/src/components/AnalysisView/useActionMenu.js

@@ -0,0 +1,38 @@
+import {ref} from 'vue';
+import {StatusType} from '@/config.js';
+
+
+/**
+ * Builds an actionMenu that can be used for the main header
+ * @return {Object} {actionChoices, builder} to return the actions to render and the builder to update the choices
+ */
+export function useActionMenu() {
+  const actionChoices = ref([]);
+
+  const builder = {
+    addWorkflowActions: (latest, operation) => {
+      if ( latest in StatusType ) {
+        for ( const [text, nextEvent] of StatusType[latest].transitions) {
+          builder.addMenuAction(text, StatusType[latest].icon, () => {
+            operation(nextEvent);
+          });
+        }
+      }
+    },
+    addMenuAction: (text, icon, operation) => {
+      actionChoices.value.push({
+        icon: icon,
+        text: text,
+        operation: operation,
+      });
+    },
+    addDivider: () => {
+      actionChoices.value.push({divider: true});
+    },
+    clear: () => {
+      actionChoices.value = [];
+    },
+  };
+
+  return {actionChoices, builder};
+}

frontend/src/config.js

@@ -1,27 +1,37 @@
+import {EventType} from './enums';
+
+const DEFAULT_TRANSITIONS = [['Approve', EventType.APPROVE], ['Hold', EventType.HOLD], ['Decline', EventType.DECLINE]];
 
 export const StatusType = Object.freeze({
   'Preparation': {
     icon: 'asterisk',
     color: '--rosalution-status-annotation',
+    actionText: 'Mark Ready',
+    transitions: [['Mark Ready', EventType.READY]],
   },
   'Ready': {
     icon: 'clipboard-check',
     color: '--rosalution-status-ready',
+    transitions: [['Mark Active', EventType.OPEN]],
   },
   'Active': {
     icon: 'book-open',
     color: '--rosalution-status-active',
+    transitions: DEFAULT_TRANSITIONS,
   },
   'Approved': {
     icon: 'check',
     color: '--rosalution-status-approved',
+    transitions: DEFAULT_TRANSITIONS,
   },
   'On-Hold': {
     icon: 'pause',
     color: '--rosalution-status-on-hold',
+    transitions: DEFAULT_TRANSITIONS,
   },
   'Declined': {
     icon: 'x',
     color: '--rosalution-status-declined',
+    transitions: DEFAULT_TRANSITIONS,
   },
 });

frontend/src/stores/analysisStore.js

@@ -10,14 +10,18 @@ export const analysisStore = reactive({
   updatedContent: {},
 
   analysisName() {
-    return this.analysis.name;
+    // console.log(`AnalysisStore:analysisName = ${this.analysis?.name}`)
+    return this.analysis?.name;
   },
 
   latestStatus() {
-    return this.analysis.latest_status;
+    // console.log(`AnalysisStore:latestStatus = ${this.analysis?.latest_status || 'Preparation'}`)
+    return this.analysis?.latest_status;
   },
   async getAnalysis(analysisName) {
+    // console.log(`AnalysisStore::getAnalysis - FROM MODEL BEGIN`)
     this.analysis = await Analyses.getAnalysis(analysisName);
+    // console.log(`AnalysisStore::getAnalysis - FROM MODEL END`)
   },
 
   async saveChanges() {
@@ -29,10 +33,16 @@ export const analysisStore = reactive({
     this.analysis.sections.push(...updatedSections);
     this.updatedContent = {};
   },
+
   cancelChanges() {
     this.updatedContent = {};
   },
 
+  async pushEvent(eventType) {
+    const updatedAnalysis = await Analyses.pushAnalysisEvent(this.analysisName(), eventType);
+    this.forceUpdate(updatedAnalysis);
+  },
+
   async attachSectionImage(sectionName, field, attachment) {
     const updatedSectionField = await Analyses.attachSectionImage(
         this.analysis.name,
@@ -121,6 +131,7 @@ export const analysisStore = reactive({
   },
 
   forceUpdate(updatedAnalysis) {
+    // console.log(`AnalysisStore:forceUpdate - CALLED`)
     this.analysis = {...this.analysis, ...updatedAnalysis};
   },
 });

frontend/src/views/AnalysisView.vue

@@ -2,10 +2,10 @@
   <div>
     <app-header>
       <AnalysisViewHeader
-        :actions="menuActions"
+        :actions="actionChoices"
         :titleText="analysisName"
         :sectionAnchors="sectionsHeaders"
-        :username="authStore.getUsername()"
+        :username="username"
         :workflow_status="latestStatus"
         @logout="onLogout"
         :third_party_links="thirdPartyLinks"
@@ -32,7 +32,7 @@
         :header="section.header"
         :content="section.content"
         :attachmentField="section.attachment_field"
-        :writePermissions="authStore.hasWritePermissions()"
+        :writePermissions="hasWritePermissions"
         :edit="edit"
         @attach-image="attachSectionImage"
         @update-image="updateSectionImage"
@@ -42,7 +42,7 @@
       <DiscussionSection
         id="Discussion"
         :discussions="discussions"
-        :userClientId="authStore.getClientId()"
+        :userClientId="clientId"
         :actions="discussionContextActions"
         @discussion:new-post="addDiscussionPost"
         @discussion:edit-post="editDiscussionPost"
@@ -51,7 +51,7 @@
       <SupplementalFormList
         id="Supporting_Evidence"
         :attachments="attachments"
-        :writePermissions="authStore.hasWritePermissions()"
+        :writePermissions="hasWritePermissions"
         @open-modal="addSupportingEvidence"
         @delete="removeSupportingEvidence"
         @edit="editSupportingEvidence"
@@ -70,7 +70,7 @@
 </template>
 
 <script setup>
-import {onMounted, ref, computed} from 'vue';
+import {onMounted, ref, computed, watch} from 'vue';
 
 import Analyses from '@/models/analyses.js';
 import AnalysisViewHeader from '@/components/AnalysisView/AnalysisViewHeader.vue';
@@ -81,16 +81,16 @@ import NotificationDialog from '@/components/Dialogs/NotificationDialog.vue';
 import Toast from '@/components/Dialogs/Toast.vue';
 import SupplementalFormList from '@/components/AnalysisView/SupplementalFormList.vue';
 import SaveModal from '@/components/AnalysisView/SaveModal.vue';
-import DiscussionSection from '../components/AnalysisView/DiscussionSection.vue';
+import DiscussionSection from '@/components/AnalysisView/DiscussionSection.vue';
 
 import inputDialog from '@/inputDialog.js';
 import notificationDialog from '@/notificationDialog.js';
 import toast from '@/toast.js';
 
 import {authStore} from '@/stores/authStore.js';
 import {analysisStore} from '@/stores/analysisStore.js';
-import {StatusType} from '@/config.js';
 import {useRouter} from 'vue-router';
+import {useActionMenu} from '@/components/AnalysisView/useActionMenu.js';
 
 const router = useRouter();
 
@@ -103,14 +103,16 @@ const props = defineProps({
 
 const edit = ref(false);
 
+
 const analysisName = computed(() => {
-  return analysisStore.analysis.name;
+  return analysisStore.analysisName();
 });
 
 const latestStatus = computed(() => {
-  return analysisStore.analysis.latest_status;
+  return analysisStore.latestStatus();
 });
 
+
 const thirdPartyLinks = computed(() => {
   return analysisStore.analysis.third_party_links;
 });
@@ -124,83 +126,36 @@ const sectionsHeaders = computed(() => {
   return sections;
 });
 
-const menuActions = computed(() => {
-  const actionChoices = [];
-  actionChoices.push({
-    icon: 'paperclip',
-    text: 'Attach',
-    operation: addSupportingEvidence,
-  });
+const username = computed(() => {
+  return authStore.getUsername();
+});
 
-  if ( !authStore.hasWritePermissions() ) {
-    return actionChoices;
-  }
+const clientId = computed(() => {
+  return authStore.getClientId();
+});
 
-  const prependingActions = [];
-  prependingActions.push({
-    icon: 'pencil',
-    text: 'Edit',
-    operation: () => {
-      if (!edit.value) {
-        toast.success('Edit mode has been enabled.');
-      } else {
-        toast.info('Edit mode has been disabled and changes have not been saved.');
-      }
-      edit.value = !edit.value;
-    },
-  });
+const hasWritePermissions = computed(() => {
+  return authStore.hasWritePermissions();
+});
 
-  if (analysisStore.analysis.latest_status === 'Preparation') {
-    prependingActions.push({
-      icon: StatusType['Ready'].icon,
-      text: 'Mark Ready',
-      operation: () => {
-        pushAnalysisEvent(Analyses.EventType.READY);
-      },
-    });
-  } else if (analysisStore.analysis.latest_status === 'Ready') {
-    prependingActions.push({
-      icon: StatusType['Active'].icon,
-      text: 'Mark Active',
-      operation: () => {
-        pushAnalysisEvent(Analyses.EventType.OPEN);
-      },
-    });
-  } else {
-    prependingActions.push({
-      icon: StatusType['Approved'].icon,
-      text: 'Approve',
-      operation: () => {
-        pushAnalysisEvent(Analyses.EventType.APPROVE);
-      },
-    }, {
-      icon: StatusType['On-Hold'].icon,
-      text: 'Hold',
-      operation: () => {
-        pushAnalysisEvent(Analyses.EventType.HOLD);
-      },
-    }, {
-      icon: StatusType['Declined'].icon,
-      text: 'Decline',
-      operation: () => {
-        pushAnalysisEvent(Analyses.EventType.DECLINE);
-      },
-    });
+const {actionChoices, builder} = useActionMenu();
+
+watch([hasWritePermissions, latestStatus], () => {
+  // console.log('AnalysisView::watch-latestStatus&hasWritePermissions - watch start')
+  builder.clear();
+  if ( !authStore.hasWritePermissions() ) {
+    builder.addMenuAction('Attach', 'paperclip', addSupportingEvidence);
   }
-  prependingActions.push({divider: true});
-  actionChoices.unshift(...prependingActions);
 
-  actionChoices.push({
-    text: 'Attach Monday.com',
-    operation: addMondayLink,
-  });
+  builder.addMenuAction('Edit', 'pencil', enableEditing);
+  builder.addMenuAction('Attach', 'paperclip', addSupportingEvidence);
+  builder.addDivider();
 
-  actionChoices.push({
-    text: 'Connect PhenoTips',
-    operation: addPhenotipsLink,
-  });
+  builder.addWorkflowActions(latestStatus.value, pushAnalysisEvent);
 
-  return actionChoices;
+  builder.addMenuAction('Attach Monday.com', null, addMondayLink);
+  builder.addMenuAction('Connect PhenoTips', null, addPhenotipsLink);
+  // console.log('AnalysisView::watch-latestStatus&hasWritePermissions - watch complete')
 });
 
 const discussionContextActions = computed(() => {
@@ -236,6 +191,21 @@ const genomicUnitsList = computed(() => {
   return analysisStore.analysis.genomic_units;
 });
 
+/**
+ * Enables the view to support in-line editing of the analysis.
+ */
+function enableEditing() {
+  // console.log("AnalysisView:enableEditing - Called")
+  if (!edit.value) {
+    toast.success('Edit mode has been enabled.');
+  } else {
+    // console.log("AnalysisView:enableEditing - DISABLING")
+    toast.info('Edit mode has been disabled and changes have not been saved.');
+  }
+  edit.value = !edit.value;
+  // console.log("AnalysisView:enableEditing - Complete")
+}
+
 /**
  * Handles updates to analysis content when a content row is modified. If the content type is 'supporting-evidence'
  * triggers an attachment change instead.
@@ -603,9 +573,10 @@ async function addPhenotipsLink() {
  */
 async function pushAnalysisEvent(eventType) {
   try {
-    const updatedAnalysis = await Analyses.pushAnalysisEvent(analysisName.value, eventType);
-    analysisStore.forceUpdate(updatedAnalysis);
+    // console.log(`AnalysisView:pushAnalysisEvent - CALLED '${eventType}'`)
+    await analysisStore.pushEvent(eventType);
     toast.success(`Analysis event '${eventType}' successful.`);
+    // console.log(toast.state)
   } catch (error) {
     toast.error(`Error updating the event '${eventType}'.`);
   }
@@ -667,7 +638,9 @@ function copyToClipboard(copiedText) {
  * When view is mounted, queries the analysis' state.
  */
 onMounted(async () => {
+  // console.log("AnalysisView::onMounted - BEGIN")
   await analysisStore.getAnalysis(props.analysis_name);
+  // console.log("AnalysisView::onMounted - COMPLETE")
 });
 </script>