Basic Chart

import React, { useRef, useState } from "react";
import { createRoot } from "react-dom/client";

import { Chart, type Items, type Link, type Node } from "regraph";

import initialData, { type Data } from "./data";
import { style } from "@ci/theme/rg/js/storyStyles";

interface Props {
  data: Data;
}

export const Demo = () => <BasicChart data={initialData()} />;

function BasicChart(props: Props) {
  const { data } = props;
  const ref = useRef<Chart>(null);

  const [state, setState] = useState({
    count: 1,
    items: data.items,
    layout: data.layout,
  });

  const addNodeAndLink = () => {
    setState(({ count, items, layout }) => {
      const newNode: Node = { label: { text: `${count}` }, ...style.primary1 };
      const newLink: Link = { id1: "node0", id2: `node${count}` };
      const newItems: Items = {
        ...items,
        [`node${count}`]: newNode,
        [`link${count}`]: newLink,
      };
      return { count: count + 1, items: newItems, layout };
    });
  };

  const removeNodeAndLink = () => {
    if (state.count <= 1) {
      return;
    }
    setState((current) => {
      const { count, items } = current;
      const newCount = count - 1;
      const newItems = { ...items };
      delete newItems[`node${newCount}`];
      delete newItems[`link${newCount}`];
      return { ...current, count: newCount, items: newItems };
    });
  };

  const click = ({ id }: Chart.PreventablePointerEvent) => {
    if (id != null && state.items[id] && ref.current) {
      ref.current.ping(id);
    }
  };

  return (
    <div className="story">
      <div className="options">
        <button type="button" onClick={addNodeAndLink}>
          Add
        </button>
        <button
          type="button"
          onClick={removeNodeAndLink}
          disabled={state.count <= 1}
        >
          Remove
        </button>
      </div>
      <div className="chart-wrapper">
        <Chart
          ref={ref}
          items={state.items}
          layout={state.layout}
          animation={{ animate: true, time: 650 }}
          onClick={click}
          options={{ navigation: false, overview: false }}
        />
      </div>
    </div>
  );
}

const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);

import { style } from "@ci/theme/rg/js/storyStyles";

function initialData() {
  return {
    items: {
      node0: {
        label: { ...style.primaryLabel2, text: "Press the Add button" },
        ...style.primary2,
      },
    },
    layout: { name: "organic", packing: "rectangle" },
  };
}

export default initialData;

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="@ci/theme/rg/css/button.css">
    <link rel="stylesheet" href="@ci/theme/rg/css/layout.css">
  </head>
  <body>
    <div id="regraph" style="height: 100vh"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>