Drag a single set of variables

app/static/src/app/components/code/CodeTab.vue

@@ -16,11 +16,10 @@
         <error-info :error="error"></error-info>
         <div class="mt-3">
             <vertical-collapse v-if="showSelectedVariables" title="Select variables" collapse-id="select-variables">
-                <div class="ms-2">
-                    Click to toggle variables to include in graphs. Drag variable to move to another graph.
-                </div>
+                <div class="ms-2">Drag variables to move to another graph, or to hide variable.</div>
                 <selected-variables v-for="graphKey in graphKeys" :graph-key="graphKey"></selected-variables>
-                <button class="btn btn-primary mt-2" id="add-graph-btn" @click="addGraph">Add Graph</button>
+                <hidden-variables style="clear: both"></hidden-variables>
+                <button class="btn btn-primary mt-2 float-end" id="add-graph-btn" @click="addGraph">Add Graph</button>
             </vertical-collapse>
         </div>
     </div>
@@ -37,6 +36,7 @@ import { ModelAction } from "../../store/model/actions";
 import userMessages from "../../userMessages";
 import ErrorInfo from "../ErrorInfo.vue";
 import SelectedVariables from "./SelectedVariables.vue";
+import HiddenVariables from "./HiddenVariables.vue";
 import VerticalCollapse from "../VerticalCollapse.vue";
 import GenericHelp from "../help/GenericHelp.vue";
 
@@ -45,6 +45,7 @@ export default defineComponent({
     components: {
         GenericHelp,
         SelectedVariables,
+        HiddenVariables,
         ErrorInfo,
         CodeEditor,
         VueFeather,

app/static/src/app/components/code/HiddenVariables.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="selected-variables-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
+        <h5>Hidden variables</h5>
+        <template v-for="variable in hiddenVariables" :key="variable">
+            <span
+                class="badge variable me-2 mb-2"
+                :style="getStyle(variable)"
+                draggable="true"
+                @dragstart="startDrag($event, variable)"
+            >
+                {{ variable }}
+            </span>
+        </template>
+        <div v-if="!hiddenVariables.length" style="height: 3rem; background-color: #eee" class="p-2 me-4">
+            Drag variables here to hide them on all graphs.
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useStore } from "vuex";
+import { ModelAction } from "../../store/model/actions";
+import VueFeather from "vue-feather";
+import tooltip from "../../directives/tooltip";
+import { ModelMutation } from "../../store/model/mutations";
+import { ModelGetter } from "../../store/model/getters";
+
+export default defineComponent({
+    name: "SelectedVariables",
+    computed: {
+        tooltip() {
+            return tooltip;
+        }
+    },
+    components: { VueFeather },
+    setup(props) {
+        const store = useStore();
+        const hiddenVariables = computed<string[]>(() => store.getters[`model/${ModelGetter.unselectedVariables}`]);
+        const palette = computed(() => store.state.model.paletteModel!);
+
+        const getStyle = (variable: string) => {
+            const bgcolor = palette.value ? palette.value[variable] : "#eee";
+            return { "background-color": bgcolor };
+        };
+
+        const startDrag = (evt: DragEvent, variable: string) => {
+            console.log(`started dragging ${variable}`);
+            const { dataTransfer } = evt;
+            dataTransfer!!.dropEffect = "move";
+            dataTransfer!!.effectAllowed = "move";
+            dataTransfer!!.setData("variable", variable);
+            dataTransfer!!.setData("srcGraph", "hidden");
+        };
+
+        const onDrop = (evt: DragEvent) => {
+            const { dataTransfer } = evt;
+            const variable = dataTransfer!!.getData("variable");
+            const srcGraph = dataTransfer!!.getData("srcGraph");
+            if (srcGraph !== "hidden") {
+                // remove from source graph
+                const srcVariables = [...store.state.model.graphs[srcGraph].selectedVariables].filter(
+                    (v) => v !== variable
+                );
+                store.dispatch(`model/${ModelAction.UpdateSelectedVariables}`, {
+                    key: srcGraph,
+                    selectedVariables: srcVariables
+                });
+            }
+        };
+
+        return {
+            hiddenVariables,
+            getStyle,
+            startDrag,
+            onDrop
+        };
+    }
+});
+</script>
+
+<style scoped lang="scss">
+.selected-variables-panel {
+    width: 100%;
+
+    .variable {
+        font-size: large;
+        cursor: pointer;
+    }
+}
+</style>

app/static/src/app/components/code/SelectedVariables.vue

@@ -15,21 +15,20 @@
                 ></vue-feather>
             </button>
         </h5>
-        <span
-            v-for="variable in allVariables"
-            class="badge variable me-2 mb-2"
-            :style="getStyle(variable)"
-            :key="variable"
-            :draggable="selectedVariables.includes(variable) ? true : false"
-            @dragstart="startDrag($event, variable)"
-            @click="toggleVariable(variable)"
-        >
-            {{ variable }}
-        </span>
-    </div>
-    <div class="ms-2">
-        <span class="clickable text-primary" id="select-variables-all" @click="selectAll">Select all</span> |
-        <span class="clickable text-primary" id="select-variables-none" @click="selectNone">Select none</span>
+        <template v-for="variable in allVariables" :key="variable">
+            <span
+                v-if="selectedVariables.includes(variable)"
+                class="badge variable me-2 mb-2"
+                :style="getStyle(variable)"
+                :draggable="selectedVariables.includes(variable) ? true : false"
+                @dragstart="startDrag($event, variable)"
+            >
+                {{ variable }}
+            </span>
+        </template>
+        <div v-if="!selectedVariables.length" style="height: 3rem; background-color: #eee" class="p-2 me-4">
+            Drag variables here to select them for this graph.
+        </div>
     </div>
 </template>
 
@@ -113,13 +112,15 @@ export default defineComponent({
             const srcGraph = dataTransfer!!.getData("srcGraph");
             if (srcGraph !== props.graphKey) {
                 // remove from source graph
-                const srcVariables = [...store.state.model.graphs[srcGraph].selectedVariables].filter(
-                    (v) => v !== variable
-                );
-                store.dispatch(`model/${ModelAction.UpdateSelectedVariables}`, {
-                    key: srcGraph,
-                    selectedVariables: srcVariables
-                });
+                if (srcGraph !== "hidden") {
+                    const srcVariables = [...store.state.model.graphs[srcGraph].selectedVariables].filter(
+                        (v) => v !== variable
+                    );
+                    store.dispatch(`model/${ModelAction.UpdateSelectedVariables}`, {
+                        key: srcGraph,
+                        selectedVariables: srcVariables
+                    });
+                }
 
                 // add to this graph if necessary
                 if (!selectedVariables.value.includes(variable)) {

app/static/src/app/store/model/getters.ts

@@ -3,7 +3,8 @@ import { ModelState } from "./state";
 import { AppState, AppType } from "../appState/state";
 
 export enum ModelGetter {
-    hasRunner = "hasRunner"
+    hasRunner = "hasRunner",
+    unselectedVariables = "unselectedVariables" //variables which are unselected in any graph
 }
 
 export interface ModelGetters {
@@ -13,5 +14,9 @@ export interface ModelGetters {
 export const getters: ModelGetters & GetterTree<ModelState, AppState> = {
     [ModelGetter.hasRunner]: (state: ModelState, _: ModelGetters, rootState: AppState): boolean => {
         return rootState.appType === AppType.Stochastic ? !!state.odinRunnerDiscrete : !!state.odinRunnerOde;
+    },
+    [ModelGetter.unselectedVariables]: (state: ModelState): string[] => {
+        const selectedInAny = Object.values(state.graphs).flatMap((v) => v.selectedVariables);
+        return state.odinModelResponse?.metadata?.variables.filter((s) => !selectedInAny.includes(s)) || [];
     }
 };