Use component bindings to reduce nesting in components

src/App.svelte

@@ -2,17 +2,24 @@
   import { onMount } from "svelte";
   import { DataSet } from "vis-data/peer";
   import Network from "./Network.svelte";
+  import Summary from "./Summary.svelte";
 
-  let initNodeTitle = "moz-fx-data-shared-prod:telemetry_stable.main_v4";
   let data;
+  let network = null;
+  let selectedNode = null;
 
   // view-source:https://visjs.github.io/vis-network/examples/network/exampleApplications/loadingBar.html
   function getDatasetId(name) {
     return name.split(".")[0];
   }
 
-  onMount(async () => {
-    let edges = await fetch("data/edges.json").then((resp) => resp.json());
+  function getNode(data, title) {
+    return data.nodes.get({
+      filter: (item) => item.title == title,
+    })[0];
+  }
+
+  function transform(edges) {
     let nodes = new Set();
     for (let i = 0; i < edges.length; i++) {
       nodes.add(edges[i].destination);
@@ -32,7 +39,7 @@
     }
 
     let nodeMap = new Map([...nodes, ...datasets].map((el, idx) => [el, idx]));
-    data = {
+    return {
       nodes: new DataSet(
         [...nodes]
           .map((el) => ({
@@ -66,6 +73,15 @@
           )
       ),
     };
+  }
+
+  onMount(async () => {
+    let edges = await fetch("data/edges.json").then((resp) => resp.json());
+    data = transform(edges);
+    selectedNode = getNode(
+      data,
+      "moz-fx-data-shared-prod:telemetry_stable.main_v4"
+    );
   });
 </script>
 
@@ -102,6 +118,7 @@
   </p>
 
   {#if data}
-    <Network {data} {initNodeTitle} />
+    <Network {data} bind:network bind:selectedNode />
+    <Summary {data} {network} root={selectedNode} />
   {/if}
 </div>

src/Network.svelte

@@ -4,11 +4,10 @@
     import Summary from "./Summary.svelte";
 
     export let data;
-    export let initNodeTitle;
-    export let selectedNode = getNode(initNodeTitle);
+    export let network;
+    export let selectedNode;
 
     let container;
-    let network;
     let progress = 0;
 
     let options = {
@@ -45,12 +44,6 @@
         },
     };
 
-    function getNode(title) {
-        return data.nodes.get({
-            filter: (item) => item.title == title,
-        })[0];
-    }
-
     onMount(async () => {
         // create a network
         network = new Network(container, data, options);
@@ -79,7 +72,3 @@
 {#if progress < 100}
     <p>Loading {progress}%</p>
 {/if}
-
-{#if network && selectedNode}
-    <Summary {network} {data} root={selectedNode} />
-{/if}

src/Summary.svelte

@@ -1,8 +1,8 @@
 <script>
-    export let network;
     export let data;
+    export let network;
     export let root;
-    $: output = root ? transform(root) : null;
+    $: output = network && root ? transform(root) : null;
 
     function transform(root) {
         let parents = data.nodes.get(