Table: Highlight row on shared crosshair #78392

mdvictor · 2023-11-20T13:21:05Z

What is this feature?

Adds shared crosshair support to the table panel. If the table has a time field, it will be able to highlight rows based on it and will also set the crosshair on the equivalent datapoint in other panels (e.g.: timeseries) on row hover.

Screen.Recording.2023-11-16.at.13.07.13.mov

Why do we need this feature?

Enhance table panel functionality.

Who is this feature for?

Everyone

Which issue(s) does this PR fix?:

Fixes #7310

Special notes for your reviewer:

TODO:

Add feature toggle

Please check that:

It works as expected from a user's perspective.
If this is a pre-GA feature, it is behind a feature toggle.
The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

packages/grafana-ui/src/components/Table/utils.ts

mdvictor · 2023-11-21T17:01:17Z

The DataHoverEvent also seems to send a rowIndex param which can be useful when the same dataFrame is used for a table panel and, let's say a timeseries panel. Or when two dataframes are similar (e.g: have the same time field values and order). If the time field order doesn't match in the table, we fall back to searching the time value of the hovered point in a timeseries chart in the table rows and highlight a row if we find a match.

oscarkilhed

Nice! Take a look at the debounceTime comment, after addressing that I think this is good to go. 🎉

oscarkilhed · 2023-11-22T09:22:20Z

public/app/plugins/panel/table/TablePanel.tsx

+    subs.add(
+      panelContext.eventBus
+        .getStream(DataHoverEvent)
+        .pipe(throttleTime(50))


I would suggest replacing throttleTime with debounceTime and increasing the timeout to something like 250-500 ms.

throttleTime will take one event and ignore the rest for 50 milliseconds. debounceTime will ignore events until there hasn't been a new event in 50 milliseconds.

throttleTime has the effect that if a user drags his/her mouse over a bunch of points and then stops, it might not be the point the mouse is over when the users stops dragging.

debounceTime has the effect that if the user drags over a bunch of points they will be ignored until the mouse is stopped.

Great idea! Will look into that, thank you!

I've tested out the debounceTime function but it adds a weird delay into the mix. My understanding of this func is that it only emits a value after a given time period passes without any new emits. So hovering over a point in a graph will result in a row highlight only after the timeout passes with no new events(e.g.: after half a second for debounceTime(500)).

I would leave the throttle as it is to be in sync with how GraphNG deals with DataHoverEvent.

I think the delay is something we would want here, the constant redrawing of the table is quite resource intense. Maybe lower the debounceTime from 500 to 100-200? Even if we just set it to 50 ms, debounceTime is going to highlight the correct point every time the mouse stops. With throttleTime, when the mouse stops on a point in the graph, the highlighted row is going to correspond to what was hovered 50ms ago, not what the mouse is currently hovering.

throttleTime might look better, but it's producing wrong results

That makes sense, i agree. Switched to a debounceTime of 100.

@torkelo wants to switch the default to setting of dashboards to shared cursor, so performance here will be important.

#78636

i think we already throttle these eventbus events during emission. i think adding a second level of thottling wont be too good. maybe we can just increase the throttle time during emission?

oscarkilhed · 2023-11-22T09:25:42Z

packages/grafana-ui/src/components/Table/utils.ts

+export function calculateAroundPointThreshold(timeField: Field): number {
+  let max = -Number.MAX_VALUE;
+  let min = Number.MAX_VALUE;
+
+  if (timeField.values.length < 2) {
+    return 0;
+  }
+
+  for (let i = 0; i < timeField.values.length; i++) {
+    const value = timeField.values[i];
+    if (value > max) {
+      max = value;
+    }
+    if (value < min) {
+      min = value;
+    }
+  }
+
+  return (max - min) / timeField.values.length;
+}


This works a lot better! 🥇

mdvictor · 2023-11-27T17:37:50Z

i guess i wasn't remembering this correctly, we don't throttle the publish, just the subscribe 😞

https://github.com/grafana/grafana/blob/main/public/app/core/components/GraphNG/GraphNG.tsx

Any hints/tips?

this might be a tough one to fix with React's rendering model if it has to re-render the whole table. i think there might be some big wins from extracting RenderRow() into its own component that's carefully wrapped with React.memo. cc @gtk-grafana

https://github.com/grafana/grafana/blob/main/packages/grafana-ui/src/components/Table/Table.tsx#L241-L290

@leeoniya I think memoing rows won't work because of the virtualised list. It only renders what is in the table view, so the index will keep updating as you scroll, or as the dataHoverEvent picks a new hover row and scrolls there. I've broken the row list part in a new component which rerenders on row hover but leaves the rest of the table alone, same as with a simple table scroll, so I think this should work performance-wise. There's still more stuff that could be moved from the parent component in here (e.g.: the actual RenderRow method), to better break the component. Overall, I think this could be a way forward.

mdvictor · 2023-11-27T17:39:58Z

public/app/plugins/panel/table/TablePanel.tsx

+      onRowHover={config.featureToggles.tableSharedCrosshair ? onRowHover : undefined}
+      onRowLeave={config.featureToggles.tableSharedCrosshair ? onRowLeave : undefined}
+      enableSharedCrosshair={config.featureToggles.tableSharedCrosshair && enableSharedCrosshair}
+      eventBus={panelContext.eventBus}


I'm thinking that this can be also used in other places, potentially? Otherwise we could drop this prop and call the one in usePanelContext() within RowsList

I don't think ever should think of that , if visualizations are used outside a panel they need to be wrapped in PanelContext at least to access those features that use it

mdvictor · 2023-11-27T17:42:30Z

packages/grafana-ui/src/components/Table/types.ts

+  onRowHover?: (idx: number, frame: DataFrame) => void;
+  onRowLeave?: () => void;
+  /** Used to highlight a row at a given index */
+  rowHighlightIndex?: number;


This can be used standalone to highlight a row in some other scenarios. If set it overwrites the one received through the data hover event. Not sure if could be useful or if it's too much.

leeoniya · 2023-11-28T19:46:41Z

seeing some weird data flashing/changing in this test dashboard. is it trying to scroll the virtualized table to the row? but then stops working once it gets far enough in time?

table-shared-crosshair-perf.json

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 1,
  "id": 850,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "datasource": {
        "type": "grafana-testdata-datasource",
        "uid": "PD8C576611E62080A"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "thresholds"
          },
          "custom": {
            "align": "auto",
            "cellOptions": {
              "type": "auto"
            },
            "inspect": false
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": []
      },
      "gridPos": {
        "h": 15,
        "w": 22,
        "x": 0,
        "y": 0
      },
      "id": 2,
      "options": {
        "cellHeight": "sm",
        "footer": {
          "countRows": false,
          "fields": "",
          "reducer": [
            "sum"
          ],
          "show": false
        },
        "showHeader": true
      },
      "pluginVersion": "10.3.0-pre",
      "targets": [
        {
          "datasource": {
            "type": "grafana-testdata-datasource",
            "uid": "PD8C576611E62080A"
          },
          "refId": "A",
          "scenarioId": "random_walk",
          "seriesCount": 7
        }
      ],
      "title": "Panel Title",
      "transformations": [
        {
          "id": "joinByField",
          "options": {}
        }
      ],
      "type": "table"
    },
    {
      "datasource": {
        "type": "grafana-testdata-datasource",
        "uid": "PD8C576611E62080A"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "palette-classic"
          },
          "custom": {
            "axisBorderShow": false,
            "axisCenteredZero": false,
            "axisColorMode": "text",
            "axisLabel": "",
            "axisPlacement": "auto",
            "barAlignment": 0,
            "drawStyle": "line",
            "fillOpacity": 0,
            "gradientMode": "none",
            "hideFrom": {
              "legend": false,
              "tooltip": false,
              "viz": false
            },
            "insertNulls": false,
            "lineInterpolation": "linear",
            "lineWidth": 1,
            "pointSize": 5,
            "scaleDistribution": {
              "type": "linear"
            },
            "showPoints": "auto",
            "spanNulls": false,
            "stacking": {
              "group": "A",
              "mode": "none"
            },
            "thresholdsStyle": {
              "mode": "off"
            }
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": []
      },
      "gridPos": {
        "h": 17,
        "w": 22,
        "x": 0,
        "y": 15
      },
      "id": 1,
      "options": {
        "legend": {
          "calcs": [],
          "displayMode": "list",
          "placement": "bottom",
          "showLegend": true
        },
        "tooltip": {
          "mode": "single",
          "sort": "none"
        }
      },
      "targets": [
        {
          "datasource": {
            "type": "grafana-testdata-datasource",
            "uid": "PD8C576611E62080A"
          },
          "refId": "A",
          "scenarioId": "random_walk",
          "seriesCount": 1
        }
      ],
      "title": "Panel Title",
      "type": "timeseries"
    }
  ],
  "refresh": "",
  "schemaVersion": 39,
  "tags": [],
  "templating": {
    "list": []
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "table-shared-crosshair-perf",
  "uid": "fa36a3f9-9b0f-49b7-97cf-f5f721bb5867",
  "version": 3,
  "weekStart": ""
}

Peek.2023-11-28.13-44.mp4

codeincarnate · 2023-11-22T18:26:36Z

public/app/plugins/panel/table/TablePanel.tsx

+    subs.add(
+      panelContext.eventBus
+        .getStream(DataHoverClearEvent)
+        .pipe(throttleTime(50))


Seems like this should also be debounced

Not sure about this per Leon's comment, but maybe?

Yeah, I think this should be debounced! Thank you for pointing it out, will work on it! 🎉

codeincarnate · 2023-11-22T18:29:11Z

packages/grafana-ui/src/components/Table/utils.ts

@@ -533,3 +533,37 @@ export function getAlignmentFactor(
    return alignmentFactor;
  }
 }
+
+export function hasTimeField(data: DataFrame): boolean {


I think this should probably be in @grafana/data as we have functions like this there already

torkelo · 2023-11-29T07:23:28Z

public/app/plugins/panel/table/TablePanel.tsx

+
+      const timeField: Field = frame!.fields.find((f) => f.type === FieldType.time)!;
+
+      panelContext.eventBus.publish(


It feels a bit complex to have logic split between internal Table component and the outer TablePanel.

Can't it all be on handled inside the table component, any benefit to having the subscribe there and the publish here ?

I agree, there's no point in having this here. I must've overlooked this bit of code after the table breakdown. Will move it accordingly.

mdvictor · 2023-11-29T12:02:36Z

seeing some weird data flashing/changing in this test dashboard. is it trying to scroll the virtualized table to the row? but then stops working once it gets far enough in time?

table-shared-crosshair-perf.json
Peek.2023-11-28.13-44.mp4

@leeoniya are you referring to the weird hover at the row in the middle of the view? It should scroll to the hovered row at all times, shouldn't stop when it gets far enough in time. Need to look more into that, might need to raise the debounce potentially.

leeoniya

👍

mdvictor added 4 commits November 14, 2023 14:43

bidirectional shared crosshair table WIP

ba93b8f

add shared crosshair to table panel

9b5fef0

lower around point threshold

3ada8a1

Merge branch 'main' into mdvictor/table-ts-shared-crosshair

7192b2a

mdvictor added area/panel/table add to changelog no-backport Skip backport of PR labels Nov 20, 2023

mdvictor added this to the 10.2.x milestone Nov 20, 2023

mdvictor self-assigned this Nov 20, 2023

mdvictor requested review from a team, codeincarnate, oscarkilhed and baldm0mma and removed request for a team November 20, 2023 13:21

grafana-delivery-bot bot modified the milestones: 10.2.x, 10.3.x Nov 20, 2023

grafana-pr-automation bot added the area/frontend label Nov 20, 2023

add feature toggle

ce60e42

mdvictor requested review from grafanabot and a team as code owners November 20, 2023 14:41

grafana-pr-automation bot added type/docs area/backend labels Nov 20, 2023

oscarkilhed reviewed Nov 20, 2023

View reviewed changes

packages/grafana-ui/src/components/Table/utils.ts Outdated Show resolved Hide resolved

mdvictor requested a review from leeoniya November 20, 2023 16:03

mdvictor added 2 commits November 21, 2023 14:57

add index based verification

42c0fc6

add adaptive threshold

aba84bc

mdvictor requested a review from oscarkilhed November 21, 2023 17:02

oscarkilhed reviewed Nov 22, 2023

View reviewed changes

switch to debounceTime

d6cb27c

re-render only rows list on data hover event

8620cf5

mdvictor commented Nov 27, 2023

View reviewed changes

mdvictor requested a review from torkelo November 27, 2023 17:49

mdvictor added 2 commits November 28, 2023 11:29

further break down table component

619fee1

Merge branch 'main' into mdvictor/table-ts-shared-crosshair

e3a5008

codeincarnate reviewed Nov 28, 2023

View reviewed changes

torkelo reviewed Nov 29, 2023

View reviewed changes

refactor

820a103

mdvictor requested review from a team as code owners November 29, 2023 11:21

mdvictor requested review from Clarity-89, L-M-K-B and mckn and removed request for a team November 29, 2023 11:21

Merge branch 'main' into mdvictor/table-ts-shared-crosshair

ef3529e

leeoniya mentioned this pull request Dec 1, 2023

Expose shared tooltip/crosshair's timestamp as variable #78948

Open

mdvictor requested a review from torkelo December 11, 2023 16:24

mdvictor added 3 commits December 12, 2023 16:22

raise debounce time

e9df5f3

Merge branch 'main' into mdvictor/table-ts-shared-crosshair

c2d53ae

fix build

797c8f4

leeoniya approved these changes Dec 13, 2023

View reviewed changes

mdvictor merged commit 5aff338 into main Dec 13, 2023
19 checks passed

mdvictor deleted the mdvictor/table-ts-shared-crosshair branch December 13, 2023 09:33

summerwollin modified the milestones: 10.3.x, 10.3.0 Jan 22, 2024

leeoniya mentioned this pull request Feb 28, 2024

Remove old tooltips and annotations #83632

Closed

51 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Table: Highlight row on shared crosshair #78392

Table: Highlight row on shared crosshair #78392

mdvictor commented Nov 20, 2023 •

edited by oscarkilhed

mdvictor commented Nov 21, 2023

oscarkilhed left a comment

oscarkilhed Nov 22, 2023

mdvictor Nov 22, 2023

mdvictor Nov 23, 2023

oscarkilhed Nov 23, 2023 •

edited

mdvictor Nov 23, 2023

leeoniya Nov 24, 2023

leeoniya Nov 24, 2023

oscarkilhed Nov 22, 2023

mdvictor commented Nov 27, 2023 •

edited

mdvictor Nov 27, 2023

torkelo Nov 29, 2023

mdvictor Nov 27, 2023

leeoniya commented Nov 28, 2023 •

edited

codeincarnate Nov 22, 2023

codeincarnate Nov 28, 2023

mdvictor Nov 29, 2023

codeincarnate Nov 22, 2023

torkelo Nov 29, 2023

mdvictor Nov 29, 2023

mdvictor commented Nov 29, 2023

leeoniya left a comment


		const timeField: Field = frame!.fields.find((f) => f.type === FieldType.time)!;

		panelContext.eventBus.publish(

Table: Highlight row on shared crosshair #78392

Table: Highlight row on shared crosshair #78392

Conversation

mdvictor commented Nov 20, 2023 • edited by oscarkilhed

mdvictor commented Nov 21, 2023

oscarkilhed left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oscarkilhed Nov 23, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mdvictor commented Nov 27, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leeoniya commented Nov 28, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mdvictor commented Nov 29, 2023

leeoniya left a comment

Choose a reason for hiding this comment

mdvictor commented Nov 20, 2023 •

edited by oscarkilhed

oscarkilhed Nov 23, 2023 •

edited

mdvictor commented Nov 27, 2023 •

edited

leeoniya commented Nov 28, 2023 •

edited