plotly / plotly/react-plotly.js

Can't disable sunburst default animation

Offen
#331 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
1.1k
Forks
138
Ø Merge
3 T. 2 Std.
Gemergte PRs (30 T.)
4

Beschreibung

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der onSunburstClick-Behandlung der Plot-Komponente und dem Click-Verhalten von Plotly bei Sunbursts. Vergleiche es mit dem funktionierenden onClick-Callback und identifiziere einen fokussierten Regressionstest, der das standardmäßige Zoomen verhindert. Als abgeschlossen gilt die Aufgabe, wenn der Callback das standardmäßige Sunburst-Verhalten unterdrücken und gleichzeitig weiterhin das Event empfangen kann.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, nextjs, react
Bereich
data-visualization, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.