【Streamlit】Vis Networkを使用したカスタムコンポーネントをJavascriptで作成する

// ノードの定義（レベル指定）
const nodes = new vis.DataSet([
  { id: 1, label: "Root", level: 0 },
  { id: 2, label: "Child A", level: 1 },
  { id: 3, label: "Child B", level: 1 },
  { id: 4, label: "Grandchild A1", level: 2 },
  { id: 5, label: "Grandchild B1", level: 2 }
]);

// エッジの定義
const edges = new vis.DataSet([
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 4 },
  { from: 3, to: 5 }
]);

// ネットワークデータ
const data = {
  nodes: nodes,
  edges: edges
};

// オプション設定（階層レイアウト）
const options = {
  layout: {
    hierarchical: {
      enabled: true,
      direction: "UD", // 上から下
      sortMethod: "directed"
    }
  },
  physics: {
    enabled: false // 階層表示では通常オフにする
  }
};

// ネットワーク描画
const container = document.getElementById("root");
const network = new vis.Network(container, data, options);

// ノードクリック時の処理
network.on("click", function (params) {
  if (params.nodes.length > 0) {
    const nodeId = params.nodes[0];
    const nodeData = nodes.get(nodeId);
    document.getElementById("node-info").innerHTML = `
      <strong>ノードID:</strong> ${nodeData.id}<br>
      <strong>ラベル:</strong> ${nodeData.label}<br>
      <strong>レベル:</strong> ${nodeData.level}
    `;
  } else {
    document.getElementById("node-info").innerHTML = "ノードをクリックすると情報がここに表示されます。";
  }
});

pip install cruft

cruft create https://github.com/blackary/cookiecutter-streamlit-component/

[1/9] author_name (Bob Smith): 　*****
[2/9] author_email (bob@example.com): *****@example.com
[3/9] project_name (Streamlit Component X): vis_network
[4/9] package_name (vis_network):
[5/9] import_name (vis_network):
[6/9] description (Streamlit component that allows you to do X): Streamlit component that allows you to show vis network and to get event
[7/9] deployment_via_github_actions (y): n
[8/9] working_with_dataframes (n): n
[9/9] Select open_source_license
1 - MIT License
2 - BSD License
3 - ISC License
4 - Apache Software License 2.0
5 - GNU General Public License v3
6 - Not open source
Choose from [1/2/3/4/5/6] (1): 1

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.9/dist/dist/vis-network.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.9/standalone/umd/vis-network.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

function onRender(event) {
  // Only run the render code the first time the component is loaded.
  if (!window.rendered) {
    // You most likely want to get the data passed in like this
    // const {input1, input2, input3} = event.detail.args// networkを表示するjavascript始まり
    // オプション設定（階層レイアウト）
    const options = {
      layout: {
        hierarchical: {
          enabled: true,
          direction: "UD", // 上から下
          sortMethod: "directed"
        }
      },
      physics: {
          enabled: false // 階層表示では通常オフにする
      }
    };
    // Streamlitからデータを受け取り処理するために追記する
    // Streamlitから渡されるデータをパースする
    const received_data = JSON.parse(event.detail.args.data)
    // Datasetに変換しておく
    const nodes = new vis.DataSet(received_data.nodes)
    const edges = new vis.DataSet(received_data.edges)
    const data = {
        nodes: nodes,
        edges: edges
    };
    // ネットワーク描画
    const container = document.getElementById("root");
    const network = new vis.Network(container, data, options);

    // ノードクリック時の処理
    network.on("click", function (params) {
      if (params.nodes.length > 0) {
        const nodeId = params.nodes[0];
        const nodeData = nodes.get(nodeId);

        console.log('クリックされたノードのデータ', nodeData)
        // Streamlitにデータを返す。
        sendValue(nodeData)
    }
    // networkを表示するjavascript終わり
    // You'll most likely want to pass some data back to Python like this
    // sendValue({output1: "foo", output2: "bar"})
    window.rendered = true
  }
}

# Create the python function that will be called
def vis_network(
  # Streamlitから渡されるデータ
  data: Optional[str] = None,
  ):
  """
    Add a descriptive docstring
  """
  component_value = _component_func(
    # Streamlitから渡されるデータ
    data = data,
    # keyを渡すことでイベント時の際レンダリングは行わない
    key="vis_network",
  )

  return component_value

import streamlit as st
import json
from custom_components.vis_network.src import vis_network

# カスタムコンポーネントに渡すデータを作成する

def get_data():
  nodes = [
    { "id": 1, "label": "Root", "level": 0 },
    { "id": 2, "label": "Child A", "level": 1 },
    { "id": 3, "label": "Child B", "level": 1 },
    { "id": 4, "label": "Grandchild A1", "level": 2 },
    { "id": 5, "label": "Grandchild B1", "level": 2 }
  ]

  edges = [
    { "from": 1, "to": 2 },
    { "from": 1, "to": 3 },
    { "from": 2, "to": 4 },
    { "from": 3, "to": 5 }
  ]

  data = {
    "nodes": nodes,
    "edges": edges
  }

  return data

st.set_page_config(layout="wide")
clicked_data = vis_network.vis_network(json.dumps(get_data(), default=str))
# カスタムコンポーネントから返されたデータを表示する
st.write(clicked_data)