feat: New chart error panel (#1850)

- Display a dismissable error message overlay when there is an error within a chart panel
- For downsampling errors, have the option to disable downsampling
- Closes #1520

---------

Co-authored-by: Mike Bender <mikebender@deephaven.io>

packages/chart/src/Chart.tsx

@@ -1,7 +1,6 @@
 import React, { Component, ReactElement, RefObject } from 'react';
 import deepEqual from 'deep-equal';
 import memoize from 'memoize-one';
-import { CopyButton, Popper } from '@deephaven/components';
 import {
   vsLoading,
   dhGraphLineDown,
@@ -33,6 +32,7 @@ import { bindAllMethods } from '@deephaven/utils';
 import createPlotlyComponent from './plotly/createPlotlyComponent';
 import Plotly from './plotly/Plotly';
 import ChartModel from './ChartModel';
+import ChartErrorOverlay from './ChartErrorOverlay';
 import { ChartTheme } from './ChartTheme';
 import ChartUtils, { ChartModelSettings } from './ChartUtils';
 import './Chart.scss';
@@ -415,6 +415,10 @@ class Chart extends Component<ChartProps, ChartState> {
     this.setState({ shownError: null });
   }
 
+  handleDownsampleErrorClose(): void {
+    this.setState({ downsamplingError: null });
+  }
+
   handleModelEvent(event: CustomEvent): void {
     const { type, detail } = event;
     log.debug2('Received data update', type, detail);
@@ -704,23 +708,26 @@ class Chart extends Component<ChartProps, ChartState> {
             style={{ height: '100%', width: '100%' }}
           />
         )}
-        <Popper
-          className="chart-error-popper"
-          options={{ placement: 'top' }}
-          isShown={shownError != null}
-          onExited={this.handleErrorClose}
-          closeOnBlur
-          interactive
-        >
-          {shownError != null && (
-            <>
-              <div className="chart-error">{shownError}</div>
-              <CopyButton tooltip="Copy Error" copy={shownError}>
-                Copy Error
-              </CopyButton>
-            </>
-          )}
-        </Popper>
+        {downsamplingError != null && shownError == null && (
+          <ChartErrorOverlay
+            errorMessage={`${downsamplingError}`}
+            onDiscard={() => {
+              this.handleDownsampleErrorClose();
+            }}
+            onConfirm={() => {
+              this.handleDownsampleErrorClose();
+              this.handleDownsampleClick();
+            }}
+          />
+        )}
+        {shownError != null && (
+          <ChartErrorOverlay
+            errorMessage={`${shownError}`}
+            onDiscard={() => {
+              this.handleErrorClose();
+            }}
+          />
+        )}
       </div>
     );
   }

packages/chart/src/ChartErrorOverlay.scss

@@ -0,0 +1,14 @@
+@import '@deephaven/components/scss/custom.scss';
+
+.chart-error-overlay {
+  .chart-error-overlay-content {
+    .btn {
+      margin-top: $spacer-3;
+      margin-right: $spacer-3;
+    }
+    .info-message,
+    .waiting-filter-list {
+      text-align: left;
+    }
+  }
+}

packages/chart/src/ChartErrorOverlay.tsx

@@ -0,0 +1,52 @@
+import { ReactElement } from 'react';
+import { CopyButton, Button } from '@deephaven/components';
+import './ChartErrorOverlay.scss';
+
+interface ChartErrorOverlayProps {
+  errorMessage: string;
+  onDiscard?: () => void;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+  'data-testid'?: string;
+}
+
+function ChartErrorOverlay({
+  errorMessage,
+  onDiscard,
+  onConfirm,
+  onCancel,
+  'data-testid': dataTestId,
+}: ChartErrorOverlayProps): ReactElement {
+  const messageTestId =
+    dataTestId != null ? `${dataTestId}-message` : undefined;
+
+  return (
+    <div className="chart-panel-overlay chart-error-overlay">
+      <div className="chart-panel-overlay-content chart-error-overlay-content">
+        <div className="info-message" data-testid={messageTestId}>
+          {errorMessage}
+          <CopyButton copy={errorMessage} style={{ margin: '0' }} />
+        </div>
+        <div>
+          {onCancel && (
+            <Button onClick={onCancel} kind="secondary">
+              Cancel
+            </Button>
+          )}
+          {onDiscard && (
+            <Button onClick={onDiscard} kind="secondary">
+              Dismiss
+            </Button>
+          )}
+          {onConfirm && (
+            <Button onClick={onConfirm} kind="primary">
+              Continue
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ChartErrorOverlay;