plotly / plotly/react-plotly.js
Can't disable sunburst default animation
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 1.1k
- Forks
- 138
- Merge moyen
- 3 j 2 h
- PR mergées (30 j)
- 4
Description
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):
// ...
import dynamic from 'next/dynamic';
// ...
const TaxonSunburst = dynamic(import('../components/TaxonSunburst'), {
ssr: false,
loading: () => (
<Flex
justifyContent="center"
marginY="size-200"
>
<ProgressCircle
aria-label="Loading sunburst plot"
isIndeterminate
/>
</Flex>
),
});
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.
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par la gestion de onSunburstClick du composant Plot et le comportement de clic des sunburst de Plotly. Comparez-la avec le callback onClick fonctionnel et identifiez un test de régression ciblé pour empêcher le zoom par défaut. Le travail est terminé lorsque le callback peut supprimer le comportement sunburst par défaut tout en continuant à recevoir l’événement.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, nextjs, react
- Domaine
- data-visualization, frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100