Vis.Jsでハマったこと(REACT)

自分の個人プロジェクト

・ネットワークグラフを書くところまでは完成している　https://create-react-app-yamap-y6hp.vercel.app/
・今回はグラフにＵＩを付けるところを実装

ハマったこと

・今もハマり続けている
・最終的にはライブラリ自体が原因であった

解決方法

・react-vis-graph　→　ダメ（丸１週間悩む）
・react-vis-graph-wrapper　→　５秒で解決

課題感

・CHATGPTでは解決できず
・Googleで粘って検索　→　やはり、ここは重要

詳細

・グラフコンポーネントに与えるgraph引数が、ライブラリの中でID重複のエラーが発生する
A duplicate id was found in the parameter array. at n.value (data-set.ts:259:1)

ソース

graph.js

import React, { useState, useEffect } from "react";
import VisGraph, {
  GraphData,
  GraphEvents,
  Options,
} from 'react-vis-graph-wrapper';

import options from '../options';

const GraphPage = (props) => {
  const events = {};

  const filteredNodes = props.data.nodes.filter((node) => node.isOn);

  // Check for duplicate node IDs
  const nodeIds = new Set();
  const uniqueNodes = [];
  filteredNodes.forEach((node) => {
    if (!nodeIds.has(node.id)) {
      nodeIds.add(node.id);
      uniqueNodes.push(node);
    }
  });

  // Remove edges.id from the filteredEdges array
  const filteredEdges = props.data.edges.filter((edge) => {
    return (
      uniqueNodes.find((node) => node.id === edge.from) !== undefined &&
      uniqueNodes.find((node) => node.id === edge.to) !== undefined
    );
  });

  return (
    <VisGraph
      graph={{ nodes: uniqueNodes, edges: filteredEdges }}
      options={options}
      events={events}
    />
  );
};

export default GraphPage;

不具合レポート

issueに上がっているが、解決せず
https://github.com/crubier/react-graph-vis/issues/150

神様登場　→　どこかに深いissue有とコメントに書かれている
This package is a complete rewrite of react-graph-vis started by ZachHaber in this gist mentioned somewhere deep in issues.