Changes to support tooltip for annotations

Add model to TimeGraphComponent using generics. Store the model for state, annotation, arrow and row components. Change TimeGraphStateMouseInteractions to TimeGraphMouseInteractions so that they can be added to any TimeGraphComponent. Add element interactions to each annotation component. Add category to the TimeGraphAnnotation model. Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
eclipse-cdt-cloud · Jun 10, 2021 · 031e5b5 · 031e5b5
1 parent a884737
commit 031e5b5
Show file tree

Hide file tree

Showing 18 changed files with 118 additions and 65 deletions.
diff --git a/example/src/index.ts b/example/src/index.ts
@@ -97,7 +97,11 @@ const providers = {
     },
     rowAnnotationStyleProvider: (annotation: TimelineChart.TimeGraphAnnotation) => {
         return {
-            color: 0xFF0000, size: 7, symbol: 'none', verticalAlign: 'middle', opacity: 0.2
+            color: annotation.data?.color,
+            size: 7 * (annotation.data && annotation.data.height ? annotation.data.height : 1.0),
+            symbol: annotation.data?.symbol,
+            verticalAlign: annotation.data?.verticalAlign,
+            opacity: annotation.data?.opacity
         }
     }
 }
@@ -143,12 +147,21 @@ timeGraphChartContainer.addLayer(timeGraphChartGridLayer);
 const timeGraphChart = new TimeGraphChart('timeGraphChart', providers, rowController);
 timeGraphChartContainer.addLayer(timeGraphChart);
 
-timeGraphChart.registerStateMouseInteractions({
+timeGraphChart.registerMouseInteractions({
     click: el => {
-        console.log(el.model.label);
-        if (el.model.data) {
-            console.log(el.model.data.timeRange);
-        }
+        console.log('click: ' + el.constructor.name + ' : ' + JSON.stringify(el.model));
+    },
+    mouseover: el => {
+        console.log('mouseover: ' + el.constructor.name + ' : ' + JSON.stringify(el.model));
+    },
+    mouseout: el => {
+        console.log('mouseout: ' + el.constructor.name + ' : ' + JSON.stringify(el.model));
+    },
+    mousedown: el => {
+        console.log('mousedown: ' + el.constructor.name + ' : ' + JSON.stringify(el.model));
+    },
+    mouseup: el => {
+        console.log('mouseup: ' + el.constructor.name + ' : ' + JSON.stringify(el.model));
     }
 });
 

diff --git a/example/src/test-data-provider.ts b/example/src/test-data-provider.ts
@@ -193,12 +193,14 @@ export class TestDataProvider {
             const start = annotation.range.start - startTime;
             if (range.start < start && range.end > start) {
                 rangeEvents.push({
-                    id: 'mark_' + -1 + '_' + annotationIndex,
+                    id: annotation.id,
+                    category: annotation.category,
                     range: {
                         start: annotation.range.start - this.absoluteStart,
                         end: annotation.range.end - this.absoluteStart
                     },
-                    label: '',
+                    label: annotation.label,
+                    data: annotation.data
                 });
             }
         });
@@ -239,12 +241,14 @@ export class TestDataProvider {
                         const start = annotation.range.start - entry.startTime;
                         if (range.start < start && range.end > start) {
                             annotations.push({
-                                id: 'mark_' + rowIndex + '_' + annotationIndex,
+                                id: annotation.id,
+                                category: annotation.category,
                                 range: {
                                     start: annotation.range.start - this.absoluteStart,
                                     end: annotation.range.end - this.absoluteStart
                                 },
-                                label: '',
+                                label: annotation.label,
+                                data: annotation.data
                             });
                         }
                     });

diff --git a/example/src/test-states.ts b/example/src/test-states.ts
@@ -547,9 +547,16 @@ export const timeGraphStates = {
                 ],
                 "annotations": [
                     {
+                        "id": "symbol_1_0",
+                        "category": "symbol marker",
+                        "label": "symbol",
                         "range": {
                             "start": 1332170682486039800,
                             "end": 1332170682486039800
+                        },
+                        "data": {
+                            "symbol": "diamond",
+                            "color": 0xff00ff
                         }
                     }
                 ]
@@ -558,9 +565,16 @@ export const timeGraphStates = {
                 "entryID": 2,
                 "annotations": [
                     {
+                        "id": "symbol_2_0",
+                        "category": "symbol marker",
+                        "label": "symbol",
                         "range": {
                             "start": 1332170682497734100,
                             "end": 1332170682497734100
+                        },
+                        "data": {
+                            "symbol": "diamond",
+                            "color": 0xff00ff
                         }
                     }
                 ],
@@ -8873,10 +8887,17 @@ export const timeGraphStates = {
                 "entryId": -1,
                 "annotations": [
                     {
+                        "id": "range_0",
+                        "category": "range marker",
+                        "label": "range",
                         "range": {
                             "start": 1332170682486039800,
                             "end": 1332170682488039800
                         },
+                        "data": {
+                            "color": 0xff0000,
+                            "opacity": 0.2
+                        }
                     }
                 ],
                 "states": []

diff --git a/timeline-chart/src/components/time-graph-annotation.ts b/timeline-chart/src/components/time-graph-annotation.ts
@@ -1,4 +1,5 @@
 import * as PIXI from "pixi.js-legacy"
+import { TimelineChart } from "../time-graph-model";
 import { TimeGraphComponent, TimeGraphElementPosition, TimeGraphComponentOptions } from "./time-graph-component";
 import { TimeGraphRow } from "./time-graph-row"
 
@@ -17,7 +18,7 @@ export interface TimeGraphAnnotationStyle extends TimeGraphComponentOptions {
 /*
  * This is only implementing a subset of the tick elements so far
  */
-export class TimeGraphAnnotationComponent extends TimeGraphComponent {
+export class TimeGraphAnnotationComponent extends TimeGraphComponent<TimelineChart.TimeGraphAnnotation> {
 
     // TODO: make a map of the display objects
     // e.g. cross-14-black-middle etc...
@@ -27,11 +28,12 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent {
     protected _size: number;
 
     constructor(id: string,
+        model: TimelineChart.TimeGraphAnnotation,
         protected _options: TimeGraphAnnotationComponentOptions,
         protected _style: TimeGraphAnnotationStyle = { color: 0, size: 7, symbol: 'cross', verticalAlign: 'middle' },
         protected _row: TimeGraphRow,
         displayObject?: PIXI.Graphics) {
-        super(id, displayObject);
+        super(id, displayObject, model);
         this._size = _style.size || 7;
         // called to ensure consistency. Only the X component is used from options.
         this.update(_options);
@@ -45,6 +47,10 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent {
         super.update();
     }
 
+    get row(): TimeGraphRow {
+        return this._row;
+    }
+
     private updateYPosition() {
         const align = this._style.verticalAlign;
         const size = this._style.size;

diff --git a/timeline-chart/src/components/time-graph-arrow.ts b/timeline-chart/src/components/time-graph-arrow.ts
@@ -1,18 +1,21 @@
 import * as PIXI from "pixi.js-legacy"
 
+import { TimelineChart } from "../time-graph-model";
 import { TimeGraphComponent, TimeGraphElementPosition, TimeGraphComponentOptions } from "./time-graph-component";
 
 export interface TimeGraphArrowCoordinates extends TimeGraphComponentOptions {
     start: TimeGraphElementPosition
     end: TimeGraphElementPosition
 }
 
-export class TimeGraphArrowComponent extends TimeGraphComponent {
+export class TimeGraphArrowComponent extends TimeGraphComponent<TimelineChart.TimeGraphArrow> {
 
     protected head: PIXI.Graphics;
 
-    constructor(id: string, protected _options: TimeGraphArrowCoordinates) {
-        super(id);
+    constructor(id: string,
+        model: TimelineChart.TimeGraphArrow,
+        protected _options: TimeGraphArrowCoordinates) {
+        super(id, undefined, model);
 
         this.head = new PIXI.Graphics();
     }

diff --git a/timeline-chart/src/components/time-graph-axis-cursor.ts b/timeline-chart/src/components/time-graph-axis-cursor.ts
@@ -5,7 +5,7 @@ export interface TimeGraphAxisCursorOptions extends TimeGraphComponentOptions {
     color: number
 }
 
-export class TimeGraphAxisCursor extends TimeGraphComponent {
+export class TimeGraphAxisCursor extends TimeGraphComponent<null> {
 
     constructor(protected _options: TimeGraphAxisCursorOptions) {
         super('cursor');

diff --git a/timeline-chart/src/components/time-graph-axis-scale.ts b/timeline-chart/src/components/time-graph-axis-scale.ts
@@ -10,7 +10,7 @@ export interface TimeGraphAxisStyle extends TimeGraphStyledRect {
     lineColor?: number
 }
 
-export class TimeGraphAxisScale extends TimeGraphComponent {
+export class TimeGraphAxisScale extends TimeGraphComponent<null> {
 
     protected mouseStartY: number;
     protected mouseStartX: number;

diff --git a/timeline-chart/src/components/time-graph-component.ts b/timeline-chart/src/components/time-graph-component.ts
@@ -34,17 +34,21 @@ export type TimeGraphHorizontalLine = TimeGraphHorizontalElement & TimeGraphLine
 export type TimeGraphVerticalLine = TimeGraphVerticalElement & TimeGraphLineStyle;
 
 export interface TimeGraphParentComponent {
-    addChild(child: TimeGraphComponent): void;
+    addChild(child: TimeGraphComponent<any>): void;
 }
 
-export abstract class TimeGraphComponent {
+export abstract class TimeGraphComponent<T> {
     protected _displayObject: PIXI.Graphics;
+    protected _model: T;
     protected _options: TimeGraphComponentOptions;
 
     protected graphicsData: PIXI.GraphicsData;
 
-    constructor(protected _id: string, displayObject?: PIXI.Graphics) {
+    constructor(protected _id: string, displayObject?: PIXI.Graphics, model?: T) {
         this._displayObject = displayObject || new PIXI.Graphics();
+        if (model) {
+            this._model = model;
+        }
     }
 
     get id(): string {
@@ -55,6 +59,10 @@ export abstract class TimeGraphComponent {
         return this._displayObject;
     }
 
+    get model(): T {
+        return this._model;
+    }
+
     clear() {
         this._displayObject.clear();
     }

diff --git a/timeline-chart/src/components/time-graph-cursor.ts b/timeline-chart/src/components/time-graph-cursor.ts
@@ -7,7 +7,7 @@ export interface TimeGraphCursorOptions {
     thickness?: number
 }
 
-export class TimeGraphCursor extends TimeGraphComponent{
+export class TimeGraphCursor extends TimeGraphComponent<null> {
     constructor(opts: TimeGraphCursorOptions){
         super('cursor');
         this._options = opts;

diff --git a/timeline-chart/src/components/time-graph-rectangle.ts b/timeline-chart/src/components/time-graph-rectangle.ts
@@ -1,6 +1,6 @@
 import { TimeGraphComponent, TimeGraphStyledRect } from "./time-graph-component";
 
-export class TimeGraphRectangle extends TimeGraphComponent {
+export class TimeGraphRectangle extends TimeGraphComponent<null> {
     protected _options: TimeGraphStyledRect;
 
     constructor(protected opts: TimeGraphStyledRect) {

diff --git a/timeline-chart/src/components/time-graph-row.ts b/timeline-chart/src/components/time-graph-row.ts
@@ -10,17 +10,17 @@ export interface TimeGraphRowStyle {
     lineOpacity?: number
 }
 
-export class TimeGraphRow extends TimeGraphComponent implements TimeGraphParentComponent {
+export class TimeGraphRow extends TimeGraphComponent<TimelineChart.TimeGraphRowModel> implements TimeGraphParentComponent {
 
     protected states: TimeGraphStateComponent[] = [];
 
     constructor(
         id: string,
         protected _options: TimeGraphStyledRect,
         protected _rowIndex: number,
-        public readonly model: TimelineChart.TimeGraphRowModel,
+        model: TimelineChart.TimeGraphRowModel,
         protected _style: TimeGraphRowStyle = { lineOpacity: 0.5, lineThickness: 1, backgroundOpacity: 0 }) {
-        super(id);
+        super(id, undefined, model);
     }
 
     get rowIndex(): number {

diff --git a/timeline-chart/src/components/time-graph-state.ts b/timeline-chart/src/components/time-graph-state.ts
@@ -11,7 +11,7 @@ export interface TimeGraphStateStyle {
     borderColor?: number
 }
 
-export class TimeGraphStateComponent extends TimeGraphComponent {
+export class TimeGraphStateComponent extends TimeGraphComponent<TimelineChart.TimeGraphState> {
 
     protected _height: number;
     protected _position: TimeGraphElementPosition;
@@ -21,14 +21,14 @@ export class TimeGraphStateComponent extends TimeGraphComponent {
 
     constructor(
         id: string,
-        protected _model: TimelineChart.TimeGraphState,
+        model: TimelineChart.TimeGraphState,
         protected range: TimelineChart.TimeGraphRange,
         protected _row: TimeGraphRow,
         protected _style: TimeGraphStateStyle = { color: 0xfffa66, height: 14 },
         protected displayWidth: number,
         displayObject?: PIXI.Graphics
     ) {
-        super(id, displayObject);
+        super(id, displayObject, model);
         this._height = _style.height || 14;
         this._height = _row.height === 0 ? 0 : Math.min(this._height, _row.height - 1);
         this._position = {
@@ -50,7 +50,7 @@ export class TimeGraphStateComponent extends TimeGraphComponent {
     }
 
     renderLabel() {
-        if (!this._model.label) {
+        if (!this.model.label) {
             return;
         }
         const fontName = TimeGraphStateComponent.fontController.getFontName(this._options.color ? this._options.color : 0, this._options.height - 2) ||
@@ -60,13 +60,13 @@ export class TimeGraphStateComponent extends TimeGraphComponent {
             y: this._options.position.y
         }
         const displayWidth = this._options.displayWidth ? this._options.displayWidth : 0;
-        const labelText = this._model.label;
+        const labelText = this.model.label;
         const textPadding = 0.5;
         if (displayWidth < 3) {
             this.clearLabel();
             return;
         }
-        const textObj = new PIXI.BitmapText(this._model.label, { fontName: fontName });
+        const textObj = new PIXI.BitmapText(this.model.label, { fontName: fontName });
         const textWidth = textObj.getLocalBounds().width;
         let textObjX = position.x + textPadding;
         const textObjY = position.y + textPadding;
@@ -88,7 +88,7 @@ export class TimeGraphStateComponent extends TimeGraphComponent {
             this.clearLabel();
             return;
         }
-        if (displayLabel === this._model.label) {
+        if (displayLabel === this.model.label) {
             textObj.x = textObjX;
             textObj.y = textObjY;
             this.displayObject.addChild(textObj);
@@ -113,10 +113,6 @@ export class TimeGraphStateComponent extends TimeGraphComponent {
         return this._position;
     }
 
-    get model(): TimelineChart.TimeGraphState {
-        return this._model;
-    }
-
     get row(): TimeGraphRow {
         return this._row;
     }

diff --git a/timeline-chart/src/layer/time-graph-chart-arrows.ts b/timeline-chart/src/layer/time-graph-chart-arrows.ts
@@ -32,7 +32,7 @@ export class TimeGraphChartArrows extends TimeGraphChartLayer {
 
     protected addArrow(arrow: TimelineChart.TimeGraphArrow) {
         const coords = this.getCoordinates(arrow);
-        const arrowComponent = new TimeGraphArrowComponent('arrow', coords);
+        const arrowComponent = new TimeGraphArrowComponent('arrow', arrow, coords);
         this.arrows.set(arrow, arrowComponent);
         this.addChild(arrowComponent);
     }