Using NextJS 13, passing onSunburstClick={() => false} to the Plot component does not disable the default behaviour of clicking in a sunburst node and zooming in to that node.
The component I'm creating:
import {
Content,
ContextualHelp,
Flex,
Heading,
Slider,
} from '@adobe/react-spectrum';
import plotly, { Font, PlotData } from 'plotly.js';
import { useState } from 'react';
import createPlotComponent from 'react-plotly.js/factory';
const Plot = createPlotComponent(plotly);
interface SunburstPlotData extends Partial<PlotData> {
outsidetextfont?: Partial<Font>;
leaf?: { opacity?: number };
maxdepth?: number;
}
// NOTE: to access the taxon id:
// e.points[0].customdata
export default function TaxonSunburst() {
const [maxDepthValue, setMaxDepthValue] = useState<number>(3);
const data: SunburstPlotData[] = [
{
type: 'sunburst',
// NOTE: this is for the taxon names
labels: [
'Eve',
'Cain',
'Seth',
'Enos',
'Noam',
'Abel',
'Awan',
'Enoch',
'Azura',
],
// NOTE: this is going to be used for the taxids
customdata: [1, 2, 3, 4, 5, 6, 7, 8, 9],
// NOTE: parent of each taxon
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve'],
// NOTE: paper counts per taxon
values: [10, 14, 12, 10, 2, 6, 6, 4, 4],
outsidetextfont: { size: 20, color: '#377eb8' },
leaf: { opacity: 0.4 },
marker: { line: { width: 2 } },
maxdepth: maxDepthValue,
},
];
return (
<Flex
direction="column"
alignItems="center"
marginY="size-200"
maxWidth="100%"
>
<Slider
label="Depth"
minValue={1}
maxValue={3}
value={maxDepthValue}
onChange={setMaxDepthValue}
isFilled
contextualHelp={
<ContextualHelp>
<Heading>What is depth?</Heading>
<Content>
Depth controls the maximum taxonomic level that is shown in the
plot.
</Content>
</ContextualHelp>
}
/>
<Plot
data={data}
style={{ width: '100%' }}
layout={{ autosize: true }}
useResizeHandler
onSunburstClick={() => false}
/>
</Flex>
);
}
In order for SSR to work properly, I'm loading the component like so (from my pages/index.tsx):
The onClick event works properly. Also, modifying onSunburstClick with something like onSunburstClick={() => alert("test")} also works. I would like to disable the default behaviour of the sunburst plots.
Using NextJS 13, passing
onSunburstClick={() => false}
to thePlot
component does not disable the default behaviour of clicking in a sunburst node and zooming in to that node.The component I'm creating:
In order for SSR to work properly, I'm loading the component like so (from my
pages/index.tsx
):The
onClick
event works properly. Also, modifyingonSunburstClick
with something likeonSunburstClick={() => alert("test")}
also works. I would like to disable the default behaviour of the sunburst plots.