JS Error | Invalid type passed for ChartSeriesActions after refactoring into a component

[andycarlson]

I'm writing an app that has multiple TimeseriesCharts using similar metric dimensions. I want to have the same series actions on each chart without the need to repeat myself in the top level page code.

I've had success on other apps with tabular presentation styles and repetitive cell actions by refactoring the menu into a separate component. When I tried the same approach with a ChartSeriesAction I got a JS error at runtime as soon as the graph becomes non-empty.

The error is

JS Error | Invalid type passed for ChartSeriesActions!

I'm not sure if I am doing something wrong or there is a problem in the Dynatrace code but I have run out of other things to try so posting the problem here.

I have created a stripped down version of the series actions sample code ... stripped down in that onSelect just logs a message to the JS console. This works fine until I refactor it.

The component looks like this...

import {
  ChartSeriesAction,
} from '@dynatrace/strato-components-preview/charts';
import { MagnifyingGlassIcon } from '@dynatrace/strato-icons';

export const SampleSeriesAction = ({action}) => {
return (
  <ChartSeriesAction>
    <ChartSeriesAction.Item
    key={action.host}
    onSelect={() => {
    console.log('action fired on ',action.host);
    }}
    >
      <ChartSeriesAction.ItemIcon>
        <MagnifyingGlassIcon />
      </ChartSeriesAction.ItemIcon>
      Inspect data point
    </ChartSeriesAction.Item>
  </ChartSeriesAction>
)
}

And the relevant part of the page code looks like...

return (
  <>
    <TimeseriesChart
    data={timeseriesWithCustomData}
    seriesActions={(seriesAction) => {
      const action = seriesAction as ExtendedTimeseries;
      return (
        <SampleSeriesAction action={action} />
      );
    }}
    />
  </>
);

The stack trace from the console says...

"stack": "Error: Invalid type passed for ChartSeriesActions!
at http://localhost:3000/ui/main.js:153525:19
at ChartLegendItem (http://localhost:3000/ui/main.js:100494:20)
at renderWithHooks (http://localhost:3000/ui/main.js:13479:28)
at mountIndeterminateComponent (http://localhost:3000/ui/main.js:16857:23)
at beginWork (http://localhost:3000/ui/main.js:17845:24)
at HTMLUnknownElement.callCallback2 (http://localhost:3000/ui/main.js:5585:24)
at Object.dtAWF [as aWF] (http://localhost:3000/ruxitagentjs_ICA7NVfqrux_10307250124095659.js:252:348)
at Object.dispatchWrapper (http://localhost:3000/ruxitagentjs_ICA7NVfqrux_10307250124095659.js:411:168)
at HTMLUnknownElement.dispatchEvent (http://localhost:3000/ruxitagentjs_ICA7NVfqrux_10307250124095659.js:398:100)
at Object.invokeGuardedCallbackDev (http://localhost:3000/ui/main.js:5610:26)"

I have also attached the two source files, suffixed by '.txt'

Thanks in advance.