From f49637b4c4b6938be5937d903fa956b91bcfee80 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Mon, 1 Jul 2024 15:58:36 +0100
Subject: [PATCH] delete graph

---
 .../components/graphConfig/GraphConfig.vue    | 30 +++++++++++++++++--
 app/static/src/app/store/graphs/mutations.ts  |  5 ++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index 70db5f67..51a9f746 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -1,6 +1,20 @@
 <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"
+              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 +38,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 +65,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 +76,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
         };
     }
 });
diff --git a/app/static/src/app/store/graphs/mutations.ts b/app/static/src/app/store/graphs/mutations.ts
index 859346e5..a634223c 100644
--- a/app/static/src/app/store/graphs/mutations.ts
+++ b/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);
     }
 };