You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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';importplotly,{Font,PlotData}from'plotly.js';import{useState}from'react';importcreatePlotComponentfrom'react-plotly.js/factory';constPlot=createPlotComponent(plotly);interfaceSunburstPlotDataextendsPartial<PlotData>{outsidetextfont?: Partial<Font>;leaf?: {opacity?: number};maxdepth?: number;}// NOTE: to access the taxon id:// e.points[0].customdataexportdefaultfunctionTaxonSunburst(){const[maxDepthValue,setMaxDepthValue]=useState<number>(3);constdata: SunburstPlotData[]=[{type: 'sunburst',// NOTE: this is for the taxon nameslabels: ['Eve','Cain','Seth','Enos','Noam','Abel','Awan','Enoch','Azura',],// NOTE: this is going to be used for the taxidscustomdata: [1,2,3,4,5,6,7,8,9],// NOTE: parent of each taxonparents: ['','Eve','Eve','Seth','Seth','Eve','Eve','Awan','Eve'],// NOTE: paper counts per taxonvalues: [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(<Flexdirection="column"alignItems="center"marginY="size-200"maxWidth="100%"><Sliderlabel="Depth"minValue={1}maxValue={3}value={maxDepthValue}onChange={setMaxDepthValue}isFilledcontextualHelp={<ContextualHelp><Heading>What is depth?</Heading><Content>
Depth controls the maximum taxonomic level that is shown in the
plot.
</Content></ContextualHelp>}/><Plotdata={data}style={{width: '100%'}}layout={{autosize: true}}useResizeHandleronSunburstClick={()=>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.
The text was updated successfully, but these errors were encountered:
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.The text was updated successfully, but these errors were encountered: