solidjs-visjs-network.jsx

import { onMount, createSignal } from 'solid-js'

const sampleData = {
    edges:[
        { "from": 1, "to": 0 },
        {"from": 2, "to": 0},
        {"from": 3,"to": 1},
        {"from": 4,"to": 1},
      ],
    nodes: [
      {"id": 0,"label": "testing"},
      {"id": 1,"label": "penelitian"},
      {"id": 2,"label": "jurnaling"},
      {"id": 3,"label": "coding"},
      {"id": 4,"label": "makan"}
    ]
  }
  
export default function IndexPage() {

  const [data, setData] = createSignal([])

  let nodes,edges
  let network = null;
  let seed = 2;

  let myNetwork 

  onMount(() => {
    if (network !== null) {
      network.destroy();
      network = null;
      setData([])
    } else {
      setData(sampleData)

      let container = myNetwork
      let options = {
        layout: { randomSeed: seed }, 
        locale: "en",
        interaction: { keyboard: true },
      };
      network = new vis.Network(container, data(), options);
    }
  })

  return (
    <div>
      <h1>Demo SOLIDJS + VISJS</h1>

      <div ref={myNetwork} class="w-600 h-600 bg-white/80 m-4 p-4 rounded-lg"></div>
    </div>
  )
}