Merge branch 'main' into task-manager/unregistered-task-types

elastic · Feb 3, 2022 · 0c40a92 · 0c40a92
2 parents ed31d92 + f6a6c8a
commit 0c40a92
Show file tree

Hide file tree

Showing 53 changed files with 1,123 additions and 561 deletions.
diff --git a/docs/CHANGELOG.asciidoc b/docs/CHANGELOG.asciidoc
@@ -20,8 +20,6 @@ Review important information about the {kib} 8.0.0 releases.
 [[release-notes-8.0.0-rc2]]
 == {kib} 8.0.0-rc2
 
-coming::[8.0.0-rc2]
-
 For information about the {kib} 8.0.0-rc2 release, review the following information.
 
 [float]

diff --git a/src/plugins/chart_expressions/expression_heatmap/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_heatmap/common/types/expression_renderers.ts
@@ -32,6 +32,7 @@ export type HeatmapRenderProps = HeatmapExpressionProps & {
   onSelectRange: (data: BrushEvent['data']) => void;
   paletteService: PaletteRegistry;
   uiState: PersistedState;
+  interactive: boolean;
 };
 
 export interface ColorStop {

diff --git a/...plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx b/...plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx
@@ -99,6 +99,7 @@ describe('HeatmapComponent', function () {
       onSelectRange: jest.fn(),
       paletteService: palettesRegistry,
       formatFactory: formatService.deserialize,
+      interactive: true,
     };
   });
 
@@ -266,4 +267,10 @@ describe('HeatmapComponent', function () {
     ]);
     expect(wrapperProps.onClickValue).toHaveBeenCalled();
   });
+
+  it('does not add callbacks when not interactive', () => {
+    const component = shallowWithIntl(<HeatmapComponent {...wrapperProps} interactive={false} />);
+    expect(component.find(Settings).first().prop('onElementClick')).toBeUndefined();
+    expect(component.find(Settings).first().prop('onBrushEnd')).toBeUndefined();
+  });
 });
diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
@@ -135,6 +135,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
     onSelectRange,
     paletteService,
     uiState,
+    interactive,
   }) => {
     const chartTheme = chartsThemeService.useChartsTheme();
     const isDarkTheme = chartsThemeService.useDarkMode();
@@ -145,12 +146,15 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
     });
 
     const toggleLegend = useCallback(() => {
+      if (!interactive) {
+        return;
+      }
       setShowLegend((value) => {
         const newValue = !value;
         uiState?.set?.('vis.legendOpen', newValue);
         return newValue;
       });
-    }, [uiState]);
+    }, [uiState, interactive]);
 
     const setColor = useCallback(
       (newColor: string | null, seriesLabel: string | number) => {
@@ -302,77 +306,30 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
       };
     });
 
-    const onElementClick = ((e: HeatmapElementEvent[]) => {
-      const cell = e[0][0];
-      const { x, y } = cell.datum;
-
-      const xAxisFieldName = xAxisColumn?.meta?.field;
-      const timeFieldName = isTimeBasedSwimLane ? xAxisFieldName : '';
-
-      const points = [
-        {
-          row: table.rows.findIndex((r) => r[xAxisColumn.id] === x),
-          column: xAxisColumnIndex,
-          value: x,
-        },
-        ...(yAxisColumn
-          ? [
-              {
-                row: table.rows.findIndex((r) => r[yAxisColumn.id] === y),
-                column: yAxisColumnIndex,
-                value: y,
-              },
-            ]
-          : []),
-      ];
-
-      const context: FilterEvent['data'] = {
-        data: points.map((point) => ({
-          row: point.row,
-          column: point.column,
-          value: point.value,
-          table,
-        })),
-        timeFieldName,
-      };
-      onClickValue(context);
-    }) as ElementClickListener;
-
-    const onBrushEnd = (e: HeatmapBrushEvent) => {
-      const { x, y } = e;
+    const onElementClick = useCallback(
+      (e: HeatmapElementEvent[]) => {
+        const cell = e[0][0];
+        const { x, y } = cell.datum;
 
-      const xAxisFieldName = xAxisColumn?.meta?.field;
-      const timeFieldName = isTimeBasedSwimLane ? xAxisFieldName : '';
+        const xAxisFieldName = xAxisColumn?.meta?.field;
+        const timeFieldName = isTimeBasedSwimLane ? xAxisFieldName : '';
 
-      if (isTimeBasedSwimLane) {
-        const context: BrushEvent['data'] = {
-          range: x as number[],
-          table,
-          column: xAxisColumnIndex,
-          timeFieldName,
-        };
-        onSelectRange(context);
-      } else {
-        const points: Array<{ row: number; column: number; value: string | number }> = [];
-
-        if (yAxisColumn) {
-          (y as string[]).forEach((v) => {
-            points.push({
-              row: table.rows.findIndex((r) => r[yAxisColumn.id] === v),
-              column: yAxisColumnIndex,
-              value: v,
-            });
-          });
-        }
-        if (xAxisColumn) {
-          (x as string[]).forEach((v) => {
-            points.push({
-              row: table.rows.findIndex((r) => r[xAxisColumn.id] === v),
-              column: xAxisColumnIndex,
-              value: v,
-            });
-          });
-        }
+        const points = [
+          {
+            row: table.rows.findIndex((r) => r[xAxisColumn.id] === x),
+            column: xAxisColumnIndex,
+            value: x,
+          },
+          ...(yAxisColumn
+            ? [
+                {
+                  row: table.rows.findIndex((r) => r[yAxisColumn.id] === y),
+                  column: yAxisColumnIndex,
+                  value: y,
+                },
+              ]
+            : []),
+        ];
 
         const context: FilterEvent['data'] = {
           data: points.map((point) => ({
@@ -384,8 +341,79 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
           timeFieldName,
         };
         onClickValue(context);
-      }
-    };
+      },
+      [
+        isTimeBasedSwimLane,
+        onClickValue,
+        table,
+        xAxisColumn?.id,
+        xAxisColumn?.meta?.field,
+        xAxisColumnIndex,
+        yAxisColumn,
+        yAxisColumnIndex,
+      ]
+    );
+
+    const onBrushEnd = useCallback(
+      (e: HeatmapBrushEvent) => {
+        const { x, y } = e;
+
+        const xAxisFieldName = xAxisColumn?.meta?.field;
+        const timeFieldName = isTimeBasedSwimLane ? xAxisFieldName : '';
+
+        if (isTimeBasedSwimLane) {
+          const context: BrushEvent['data'] = {
+            range: x as number[],
+            table,
+            column: xAxisColumnIndex,
+            timeFieldName,
+          };
+          onSelectRange(context);
+        } else {
+          const points: Array<{ row: number; column: number; value: string | number }> = [];
+
+          if (yAxisColumn) {
+            (y as string[]).forEach((v) => {
+              points.push({
+                row: table.rows.findIndex((r) => r[yAxisColumn.id] === v),
+                column: yAxisColumnIndex,
+                value: v,
+              });
+            });
+          }
+          if (xAxisColumn) {
+            (x as string[]).forEach((v) => {
+              points.push({
+                row: table.rows.findIndex((r) => r[xAxisColumn.id] === v),
+                column: xAxisColumnIndex,
+                value: v,
+              });
+            });
+          }
+
+          const context: FilterEvent['data'] = {
+            data: points.map((point) => ({
+              row: point.row,
+              column: point.column,
+              value: point.value,
+              table,
+            })),
+            timeFieldName,
+          };
+          onClickValue(context);
+        }
+      },
+      [
+        isTimeBasedSwimLane,
+        onClickValue,
+        onSelectRange,
+        table,
+        xAxisColumn,
+        xAxisColumnIndex,
+        yAxisColumn,
+        yAxisColumnIndex,
+      ]
+    );
 
     const themeOverrides: PartialTheme = {
       legend: {
@@ -458,7 +486,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
         )}
         <Chart>
           <Settings
-            onElementClick={onElementClick}
+            onElementClick={interactive ? (onElementClick as ElementClickListener) : undefined}
             showLegend={showLegend ?? args.legend.isVisible}
             legendPosition={args.legend.position}
             legendColorPicker={uiState ? legendColorPicker : undefined}
@@ -475,7 +503,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
                   ? new Date(dateHistogramMeta.timeRange.to).getTime()
                   : NaN,
             }}
-            onBrushEnd={onBrushEnd as BrushEndListener}
+            onBrushEnd={interactive ? (onBrushEnd as BrushEndListener) : undefined}
           />
           <Heatmap
             id="heatmap"

diff --git a/...ins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx b/...ins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx
@@ -46,6 +46,7 @@ export const heatmapRenderer: (
 
     const timeZone = getTimeZone(getUISettings());
     const { HeatmapComponent } = await import('../components/heatmap_component');
+    const { isInteractive } = handlers;
     render(
       <KibanaThemeProvider theme$={theme.theme$}>
         <div className="heatmap-container" data-test-subj="heatmapChart">
@@ -58,6 +59,7 @@ export const heatmapRenderer: (
             chartsThemeService={getThemeService()}
             paletteService={getPaletteService()}
             uiState={handlers.uiState as PersistedState}
+            interactive={isInteractive()}
           />
         </div>
       </KibanaThemeProvider>,