add legend, filter visible nodes

1 files changed, 27 insertions, 0 deletions

diff --git a/src/views/Legend.js b/src/views/Legend.js
new file mode 100644
index 0000000..eedcc35
--- /dev/null
+++ b/src/views/Legend.js
@@ -0,0 +1,27 @@
+/**
+ * Category list in the corner
+ */
+
+import React, { useState, useEffect } from "react";
+
+const categories = "No6092,1620s,painting,blunt,National Gallery of Canada,AGO,courtauld,intervensions,connsoeurship,double agent,forensics,black box,Stankievech".split(
+  ","
+);
+
+export default function Legend({ visible, selected, onSelect }) {
+  return (
+    <div className="legend" style={{ opacity: visible ? 1 : 0 }}>
+      {categories.map((category, index) => (
+        <div
+          key={category}
+          className={
+            selected ? (selected === index + 1 ? "selected" : "unselected") : ""
+          }
+          onClick={() => onSelect(index + 1)}
+        >
+          {category}
+        </div>
+      ))}
+    </div>
+  );
+}