clear all labels button #24

client/src/components/AnlyticsStatus.vue

@@ -9,7 +9,6 @@ import { defineComponent } from 'vue';
 import { getStatusGenerator } from '@/services/analytics.service';
 
 
-
 export default defineComponent({
   name: 'AnalyticStatus',
   components: {

client/src/components/Graph.vue

@@ -61,10 +61,9 @@ async function addSegment(segment: Segment): Promise<SegmentId> {
 }
 
 // TODO: move to store
-async function _deleteSegment(from: number, to: number): Promise<SegmentId> {
+async function _deleteSegment(from: number, to: number): Promise<number> {
   try {
-    const id = await deleteSegment(from, to);
-    return id;
+    return await deleteSegment(from, to);
   } catch (e) {
     this.$notify({
       title: "Error during saving segment",
@@ -79,18 +78,21 @@ export default defineComponent({
   name: 'Graph',
   props: {},
   mounted() {
-    // const endTime = Math.floor(Date.now() / 1000);
-    // const startTime = endTime - 1000; // 1000 seconds
-    // TODO: fill segmentArray from service
     var s = new SegmentArray();
-    var pod = new HasticPod(
+    this.pod = new HasticPod(
       document.getElementById('chart'),
       resolveData.bind(this),
       addSegment.bind(this),
       _deleteSegment.bind(this),
       s
     );
-    pod.render();
+    this.pod.render();
+  },
+  methods: {
+    async rerender() {
+      await _deleteSegment.bind(this)(0, Date.now());
+      this.pod.fetchData();
+    }
   }
 });
 </script>

client/src/components/hastic_pod/index.ts

@@ -82,7 +82,7 @@ export class HasticPod extends LinePod {
     console.log('render my metrics');
   }
 
-  protected fetchData(): void {
+  public fetchData(): void {
     let to = Math.floor(Date.now() / 1000);
     let from = to - 5000; // -5000 seconds
 

client/src/services/analytics.service.ts

@@ -13,7 +13,6 @@ export async function getStatus(): Promise<string> {
   const uri = ANALYTICS_API_URL + `status`;
   const res = await axios.get(uri);
   const data = res['data'] as any;
-  console.log(data.status);
   return data.status;
 }
 

client/src/services/segments.service.ts

@@ -32,7 +32,7 @@ export async function postSegment(segment: Segment): Promise<SegmentId> {
   return resp['data']['id'];
 }
 
-export async function deleteSegment(from: number, to: number): Promise<SegmentId> {
+export async function deleteSegment(from: number, to: number): Promise<number> {
   const uri = SEGMENTS_API_URL + `?from=${from}&to=${to}`;
   const resp = await axios.delete(uri);
   return resp['data']['count'];

client/src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
-    <graph />
+    <graph ref="graph" />
     
     <div id="controls">
       <div>
@@ -9,6 +9,8 @@
         Holde key <pre>D</pre> to delete patterns
       </div>
       <analytic-status />
+
+      <button @click="clearOrLabeling"> clear all labeling </button>
     </div>
 
   </div>
@@ -25,6 +27,11 @@ export default defineComponent({
   components: {    
     Graph,
     AnalyticStatus
+  },
+  methods: {
+    clearOrLabeling() {
+      this.$refs.graph.rerender();
+    }
   }
 });
 </script>