From 2044c1a5c0a2d996c67329668a17e8e4c562801f Mon Sep 17 00:00:00 2001
From: Alexey Velikiy <cg@corpglory.com>
Date: Fri, 29 Oct 2021 18:45:52 +0300
Subject: [PATCH] render segments #5

---
 client/src/components/Graph.vue           | 20 ++++++++++------
 client/src/components/hastic_pod/index.ts | 29 +++++++++++++++--------
 client/src/services/segments.ts           |  6 ++---
 3 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Graph.vue b/client/src/components/Graph.vue
index 4168d2d..d0bb00d 100644
--- a/client/src/components/Graph.vue
+++ b/client/src/components/Graph.vue
@@ -6,7 +6,7 @@
 import { defineComponent } from 'vue';
 import { HasticPod, TimeRange } from "./hastic_pod";
 import { getMetrics } from '../services/metrics.service';
-import { postSegment } from '../services/segments';
+import { getSegments, postSegment } from '../services/segments';
 import { LineTimeSerie } from "@chartwerk/line-pod";
 
 import { SegmentArray } from '@/types/segment_array';
@@ -15,21 +15,27 @@ import { Segment, SegmentId } from '@/types/segment';
 import _ from "lodash";
 
 // TODO: move to store
-async function resolveData(range: TimeRange): Promise<LineTimeSerie[]> {
-  // TODO: return segments from the promise too
+async function resolveData(range: TimeRange): Promise<{ 
+  timeserie: LineTimeSerie[], 
+  segments: Segment[]
+}> {
+
   const endTime = Math.floor(range.to);
   const startTime = Math.floor(range.from);
 
   const step = Math.max(Math.round((endTime - startTime) / 5000), 1);
 
   try {
+    // TODO: request in parallel
     let [target, values] = await getMetrics(startTime, endTime, step);
-    return [
-      { target: target, datapoints: values, color: 'green' },
-    ];
+    let segments = await getSegments(startTime, endTime);
+    return {
+      timeserie: [{ target: target, datapoints: values, color: 'green' }],
+      segments: segments
+    }
   } catch (e) {
     this.$notify({
-      title: "Error during extracting metric",
+      title: "Error during extracting data",
       text: e,
       type: 'error'
     });
diff --git a/client/src/components/hastic_pod/index.ts b/client/src/components/hastic_pod/index.ts
index 45774b5..151524d 100644
--- a/client/src/components/hastic_pod/index.ts
+++ b/client/src/components/hastic_pod/index.ts
@@ -5,7 +5,10 @@ import { ANALYTIC_UNIT_COLORS } from "@/types/colors"
 import { Segment, SegmentId } from "@/types/segment";
 
 export type TimeRange = { from: number, to: number };
-export type UpdateDataCallback = (range: TimeRange) => Promise<LineTimeSerie[]>;
+export type UpdateDataCallback = (range: TimeRange) => Promise<{ 
+  timeserie: LineTimeSerie[], 
+  segments: Segment[]
+}>;
 export type UpdateSegmentCallback = (segment: Segment) => Promise<SegmentId>;
 
 export class HasticPod extends LinePod {
@@ -51,7 +54,10 @@ export class HasticPod extends LinePod {
     const from = to - 5000; // -5000 seconds
 
     this._udc({ from, to })
-      .then(ts => { this.updateData(ts); })
+      .then(resp => { 
+        this.updateData(resp.timeserie);
+        this.updateSegments(resp.segments);
+      })
       .catch(() => { /* set "error" message */ })
   }
 
@@ -103,11 +109,11 @@ export class HasticPod extends LinePod {
       const startTimestamp = this.xScale.invert(extent[0]);
       const endTimestamp = this.xScale.invert(extent[1]);
       
-      this.addLabeling(startTimestamp, endTimestamp);
+      this.addSegment(startTimestamp, endTimestamp);
     }
   }
 
-  protected async addLabeling(from: number, to: number) {
+  protected async addSegment(from: number, to: number) {
     // TODO: implement
     // TODO: persistance of the label
     const id = this.getNewTempSegmentId();
@@ -125,7 +131,7 @@ export class HasticPod extends LinePod {
   protected renderSegments() {
     const segments = this._segmentSet.getSegments();
     for (const s in segments) {
-      console.log(s);
+      this.renderSegment(segments[s]);
     }
   }
 
@@ -149,20 +155,23 @@ export class HasticPod extends LinePod {
     console.log('update range');
     console.log(range);
     
-    const ts = await this._udc({ from: range[0][0], to: range[0][1] });
+    const resp = await this._udc({ from: range[0][0], to: range[0][1] });
     const options = { axis: { x: { range: range[0] } } };
-    this.updateData(ts, options);
+    this.updateData(resp.timeserie, options);
+    this.updateSegments(resp.segments);
   }
 
   private _zoomOut({x, y}) {
     console.log(`${x} -- ${y}`);
   }
 
-  private _renderSegments() {
-    const m = this.metricContainer;
-    console.log(m);
+  protected updateSegments(segments: Segment[]) {
+    this._segmentSet.clear();
+    this._segmentSet.setSegments(segments);
+    this.renderSegments();
   }
 
+
   // TODO: move to "controller"
   private _tempIdCounted = -1;
   public getNewTempSegmentId(): SegmentId {
diff --git a/client/src/services/segments.ts b/client/src/services/segments.ts
index b4e6d0c..7bba7d4 100644
--- a/client/src/services/segments.ts
+++ b/client/src/services/segments.ts
@@ -6,7 +6,7 @@ import _ from 'lodash';
 
 const SEGMENTS_API_URL = API_URL + "segments/";
 
-export async function getSegments(from: number, to: number) {
+export async function getSegments(from: number, to: number): Promise<Segment[]> {
   if(from >= to) {
     throw new Error("`from` can`t be less than `to`");
   }
@@ -14,9 +14,7 @@ export async function getSegments(from: number, to: number) {
   const uri = SEGMENTS_API_URL + `?from=${from}&to=${to}`;
   const res = await axios.get(uri);
 
-  const target = _.keys(res["data"]["data"])[0];
-  const values = res["data"]["data"][target];
-  return [target, values];
+  return res["data"] as Segment[];
 }
 
 export async function postSegment(segment: Segment): Promise<SegmentId> {