plotly / plotly/react-plotly.js

Can't disable sunburst default animation

Aperta
#331 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
JavaScript
Stelle
1.1k
Fork
138
Merge medio
3g 2h
PR unite (30g)
4

Descrizione

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.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia dalla gestione di onSunburstClick del componente Plot e dal comportamento al clic dei sunburst di Plotly. Confrontala con il callback onClick funzionante e identifica un test di regressione mirato per impedire lo zoom predefinito. Il lavoro è completato quando il callback può sopprimere il comportamento sunburst predefinito continuando a ricevere l’evento.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, nextjs, react
Ambito
data-visualization, frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.