@cccsaurora/clue-ui 1.0.2 → 1.1.0-dev.10

package/hooks/useErrors.js

@@ -1,31 +1,35 @@
-import { useContext as a, useState as i, useEffect as b } from "react";
-import { ClueDatabaseContext as f } from "./ClueDatabaseContext.js";
-import { useClueEnrichSelector as m } from "./selectors.js";
-const x = (r) => {
-  const t = a(f), o = m((e) => e.ready), [n, u] = i([]);
-  return b(() => {
-    if (!o || !r)
+import { useContext, useState, useEffect } from "react";
+import { ClueDatabaseContext } from "./ClueDatabaseContext.js";
+import { useClueEnrichSelector } from "./selectors.js";
+const useErrors = (value) => {
+  const database = useContext(ClueDatabaseContext);
+  const ready = useClueEnrichSelector((ctx) => ctx.ready);
+  const [errors, setErrors] = useState([]);
+  useEffect(() => {
+    if (!ready || !value) {
       return;
-    const e = t.selectors.find({ selector: { value: r, error: { $exists: !0 } } }).$.subscribe(
-      (s) => (
+    }
+    const observable = database.selectors.find({ selector: { value, error: { $exists: true } } }).$.subscribe(
+      (records) => (
         // Transform database records into simplified error objects
-        u(
-          s.map((c) => ({
-            source: c.source,
-            message: c.error
+        setErrors(
+          records.map((record) => ({
+            source: record.source,
+            message: record.error
           }))
         )
       )
     );
     return () => {
       try {
-        e.unsubscribe();
-      } catch (s) {
-        console.warn(s);
+        observable.unsubscribe();
+      } catch (e) {
+        console.warn(e);
       }
     };
-  }, [t, o, r]), n;
+  }, [database, ready, value]);
+  return errors;
 };
 export {
-  x as default
+  useErrors as default
 };

package/hooks/useMyHighlights.js

@@ -1,44 +1,74 @@
-import { getSubGraphNodeSet as H } from "../utils/graph.js";
-import { safeAddEventListener as S } from "../utils/window.js";
-import { useMemo as P, useState as h, useCallback as i, useEffect as w } from "react";
-const z = (n, c) => {
-  const u = P(() => n == null ? void 0 : n.data, [n]), [o, f] = h(), [t, g] = h(/* @__PURE__ */ new Set()), [d, p] = h(/* @__PURE__ */ new Set()), [y, a] = h(), K = i((e) => {
-    a(e.ctrlKey);
-  }, []), m = i((e) => {
-    a(e.ctrlKey);
+import { getSubGraphNodeSet } from "../utils/graph.js";
+import { safeAddEventListener } from "../utils/window.js";
+import { useMemo, useState, useCallback, useEffect } from "react";
+const useMyHighlights = (graph, onNodeSelectionChanged) => {
+  const data = useMemo(() => graph == null ? void 0 : graph.data, [graph]);
+  const [hoveredNode, setHoveredNode] = useState();
+  const [highlightedNodes, setHighlightedNodes] = useState(/* @__PURE__ */ new Set());
+  const [highlightedPath, setHighlightedPath] = useState(/* @__PURE__ */ new Set());
+  const [ctrlKeyDown, setCtrlKeyDown] = useState();
+  const onKeyPressed = useCallback((ev) => {
+    setCtrlKeyDown(ev.ctrlKey);
   }, []);
-  w(() => S("keydown", K), [K]), w(() => S("keyup", m), [m]);
-  const N = i((e, s) => {
-    f(s ? e : "");
-  }, []), b = i(
-    (e, s, l) => {
-      let r = /* @__PURE__ */ new Set();
-      s ? r = new Set(l.ctrlKey ? [...t, e] : [e]) : (r = l.ctrlKey ? /* @__PURE__ */ new Set([...t]) : /* @__PURE__ */ new Set(), r.delete(e)), g(r), c == null || c([...r]);
+  const onKeyUnpressed = useCallback((ev) => {
+    setCtrlKeyDown(ev.ctrlKey);
+  }, []);
+  useEffect(() => {
+    return safeAddEventListener("keydown", onKeyPressed);
+  }, [onKeyPressed]);
+  useEffect(() => {
+    return safeAddEventListener("keyup", onKeyUnpressed);
+  }, [onKeyUnpressed]);
+  const onNodeHoveredChanged = useCallback((nodeId, isHovered) => {
+    if (isHovered) {
+      setHoveredNode(nodeId);
+    } else {
+      setHoveredNode("");
+    }
+  }, []);
+  const onNodeClicked = useCallback(
+    (nodeId, isSelected, event) => {
+      let newHighlightedNodes = /* @__PURE__ */ new Set();
+      if (isSelected) {
+        newHighlightedNodes = new Set(event.ctrlKey ? [...highlightedNodes, nodeId] : [nodeId]);
+      } else {
+        newHighlightedNodes = event.ctrlKey ? /* @__PURE__ */ new Set([...highlightedNodes]) : /* @__PURE__ */ new Set();
+        newHighlightedNodes.delete(nodeId);
+      }
+      setHighlightedNodes(newHighlightedNodes);
+      onNodeSelectionChanged == null ? void 0 : onNodeSelectionChanged([...newHighlightedNodes]);
     },
-    [t, c]
-  ), k = i(
-    (e) => d.size === 0 || d.has(e) ? 1 : 0.2,
-    [d]
+    [highlightedNodes, onNodeSelectionChanged]
   );
-  return w(() => {
-    let e = /* @__PURE__ */ new Set();
-    if (o) {
-      const s = H(o, u);
-      e = /* @__PURE__ */ new Set([...e, ...s]);
+  const nodeOpacities = useCallback(
+    (nodeId) => {
+      return highlightedPath.size === 0 || highlightedPath.has(nodeId) ? 1 : 0.2;
+    },
+    [highlightedPath]
+  );
+  useEffect(() => {
+    let newHighlightedPath = /* @__PURE__ */ new Set();
+    if (hoveredNode) {
+      const subGraphNodes = getSubGraphNodeSet(hoveredNode, data);
+      newHighlightedPath = /* @__PURE__ */ new Set([...newHighlightedPath, ...subGraphNodes]);
+    }
+    if (highlightedNodes.size && (ctrlKeyDown || !hoveredNode)) {
+      highlightedNodes.forEach((highlightedNode) => {
+        const subGraphNodes = getSubGraphNodeSet(highlightedNode, data);
+        newHighlightedPath = /* @__PURE__ */ new Set([...newHighlightedPath, ...subGraphNodes]);
+      });
     }
-    t.size && (y || !o) && t.forEach((s) => {
-      const l = H(s, u);
-      e = /* @__PURE__ */ new Set([...e, ...l]);
-    }), p(e);
-  }, [o, t, y, u]), {
-    onNodeHoveredChanged: N,
-    onNodeClicked: b,
-    nodeOpacities: k,
-    highlightedPath: d,
-    highlightedNodes: t,
-    hoveredNode: o
+    setHighlightedPath(newHighlightedPath);
+  }, [hoveredNode, highlightedNodes, ctrlKeyDown, data]);
+  return {
+    onNodeHoveredChanged,
+    onNodeClicked,
+    nodeOpacities,
+    highlightedPath,
+    highlightedNodes,
+    hoveredNode
   };
 };
 export {
-  z as default
+  useMyHighlights as default
 };

package/hooks/useMyLocalStorage.js

@@ -1,60 +1,80 @@
-import { useCallback as c, useMemo as S, useState as L, useEffect as v, createContext as I, useContext as O } from "react";
-import { i as p } from "../isNil-CjWwlQS3.js";
+import { useCallback, useMemo, useState, useEffect, createContext, useContext } from "react";
+import { i as isNil } from "../isNil-CIubwp4T.js";
 import "react/jsx-runtime";
-import { MY_LOCAL_STORAGE_PREFIX as f } from "../utils/constants.js";
-function i(o) {
-  const e = c((t) => `${o}.${t}`, [o]), a = c((t) => JSON.parse(localStorage.getItem(e(t))), [e]), m = c(
-    (t, l) => localStorage.setItem(e(t), JSON.stringify(l)),
-    [e]
-  ), s = c(
-    (t, l = !1) => localStorage.removeItem(l ? t : e(t)),
-    [e]
-  ), n = c((t) => a(t) !== null, [a]), r = c(() => Object.keys(localStorage), []), u = c(() => r().map((t) => ({ key: t, value: JSON.parse(localStorage.getItem(t)) })), [r]), g = c(
-    () => r().forEach((t) => {
-      t.startsWith(o) && s(t, !0);
+import { MY_LOCAL_STORAGE_PREFIX } from "../utils/constants.js";
+function useLocalStorage(prefix) {
+  const _buildKey = useCallback((name) => `${prefix}.${name}`, [prefix]);
+  const get = useCallback((key) => JSON.parse(localStorage.getItem(_buildKey(key))), [_buildKey]);
+  const set = useCallback(
+    (key, value) => localStorage.setItem(_buildKey(key), JSON.stringify(value)),
+    [_buildKey]
+  );
+  const remove = useCallback(
+    (key, withPrefix = false) => localStorage.removeItem(withPrefix ? key : _buildKey(key)),
+    [_buildKey]
+  );
+  const has = useCallback((key) => get(key) !== null, [get]);
+  const keys = useCallback(() => Object.keys(localStorage), []);
+  const items = useCallback(() => keys().map((k) => ({ key: k, value: JSON.parse(localStorage.getItem(k)) })), [keys]);
+  const clear = useCallback(
+    () => keys().forEach((key) => {
+      if (key.startsWith(prefix)) {
+        remove(key, true);
+      }
     }),
-    [o, s, r]
+    [prefix, remove, keys]
   );
-  return S(
+  return useMemo(
     () => ({
-      get: a,
-      set: m,
-      remove: s,
-      has: n,
-      keys: r,
-      items: u,
-      clear: g
+      get,
+      set,
+      remove,
+      has,
+      keys,
+      items,
+      clear
     }),
-    [a, m, s, n, r, u, g]
+    [get, set, remove, has, keys, items, clear]
   );
 }
-function C(o, e, a) {
-  const { get: m, set: s, has: n, remove: r } = i(a), [u, g] = L(m(o) ?? e);
-  return v(() => {
-    e != null && !n(o) && s(o, e);
-  }, [o, e, n, s]), S(
+function useLocalStorageItem(key, initialValue, prefix) {
+  const { get, set, has, remove } = useLocalStorage(prefix);
+  const [value, setValue] = useState(get(key) ?? initialValue);
+  useEffect(() => {
+    if (initialValue !== null && initialValue !== void 0 && !has(key)) {
+      set(key, initialValue);
+    }
+  }, [key, initialValue, has, set]);
+  return useMemo(
     () => [
-      u,
-      (t, l = !0) => {
-        l && (p(t) ? r(o) : s(o, t)), g(t);
+      value,
+      (newValue, save = true) => {
+        if (save) {
+          if (!isNil(newValue)) {
+            set(key, newValue);
+          } else {
+            remove(key);
+          }
+        }
+        setValue(newValue);
       },
-      () => r(o)
+      () => remove(key)
     ],
-    [o, u, s, r]
+    [key, value, set, remove]
   );
 }
-const M = I(null);
-function _() {
-  return i(f);
+const LocalStorageContext = createContext(null);
+function useMyLocalStorage() {
+  return useLocalStorage(MY_LOCAL_STORAGE_PREFIX);
 }
-function b(o, e) {
-  return C(o, e, f);
+function useMyLocalStorageItem(key, initialValue) {
+  return useLocalStorageItem(key, initialValue, MY_LOCAL_STORAGE_PREFIX);
 }
-function J() {
-  return O(M);
+function useMyLocalStorageProvider() {
+  return useContext(LocalStorageContext);
 }
 export {
-  _ as default,
-  b as useMyLocalStorageItem,
-  J as useMyLocalStorageProvider
+  useMyLocalStorage as default,
+  useMyLocalStorageItem,
+  useMyLocalStorageProvider
 };