1 files changed, 23 insertions, 3 deletions
diff --git a/src/views/App.js b/src/views/App.js
index c5a7f83..561523d 100644
--- a/src/views/App.js
+++ b/src/views/App.js
@@ -5,19 +5,24 @@
 import React, { useState, useEffect, useCallback } from "react";
 
 import Detail from "./Detail.js";
+import Legend from "./Legend.js";
 import buildGraph from "../graph.js";
 
 export default function App() {
   const [db, setDb] = useState(null);
   const [node, setNode] = useState(null);
+  const [graph, setGraph] = useState(null);
+  const [selected, setSelected] = useState(null);
   const [detailVisible, setDetailVisible] = useState(null);
 
   useEffect(async () => {
     const newDb = await loadDB();
     setDb(newDb);
-    buildGraph(newDb, {
-      click: handleClick,
-    });
+    setGraph(
+      buildGraph(newDb, {
+        click: handleClick,
+      })
+    );
   }, []);
 
   const handleClick = useCallback((node) => {
@@ -29,9 +34,24 @@ export default function App() {
     setDetailVisible(false);
   });
 
+  const handleSelect = useCallback((category) => {
+    if (category === selected) {
+      setSelected(null);
+      graph.onSelect(null);
+    } else {
+      setSelected(category);
+      graph.onSelect(category);
+    }
+  });
+
   return (
     <div>
       <Detail node={node} visible={detailVisible} onClose={handleClose} />
+      <Legend
+        visible={!detailVisible}
+        selected={selected}
+        onSelect={handleSelect}
+      />
     </div>
   );
 }