Merge pull request #32 from ArielMAJ/feat/#29/restart-search

Feat/#29/restart search

Author: ArielMAJ

api/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "api"
-version = "0.4.1"
+version = "0.4.2"
 description = ""
 authors = ["ArielMAJ <ariel.maj@hotmail.com>"]
 readme = "README.md"

vue-front/package.json

@@ -1,6 +1,6 @@
 {
   "name": "GitHub_Viz",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

vue-front/src/App.vue

@@ -21,11 +21,16 @@
       @click="pieChartModalOpen = !pieChartModalOpen"
     >Open Repository Visualization
     </v-btn> -->
-    <PieChartModal v-if="pieChartModalOpen" :username="this.username" />
+    <PieChartModal
+      v-if="pieChartModalOpen"
+      :username="this.username"
+      :reload-watcher="this.reloadCount"
+    />
   </div>
 </template>
 <script>
 import PieChartModal from "./modals/PieChartModal.vue";
+import _ from "lodash";
 
 export default {
   name: "app",
@@ -39,15 +44,24 @@ export default {
         required: (value) => !!value || "Field is required",
       },
       username: "",
+      reloadCount: 0,
     };
   },
   methods: {
     search() {
       if (this.username !== "") {
+        this.reloadCount++;
         this.pieChartModalOpen = true;
       }
     },
   },
+  watch: {
+    username: _.debounce(function () {
+      if (this.username === "") {
+        this.pieChartModalOpen = false;
+      }
+    }, 2000),
+  },
 };
 </script>
 

vue-front/src/components/PlotlyChart.vue

@@ -46,7 +46,6 @@ export default {
     return {};
   },
   mounted() {
-    console.log(this.divId, this.chartData);
     this.newPlot();
     this.bindEvents();
   },

vue-front/src/modals/PieChartModal.vue

@@ -32,6 +32,10 @@ export default {
       type: String,
       required: true,
     },
+    reloadWatcher: {
+      type: Number,
+      required: true,
+    },
   },
   data: function () {
     return {
@@ -53,29 +57,32 @@ export default {
     };
   },
   async mounted() {
-    this.plotItems.forEach((item) => {
-      this.fetchData(this.username, item);
-    });
+    this.load();
   },
   methods: {
+    load() {
+      this.plotItems.forEach((item) => {
+        item.chartData = null;
+        this.fetchData(this.username, item);
+      });
+    },
     async fetchData(username, item) {
       try {
-        console.log(
-          "Fetching data...",
-          process.env.VUE_APP_BACKEND_ROOT_ENDPOINT +
-            `${username}/${item.information}`
-        );
         const resp = await fetch(
           process.env.VUE_APP_BACKEND_ROOT_ENDPOINT +
             `${username}/${item.information}`
         );
         item.chartData = await resp.json();
-        console.log(item);
       } catch (error) {
         console.error("Error fetching data:", error);
       }
     },
   },
+  watch: {
+    reloadWatcher() {
+      this.load();
+    },
+  },
 };
 </script>