Add lost event layer to timeline-chart

Signed-off-by: Ankush Tyagi <ankush.tyagi@ericsson.com>

example/src/index.ts

@@ -7,13 +7,13 @@ import { TimeGraphContainer } from "timeline-chart/lib/time-graph-container";
 import { TimeGraphChartCursors } from "timeline-chart/lib/layer/time-graph-chart-cursors";
 import { TimeGraphChartSelectionRange } from "timeline-chart/lib/layer/time-graph-chart-selection-range";
 import { TimeGraphAxisCursors } from "timeline-chart/lib/layer/time-graph-axis-cursors";
-// import { timeGraph } from "timeline-chart/lib/test-data";
 import { TimelineChart } from "timeline-chart/lib/time-graph-model";
 import { TimeGraphStateStyle } from "timeline-chart/lib/components/time-graph-state";
 import { TestDataProvider } from "./test-data-provider";
 import { TimeGraphChartGrid } from "timeline-chart/lib/layer/time-graph-chart-grid";
 import { TimeGraphVerticalScrollbar } from "timeline-chart/lib/layer/time-graph-vertical-scrollbar";
 import { TimeGraphChartArrows } from "timeline-chart/lib/layer/time-graph-chart-arrows";
+import { TimeGraphChartRangeEvents } from "timeline-chart/lib/layer/time-graph-chart-range-events";
 
 const styleConfig = {
     mainWidth: 1000,
@@ -42,45 +42,7 @@ unitController.numberTranslator = (theNumber: number) => {
     return milli + ':' + micro + ':' + nano;
 };
 
-const rowHeight = 16;
-const totalHeight = timeGraph.rows.length * rowHeight;
-const rowController = new TimeGraphRowController(rowHeight, totalHeight);
-
-const axisHTMLContainer = document.createElement('div');
-axisHTMLContainer.id = 'main_axis';
-container.appendChild(axisHTMLContainer);
-
-const axisCanvas = document.createElement('canvas');
-const timeGraphAxisContainer = new TimeGraphContainer({
-    height: 30,
-    width: styleConfig.mainWidth,
-    id: timeGraph.id + '_axis',
-    backgroundColor: 0xffffff
-}, unitController, axisCanvas);
-axisHTMLContainer.appendChild(timeGraphAxisContainer.canvas);
-
-const timeAxisLayer = new TimeGraphAxis('timeGraphAxis', { color: styleConfig.naviBackgroundColor });
-timeGraphAxisContainer.addLayer(timeAxisLayer);
-
-const chartHTMLContainer = document.createElement('div');
-chartHTMLContainer.id = 'main_chart';
-container.appendChild(chartHTMLContainer);
-
-const chartCanvas = document.createElement('canvas');
-chartCanvas.tabIndex = 1;
-
-const timeGraphChartContainer = new TimeGraphContainer({
-    id: timeGraph.id + '_chart',
-    height: styleConfig.mainHeight,
-    width: styleConfig.mainWidth,
-    backgroundColor: styleConfig.chartBackgroundColor
-}, unitController, chartCanvas);
-chartHTMLContainer.appendChild(timeGraphChartContainer.canvas);
-
-const timeGraphChartGridLayer = new TimeGraphChartGrid('timeGraphGrid', rowHeight);
-timeGraphChartContainer.addLayer(timeGraphChartGridLayer);
-
-const timeGraphChart = new TimeGraphChart('timeGraphChart', {
+const providers = {
     dataProvider: (range: TimelineChart.TimeGraphRange, resolution: number) => {
         const length = range.end - range.start;
         const overlap = ((length * 20) - length) / 2;
@@ -131,8 +93,53 @@ const timeGraphChart = new TimeGraphChart('timeGraphChart', {
             lineColor: row.data && row.data.hasStates ? 0xdddddd : 0xaa4444,
             lineThickness: row.data && row.data.hasStates ? 1 : 3
         }
+    },
+    rowAnnotationStyleProvider: (annotation: TimelineChart.TimeGraphAnnotation) => {
+        return {
+            color: 0xFF0000, size: 7, symbol: 'none', verticalAlign: 'middle', opacity: 0.2
+        }
     }
-}, rowController);
+}
+
+const rowHeight = 16;
+const totalHeight = timeGraph.rows.length * rowHeight;
+const rowController = new TimeGraphRowController(rowHeight, totalHeight);
+
+const axisHTMLContainer = document.createElement('div');
+axisHTMLContainer.id = 'main_axis';
+container.appendChild(axisHTMLContainer);
+
+const axisCanvas = document.createElement('canvas');
+const timeGraphAxisContainer = new TimeGraphContainer({
+    height: 30,
+    width: styleConfig.mainWidth,
+    id: timeGraph.id + '_axis',
+    backgroundColor: 0xffffff
+}, unitController, axisCanvas);
+axisHTMLContainer.appendChild(timeGraphAxisContainer.canvas);
+
+const timeAxisLayer = new TimeGraphAxis('timeGraphAxis', { color: styleConfig.naviBackgroundColor });
+timeGraphAxisContainer.addLayer(timeAxisLayer);
+
+const chartHTMLContainer = document.createElement('div');
+chartHTMLContainer.id = 'main_chart';
+container.appendChild(chartHTMLContainer);
+
+const chartCanvas = document.createElement('canvas');
+chartCanvas.tabIndex = 1;
+
+const timeGraphChartContainer = new TimeGraphContainer({
+    id: timeGraph.id + '_chart',
+    height: styleConfig.mainHeight,
+    width: styleConfig.mainWidth,
+    backgroundColor: styleConfig.chartBackgroundColor
+}, unitController, chartCanvas);
+chartHTMLContainer.appendChild(timeGraphChartContainer.canvas);
+
+const timeGraphChartGridLayer = new TimeGraphChartGrid('timeGraphGrid', rowHeight);
+timeGraphChartContainer.addLayer(timeGraphChartGridLayer);
+
+const timeGraphChart = new TimeGraphChart('timeGraphChart', providers, rowController);
 timeGraphChartContainer.addLayer(timeGraphChart);
 
 timeGraphChart.registerStateMouseInteractions({
@@ -147,13 +154,15 @@ timeGraphChart.registerStateMouseInteractions({
 const timeGraphChartArrows = new TimeGraphChartArrows('timeGraphChartArrows', rowController);
 timeGraphChartContainer.addLayer(timeGraphChartArrows);
 timeGraphChartArrows.addArrows(timeGraph.arrows);
-
 const timeAxisCursors = new TimeGraphAxisCursors('timeGraphAxisCursors', { color: styleConfig.cursorColor });
 timeGraphAxisContainer.addLayer(timeAxisCursors);
 const timeGraphSelectionRange = new TimeGraphChartSelectionRange('chart-selection-range', { color: styleConfig.cursorColor });
 timeGraphChartContainer.addLayer(timeGraphSelectionRange);
 const timeGraphChartCursors = new TimeGraphChartCursors('chart-cursors', timeGraphChart, rowController, { color: styleConfig.cursorColor });
 timeGraphChartContainer.addLayer(timeGraphChartCursors);
+const timeGraphChartRangeEvents = new TimeGraphChartRangeEvents('timeGraphChartRangeEvents', providers, rowController);
+timeGraphChartContainer.addLayer(timeGraphChartRangeEvents);
+timeGraphChartRangeEvents.addRangeEvents(timeGraph.rangeEvents);
 
 const cursorReset = document.getElementById('cursor-reset');
 if (cursorReset) {

example/src/test-data-provider.ts

@@ -185,6 +185,24 @@ export class TestDataProvider {
         const rows: TimelineChart.TimeGraphRowModel[] = [];
         const range = opts.range || { start: 0, end: this.totalLength };
         const resolution = opts.resolution || this.totalLength / this.canvasDisplayWidth;
+        const commonRow = timeGraphStates.model.rows.find(row => row.entryId === -1);
+        const _rangeEvents = commonRow?.annotations;
+        const rangeEvents: TimelineChart.TimeGraphAnnotation[] = [];
+        const startTime = 1332170682440133097;
+        _rangeEvents?.forEach((annotation: any, annotationIndex: number) => {
+            const start = annotation.range.start - startTime;
+            if (range.start < start && range.end > start) {
+                rangeEvents.push({
+                    id: 'mark_' + -1 + '_' + annotationIndex,
+                    range: {
+                        start: annotation.range.start - this.absoluteStart,
+                        end: annotation.range.end - this.absoluteStart
+                    },
+                    label: '',
+                });
+            }
+        });
+
         timeGraphEntries.model.entries.forEach((entry: any, rowIndex: number): void => {
             const states: TimelineChart.TimeGraphState[] = [];
             const annotations: TimelineChart.TimeGraphAnnotation[] = [];
@@ -266,6 +284,7 @@ export class TestDataProvider {
             id: "",
             arrows,
             rows,
+            rangeEvents,
             totalLength: this.totalLength
         };
     }

example/src/test-states.ts

@@ -8868,6 +8868,18 @@ export const timeGraphStates = {
                         "value": -2147483648
                     }
                 ]
+            },
+            {
+                "entryId": -1,
+                "annotations": [
+                    {
+                        "range": {
+                            "start": 1332170682486039800,
+                            "end": 1332170682488039800
+                        },
+                    }
+                ],
+                "states": []
             }
         ]
     },

timeline-chart/src/components/time-graph-annotation.ts

@@ -4,13 +4,16 @@ import { TimeGraphRow } from "./time-graph-row"
 
 export interface TimeGraphAnnotationComponentOptions extends TimeGraphComponentOptions {
     position: TimeGraphElementPosition
+    width: number
+    height: number
 }
 
 export interface TimeGraphAnnotationStyle extends TimeGraphComponentOptions {
     symbol?: string
     size?: number
     color?: number
     verticalAlign?: string
+    opacity?: number
 }
 
 /*
@@ -27,8 +30,8 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent {
 
     constructor(id: string,
         protected _options: TimeGraphAnnotationComponentOptions,
-        protected _style: TimeGraphAnnotationStyle = { color: 0, size: 7, symbol: 'cross', verticalAlign: 'middle' },
-        protected _row: TimeGraphRow,
+        protected _style: TimeGraphAnnotationStyle = { color: 0, size: 7, symbol: undefined, verticalAlign: 'middle'},
+        protected _row?: TimeGraphRow,
         displayObject?: PIXI.Graphics) {
         super(id, displayObject);
         this._size = _style.size || 7;
@@ -39,6 +42,8 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent {
     update(opts: TimeGraphAnnotationComponentOptions): void {
         if (opts) {
             this._options.position.x = opts.position.x;
+            this._options.width = opts.width;
+            this._options.height = opts.height;
             this.updateYPosition();
         }
         super.update();
@@ -47,7 +52,7 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent {
     private updateYPosition() {
         const align = this._style.verticalAlign;
         const size = this._style.size;
-        if (!!size) {
+        if (!!size && this._row) {
             const offset = align == 'top' ? size : align == 'bottom' ? this._row.height - size : this._row.height / 2;
             this._options.position.y = this._row.position.y + (offset);
         }
@@ -60,6 +65,15 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent {
         const y = this._options.position.y;
 
         if (symbol === undefined || symbol == 'none') {
+            this.rect(
+                {
+                    color: this._style.color,
+                    height: this._options.height,
+                    width: this._options.width,
+                    position: this._options.position,
+                    opacity: this._style.opacity
+                }
+            )
             return;
         }
         if (symbol == 'circle') {

timeline-chart/src/layer/time-graph-chart-range-events.ts

@@ -0,0 +1,70 @@
+import { TimeGraphAnnotationComponent } from "../components/time-graph-annotation";
+import { TimelineChart } from "../time-graph-model";
+import { TimeGraphRowController } from "../time-graph-row-controller";
+import { TimeGraphChartProviders } from "./time-graph-chart";
+import { TimeGraphChartLayer } from "./time-graph-chart-layer";
+
+export class TimeGraphChartRangeEvents extends TimeGraphChartLayer {
+
+
+    protected rangeEvents: Map<TimelineChart.TimeGraphAnnotation, TimeGraphAnnotationComponent>;
+    private _updateHandler: { (): void; (viewRange: TimelineChart.TimeGraphRange): void; (viewRange: TimelineChart.TimeGraphRange): void; };
+    protected providers: TimeGraphChartProviders;
+
+    constructor(id: string, providers: TimeGraphChartProviders, rowController: TimeGraphRowController){
+        super(id,rowController);
+        this.providers = providers;
+    }
+
+    protected afterAddToContainer() {
+        this._updateHandler = (): void => this.update();
+        this.unitController.onViewRangeChanged(this._updateHandler);
+    }
+
+    protected addRangeEvent(rangeEvent: TimelineChart.TimeGraphAnnotation) {
+        const width = this.getPixels(rangeEvent.range.end - rangeEvent.range.start);
+        const height = this.stateController.canvasDisplayHeight;
+        let rangeEventComponent: TimeGraphAnnotationComponent | undefined;
+        const elementStyle = this.providers.rowAnnotationStyleProvider ? this.providers.rowAnnotationStyleProvider(rangeEvent) : undefined;
+        rangeEventComponent = new TimeGraphAnnotationComponent(rangeEvent.id, { position: { x: this.getPixels(rangeEvent.range.start - this.unitController.viewRange.start), y: 0 }, width, height }, elementStyle);
+        this.rangeEvents.set(rangeEvent, rangeEventComponent);
+        this.addChild(rangeEventComponent);
+    }
+
+    addRangeEvents(rangeEvents: TimelineChart.TimeGraphAnnotation[]): void {
+        if (!this.stateController) {
+            throw ('Add this TimeGraphChartArrows to a container before adding arrows.');
+        }
+        if (this.rangeEvents) {
+            this.removeChildren();
+        }
+        this.rangeEvents = new Map();
+        rangeEvents.forEach(rangeEvent => {
+            this.addRangeEvent(rangeEvent);
+        })
+    }
+
+    update(): void {
+        if (this.rangeEvents) {
+            for (const rangeEvent of this.rangeEvents.keys()) {
+                this.updateRangeEvent(rangeEvent);
+            }
+        }
+    }
+
+    protected updateRangeEvent(rangeEvent: TimelineChart.TimeGraphAnnotation) {
+        const rangeEventComponent = this.rangeEvents.get(rangeEvent);
+        const width = this.getPixels(rangeEvent.range.end - rangeEvent.range.start);
+        const height = this.stateController.canvasDisplayHeight;
+        if (rangeEventComponent) {
+            rangeEventComponent.update({ position: { x: this.getPixels(rangeEvent.range.start - this.unitController.viewRange.start), y: 0 }, width, height });
+        }
+    }
+
+    destroy(): void {
+        if (this.unitController) {
+            this.unitController.removeViewRangeChangedHandler(this._updateHandler);
+        }
+        super.destroy();
+    }
+}