Revert "Add lost event layer to timeline-chart"

This reverts commit ceff78b.
eclipse-cdt-cloud · May 27, 2021 · dab8c9e · dab8c9e
1 parent ceff78b
commit dab8c9e
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 204 deletions.
diff --git a/example/src/index.ts b/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,7 +42,45 @@ unitController.numberTranslator = (theNumber: number) => {
     return milli + ':' + micro + ':' + nano;
 };
 
-const providers = {
+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', {
     dataProvider: (range: TimelineChart.TimeGraphRange, resolution: number) => {
         const length = range.end - range.start;
         const overlap = ((length * 20) - length) / 2;
@@ -93,53 +131,8 @@ const providers = {
             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
-        }
     }
-}
-
-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);
+}, rowController);
 timeGraphChartContainer.addLayer(timeGraphChart);
 
 timeGraphChart.registerStateMouseInteractions({
@@ -154,15 +147,13 @@ 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) {

diff --git a/example/src/test-data-provider.ts b/example/src/test-data-provider.ts
@@ -185,24 +185,6 @@ 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[] = [];
@@ -284,7 +266,6 @@ export class TestDataProvider {
             id: "",
             arrows,
             rows,
-            rangeEvents,
             totalLength: this.totalLength
         };
     }

diff --git a/example/src/test-states.ts b/example/src/test-states.ts
@@ -8868,18 +8868,6 @@ export const timeGraphStates = {
                         "value": -2147483648
                     }
                 ]
-            },
-            {
-                "entryId": -1,
-                "annotations": [
-                    {
-                        "range": {
-                            "start": 1332170682486039800,
-                            "end": 1332170682488039800
-                        },
-                    }
-                ],
-                "states": []
             }
         ]
     },

diff --git a/timeline-chart/src/components/time-graph-annotation.ts b/timeline-chart/src/components/time-graph-annotation.ts
@@ -4,16 +4,13 @@ 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
 }
 
 /*
@@ -30,8 +27,8 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent {
 
     constructor(id: string,
         protected _options: TimeGraphAnnotationComponentOptions,
-        protected _style: TimeGraphAnnotationStyle = { color: 0, size: 7, symbol: undefined, verticalAlign: 'middle'},
-        protected _row?: TimeGraphRow,
+        protected _style: TimeGraphAnnotationStyle = { color: 0, size: 7, symbol: 'cross', verticalAlign: 'middle' },
+        protected _row: TimeGraphRow,
         displayObject?: PIXI.Graphics) {
         super(id, displayObject);
         this._size = _style.size || 7;
@@ -42,8 +39,6 @@ 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();
@@ -52,7 +47,7 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent {
     private updateYPosition() {
         const align = this._style.verticalAlign;
         const size = this._style.size;
-        if (!!size && this._row) {
+        if (!!size) {
             const offset = align == 'top' ? size : align == 'bottom' ? this._row.height - size : this._row.height / 2;
             this._options.position.y = this._row.position.y + (offset);
         }
@@ -65,15 +60,6 @@ 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') {

diff --git a/timeline-chart/src/layer/time-graph-chart-range-events.ts b/timeline-chart/src/layer/time-graph-chart-range-events.ts