graph.js

async function loadCsvData(url) {
  const response = await fetch(url);
  const csvText = await response.text();
  const cleanedCsvText = csvText.replace(/\r/g, ""); // ここで \r を取り除く
  const lines = cleanedCsvText.split("\n");
  const headers = lines[0].split(",");

  return lines.slice(1).map((line) => {
    const data = line.split(",");
    return headers.reduce((obj, nextKey, index) => {
      obj[nextKey] = data[index];
      return obj;
    }, {});
  });
}

const csvUrl = "info.csv";

// CSVデータを格納するための変数
let csvData;

// CSVファイルをロード
loadCsvData(csvUrl).then((data) => {
  csvData = data;
});

// Load data from the JSON file
fetch("mst_data.json")
  .then((response) => response.json())
  .then((data) => {
    const nodes = new vis.DataSet(data.nodes);
    const edges = new vis.DataSet(
      data.edges.map((edge) => ({
        from: edge.from,
        to: edge.to,
        length: edge.length * 1000,
        value: 1 / edge.length,
        title: 1 - edge.length,
      }))
    );

    const container = document.getElementById("network");
    const graphData = { nodes: nodes, edges: edges };
    const options = {
      width: "100%",
      height: "100%",
      nodes: {
        font: {
          size: 40,
        },
      },
      edges: {
        smooth: false,
        chosen: false,
      },
      physics: {
        barnesHut: {
          // springConstant: 1,
          // centralGravity: 0,
          // theta: 1,
          gravitationalConstant: -100000,
          // avoidOverlap: 0.5,
        },
      },
      layout: {
        improvedLayout: false,
      },
    };

    const network = new vis.Network(container, graphData, options);

    // Add event listener for node clicks
    network.on("selectNode", function (params) {
      if (params.nodes.length > 0) {
        const nodeId = params.nodes[0];
        const nodeName = nodes.get(nodeId).label; // Assuming label is the same as node name

        const nodeData = csvData.find((item) => item.name === nodeName);

        // Update infoview
        document.getElementById("node-name").textContent = nodeName;
        if (nodeData) {
          document.getElementById("node-num-files").textContent =
            nodeData.num_files;
          document.getElementById("node-duration").textContent =
            nodeData.total_duration_min;
          document.getElementById("node-f0").textContent = nodeData.f0_mean;
        }
      }
    });

    function zoomToNode() {
      const nodeName = document.getElementById("model-name-input").value;
      const foundNode = nodes.get({
        filter: function (item) {
          return item.label === nodeName;
        },
      });

      if (foundNode.length > 0) {
        const nodeId = foundNode[0].id;
        network.focus(nodeId, { scale: 1, animation: true });
        network.selectNodes([nodeId]);
        document.getElementById("node-name").textContent = nodeName;
      } else {
        alert("Not found.");
      }
    }

    document
      .getElementById("search-button")
      .addEventListener("click", zoomToNode);

    document
      .getElementById("model-name-input")
      .addEventListener("keyup", function (event) {
        if (event.key === "Enter") {
          event.preventDefault();
          zoomToNode();
        }
      });
  })
  .catch((error) => console.error("Error loading the MST data:", error));