working version as per POC

mrc-ide · Jun 27, 2024 · a576227 · a576227
1 parent 7f846b0
commit a576227
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 15 deletions.
diff --git a/app/static/src/app/components/code/CodeTab.vue b/app/static/src/app/components/code/CodeTab.vue
@@ -17,8 +17,7 @@
         <div class="mt-3">
             <vertical-collapse v-if="showSelectedVariables" title="Select variables" collapse-id="select-variables">
                 <div class="ms-2">
-                    Drag variables to move to another graph, or to hide variable. Press the Ctrl key on drag to make a
-                    copy of a variable.
+                    Drag variables to move to another graph, or to hide variable.
                 </div>
                 <selected-variables
                     v-for="(_, index) in graphsConfig"
@@ -52,7 +51,7 @@ import SelectedVariables from "./SelectedVariables.vue";
 import HiddenVariables from "./HiddenVariables.vue";
 import VerticalCollapse from "../VerticalCollapse.vue";
 import GenericHelp from "../help/GenericHelp.vue";
-import { GraphsAction } from "@/app/store/graphs/actions";
+import { GraphsAction } from "../../store/graphs/actions";
 
 export default defineComponent({
     name: "CodeTab",
@@ -82,7 +81,7 @@ export default defineComponent({
         const graphsConfig = computed(() => store.state.graphs.config);
         const compile = () => store.dispatch(`model/${ModelAction.CompileModel}`);
         const addGraph = () => {
-            store.commit(`graphs/${GraphsAction.NewGraph}`);
+            store.dispatch(`graphs/${GraphsAction.NewGraph}`);
         };
         const loadingMessage = userMessages.code.isValidating;
         const setDraggingVariable = (value: boolean) => (draggingVariable.value = value);

diff --git a/app/static/src/app/components/code/HiddenVariables.vue b/app/static/src/app/components/code/HiddenVariables.vue
@@ -75,11 +75,12 @@ export default defineComponent({
             const srcGraph = dataTransfer!!.getData("srcGraph");
             if (srcGraph !== "hidden") {
                 // remove from source graph
-                const srcVariables = [...store.state.model.graphs[srcGraph].selectedVariables].filter(
+                const srcGraphInt = parseInt(srcGraph);
+                const srcVariables = [...store.state.graphs.config[srcGraphInt].selectedVariables].filter(
                     (v) => v !== variable
                 );
-                store.dispatch(`model/${GraphsAction.UpdateSelectedVariables}`, {
-                    index: srcGraph,
+                store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
+                    graphIndex: srcGraphInt,
                     selectedVariables: srcVariables
                 });
             }

diff --git a/app/static/src/app/store/graphs/actions.ts b/app/static/src/app/store/graphs/actions.ts
@@ -6,7 +6,7 @@ import { GraphsState } from "./state";
 
 export enum GraphsAction {
     UpdateSelectedVariables = "UpdateSelectedVariables",
-    NewGraph = "AddGraph"
+    NewGraph = "NewGraph"
 }
 
 export const actions: ActionTree<GraphsState, AppState> = {

diff --git a/app/static/src/app/store/graphs/getters.ts b/app/static/src/app/store/graphs/getters.ts
@@ -16,13 +16,8 @@ export const getters: GraphsGetters & GetterTree<GraphsState, AppState> = {
     [GraphsGetter.allSelectedVariables]: (state: GraphsState): string[] => {
         return state.config.flatMap((c) => c.selectedVariables); // TODO: dedupe, in mrc-5443
     },
-    [GraphsGetter.hiddenVariables]: (
-        state: GraphsState,
-        graphsGetters: GraphsGetters,
-        rootState,
-        rootGetters
-    ): string[] => {
-        const allSelected = graphsGetters[GraphsGetter.allSelectedVariables](state, getters, rootState, rootGetters);
+    [GraphsGetter.hiddenVariables]: (_, graphsGetters, rootState): string[] => {
+        const allSelected = graphsGetters[GraphsGetter.allSelectedVariables] as string[];
         return rootState.model.odinModelResponse?.metadata?.variables.filter((s) => !allSelected.includes(s)) || [];
     }
 };