feat: new chart error panel

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,22 @@ 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 && (
+          <ChartErrorOverlay
+            errorMessage={`${downsamplingError}`}
+            clearError={() => {
+              this.handleDownsampleErrorClose();
+            }}
+          />
+        )}
+        {shownError != null && (
+          <ChartErrorOverlay
+            errorMessage={`${shownError}`}
+            clearError={() => {
+              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,44 @@
+import { ReactElement } from 'react';
+import { ButtonOld } from '@deephaven/components';
+import './ChartErrorOverlay.scss';
+
+interface ChartErrorOverlayProps {
+  errorMessage: string;
+  clearError?: () => void;
+  'data-testid'?: string;
+}
+
+function ChartErrorOverlay({
+  errorMessage,
+  clearError,
+  'data-testid': dataTestId,
+}: ChartErrorOverlayProps): ReactElement {
+  const messageTestId =
+    dataTestId != null ? `${dataTestId}-message` : undefined;
+
+  const slowPerformanceMessage = errorMessage.includes(
+    'Plot contains more than'
+  ); // TODO: DHC #5220 to detect slow performance and show this message
+
+  const undismissableError =
+    errorMessage === 'Too many items to disable downsampling';
+
+  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}
+        </div>
+        {!undismissableError && (
+          <div>
+            <ButtonOld onClick={clearError} className="btn-primary">
+              {slowPerformanceMessage ? 'Continue Anyways' : 'Continue'}
+            </ButtonOld>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ChartErrorOverlay;