mrc-5441 Delete graph

app/static/src/app/components/graphConfig/GraphConfig.vue

@@ -1,6 +1,17 @@
 <template>
     <div class="graph-config-panel m-2" @drop="onDrop($event)" @dragover.prevent @dragenter.prevent>
-        <h5>Graph {{ graphIndex + 1 }}</h5>
+        <h5>
+            Graph {{ graphIndex + 1 }}
+            <button
+                type="button"
+                class="btn btn-light mx-2 delete-graph"
+                v-if="canDelete"
+                @click="deleteGraph"
+                v-tooltip="'Delete Graph'"
+            >
+                <vue-feather class="inline-icon clickable ms-2" type="trash-2"></vue-feather>
+            </button>
+        </h5>
         <div class="drop-zone" :class="dragging ? 'drop-zone-active' : 'drop-zone-inactive'">
             <template v-for="variable in selectedVariables" :key="variable">
                 <span
@@ -24,12 +35,17 @@
 </template>
 
 <script lang="ts">
+import VueFeather from "vue-feather";
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import SelectVariables from "../mixins/selectVariables";
+import { GraphsMutation } from "../../store/graphs/mutations";
 
 export default defineComponent({
     name: "GraphConfig",
+    components: {
+        VueFeather
+    },
     props: {
         dragging: {
             type: Boolean,
@@ -46,6 +62,7 @@ export default defineComponent({
         const selectedVariables = computed<string[]>(
             () => store.state.graphs.config[props.graphIndex].selectedVariables
         );
+        const canDelete = computed(() => store.state.graphs.config.length > 1);
         const palette = computed(() => store.state.model.paletteModel!);
 
         const getStyle = (variable: string) => {
@@ -56,13 +73,19 @@ export default defineComponent({
             return { "background-color": bgcolor };
         };
 
+        const deleteGraph = () => {
+            store.commit(`graphs/${GraphsMutation.DeleteGraph}`, props.graphIndex);
+        };
+
         return {
             selectedVariables,
+            canDelete,
             removeVariable,
             getStyle,
             startDrag,
             endDrag,
-            onDrop
+            onDrop,
+            deleteGraph
         };
     }
 });

app/static/src/app/store/graphs/mutations.ts

@@ -6,6 +6,7 @@ export enum GraphsMutation {
     SetLockYAxis = "SetLockYAxis",
     SetYAxisRange = "SetYAxisRange",
     AddGraph = "AddGraph",
+    DeleteGraph = "DeleteGraph",
     SetSelectedVariables = "SetSelectedVariables"
 }
 
@@ -36,5 +37,9 @@ export const mutations: MutationTree<GraphsState> = {
 
     [GraphsMutation.AddGraph](state: GraphsState, payload: GraphConfig) {
         state.config.push(payload);
+    },
+
+    [GraphsMutation.DeleteGraph](state: GraphsState, payload: number) {
+        state.config.splice(payload, 1);
     }
 };

app/static/tests/e2e/code.etest.ts

@@ -331,15 +331,15 @@ test.describe("Code Tab tests", () => {
         await expectGraphVariables(page, 0, ["I", "R"]);
     });
 
-    test("can add a graph, and drag variable onto it", async ({ page }) => {
+    test("can add a graph, drag a variable onto it and delete it", async ({ page }) => {
         // Add graph
         await page.click("#add-graph-btn");
 
         // Check second graph has appeared with placeholder text, and second graph config panel is there
         expect(await page.locator(":nth-match(.wodin-plot-container, 2)").textContent()).toBe(
             "No variables are selected."
         );
-        expect(await page.locator(":nth-match(.graph-config-panel h5, 2)").textContent()).toBe("Graph 2");
+        expect(await page.locator(":nth-match(.graph-config-panel h5, 2)").textContent()).toContain("Graph 2");
         expect(await page.locator(":nth-match(.graph-config-panel .drop-zone, 2)").textContent()).toContain(
             "Drag variables here to select them for this graph."
         );
@@ -351,6 +351,15 @@ test.describe("Code Tab tests", () => {
         await expectGraphVariables(page, 0, ["I", "R"]);
         await expectGraphVariables(page, 1, ["S"]);
         await expect(page.locator(".hidden-variables-panel .variable")).toHaveCount(0);
+
+        // Delete second graph
+        await page.click(":nth-match(.graph-config-panel .delete-graph, 2)");
+        await expect(page.locator(".graph-config-panel")).toHaveCount(1);
+        await expect(page.locator(".graph-config-panel h5")).toHaveText("Graph 1");
+        await expectGraphVariables(page, 0, ["I", "R"]);
+
+        // First graph should not be deletable
+        await expect(page.locator(".delete-graph")).toHaveCount(0);
     });
 
     test("can display help dialog", async ({ page }) => {

app/static/tests/unit/components/graphConfig/graphConfig.test.ts

@@ -3,29 +3,39 @@ import { shallowMount } from "@vue/test-utils";
 import { BasicState } from "../../../../src/app/store/basic/state";
 import GraphConfig from "../../../../src/app/components/graphConfig/GraphConfig.vue";
 import { GraphsAction } from "../../../../src/app/store/graphs/actions";
+import { GraphsState } from "../../../../src/app/store/graphs/state";
+import { GraphsMutation } from "../../../../src/app/store/graphs/mutations";
 
 describe("GraphConfig", () => {
     const mockUpdateSelectedVariables = jest.fn();
+    const mockDeleteGraph = jest.fn();
     const mockTooltipDirective = jest.fn();
+    const defaultGraphState = {
+        config: [
+            {
+                selectedVariables: ["S", "R"]
+            },
+            {
+                selectedVariables: ["I", "J"]
+            }
+        ]
+    } as any;
 
-    const getWrapper = (props = {}, selectedVariables: null | string[] = null) => {
+    const getWrapper = (props = {}, graphState: Partial<GraphsState> = {}) => {
         const store = new Vuex.Store<BasicState>({
             state: {} as any,
             modules: {
                 graphs: {
                     namespaced: true,
                     state: {
-                        config: [
-                            {
-                                selectedVariables: selectedVariables || ["S", "R"]
-                            },
-                            {
-                                selectedVariables: ["I", "J"]
-                            }
-                        ]
+                        ...defaultGraphState,
+                        ...graphState
                     },
                     actions: {
                         [GraphsAction.UpdateSelectedVariables]: mockUpdateSelectedVariables
+                    },
+                    mutations: {
+                        [GraphsMutation.DeleteGraph]: mockDeleteGraph
                     }
                 },
                 model: {
@@ -63,6 +73,7 @@ describe("GraphConfig", () => {
         const varBadges = wrapper.findAll(".graph-config-panel .badge");
         const varNames = wrapper.findAll(".graph-config-panel span.variable-name");
         expect(wrapper.find("h5").text()).toBe("Graph 1");
+        expect(wrapper.find("h5 button.delete-graph").exists()).toBe(true);
         expect(varBadges.length).toBe(2);
         expect(varNames.length).toBe(2);
         expect(varNames.at(0)!.text()).toBe("S");
@@ -145,9 +156,33 @@ describe("GraphConfig", () => {
     });
 
     it("shows instruction if no selected variables", () => {
-        const wrapper = getWrapper({}, []);
+        const wrapper = getWrapper({}, {
+            config: [
+                {
+                    selectedVariables: []
+                }
+            ]
+        } as any);
         expect(wrapper.find(".drop-zone-instruction").text()).toBe(
             "Drag variables here to select them for this graph."
         );
     });
+
+    it("does not render delete button if there is only one graph", () => {
+        const wrapper = getWrapper({}, {
+            config: [
+                {
+                    selectedVariables: ["S", "R"]
+                }
+            ]
+        } as any);
+        expect(wrapper.find("h5 button.delete-graph").exists()).toBe(false);
+    });
+
+    it("delete button commits mutation", async () => {
+        const wrapper = getWrapper();
+        await wrapper.find("button.delete-graph").trigger("click");
+        expect(mockDeleteGraph).toHaveBeenCalledTimes(1);
+        expect(mockDeleteGraph.mock.calls[0][1]).toBe(0);
+    });
 });

app/static/tests/unit/store/graphs/mutations.test.ts

@@ -42,7 +42,7 @@ describe("Graphs mutations", () => {
         expect(testState.config[0]).toStrictEqual({ selectedVariables: [], unselectedVariables: [] });
     });
 
-    it("AddGraph pushed new graph to config", () => {
+    it("AddGraph pushes new graph to config", () => {
         const testState = mockGraphsState({
             config: [{ selectedVariables: ["a"], unselectedVariables: ["b", "c"] }]
         });
@@ -52,4 +52,19 @@ describe("Graphs mutations", () => {
             { selectedVariables: [], unselectedVariables: ["b", "a", "c"] }
         ]);
     });
+
+    it("DeleteGraph removes graph from config", () => {
+        const testState = mockGraphsState({
+            config: [
+                { selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
+                { selectedVariables: ["b"], unselectedVariables: ["a", "c"] },
+                { selectedVariables: ["c"], unselectedVariables: ["a", "b"] }
+            ]
+        });
+        mutations.DeleteGraph(testState, 1);
+        expect(testState.config).toStrictEqual([
+            { selectedVariables: ["a"], unselectedVariables: ["b", "c"] },
+            { selectedVariables: ["c"], unselectedVariables: ["a", "b"] }
+        ]);
+    });
 });