feat(graph): improvements (#1295)

cybercongress · Sep 19, 2024 · d3e0247 · d3e0247
1 parent c42d5ea
commit d3e0247
Show file tree

Hide file tree

Showing 14 changed files with 238 additions and 139 deletions.
diff --git a/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraph.tsx b/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraph.tsx
@@ -3,6 +3,7 @@ import { ForceGraph3D } from 'react-force-graph';
 import GraphHoverInfo from './GraphHoverInfo/GraphHoverInfo';
 
 import styles from './CyberlinksGraph.module.scss';
+import GraphActionBar from '../graph/GraphActionBar/GraphActionBar';
 
 type Props = {
   data: any;
@@ -16,7 +17,7 @@ const DEFAULT_CAMERA_DISTANCE = 1300;
 const CAMERA_ZOOM_IN_EFFECT_DURATION = 5000;
 const CAMERA_ZOOM_IN_EFFECT_DELAY = 500;
 
-function CyberlinksGraph({ data, size }: Props) {
+function CyberlinksGraph({ data, size, minVersion }: Props) {
   const [isRendering, setRendering] = useState(true);
   const [touched, setTouched] = useState(false);
   const [hoverNode, setHoverNode] = useState(null);
@@ -173,7 +174,7 @@ function CyberlinksGraph({ data, size }: Props) {
         ref={fgRef}
         graphData={data}
         showNavInfo={false}
-        backgroundColor="#000000"
+        backgroundColor="rgba(0, 0, 0, 0)"
         warmupTicks={420}
         cooldownTicks={0}
         enableNodeDrag={false}
@@ -210,11 +211,16 @@ function CyberlinksGraph({ data, size }: Props) {
         onEngineStop={handleEngineStop}
       />
 
-      <GraphHoverInfo
-        node={hoverNode}
-        camera={fgRef.current?.camera()}
-        size={size || window.innerWidth}
-      />
+      {!minVersion && (
+        <>
+          <GraphHoverInfo
+            node={hoverNode}
+            camera={fgRef.current?.camera()}
+            size={size || window.innerWidth}
+          />
+          <GraphActionBar />
+        </>
+      )}
     </div>
   );
 }

diff --git a/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx b/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx
@@ -2,11 +2,11 @@ import { createPortal } from 'react-dom';
 import { Loading } from 'src/components';
 import { useAppSelector } from 'src/redux/hooks';
 import { selectCurrentAddress } from 'src/redux/features/pocket';
+import { Stars } from 'src/containers/portal/components';
 import useCyberlinks from './useCyberlinks';
 import { PORTAL_ID } from '../../../containers/application/App';
 import GraphNew from '../GraphNew/GraphNew';
 import CyberlinksGraph from './CyberlinksGraph';
-import GraphFullscreenBtn from '../GraphFullscreenBtn/GraphFullscreenBtn';
 
 enum Types {
   '3d' = '3d',
@@ -20,6 +20,9 @@ type Props = {
   limit?: number | false;
   data?: any;
   type?: Types;
+
+  // temp
+  minVersion?: boolean;
 };
 
 function CyberlinksGraphContainer({
@@ -28,6 +31,7 @@ function CyberlinksGraphContainer({
   size,
   limit,
   data,
+  minVersion,
   type = Types['2d'],
 }: Props) {
   const { data: fetchData, loading } = useCyberlinks(
@@ -42,6 +46,8 @@ function CyberlinksGraphContainer({
 
   const Comp = type === Types['2d'] ? GraphNew : CyberlinksGraph;
 
+  // const { isFullscreen } = useFullscreen();
+
   const content = loading ? (
     <div
       style={{
@@ -65,11 +71,12 @@ function CyberlinksGraphContainer({
     </div>
   ) : (
     <>
-      <GraphFullscreenBtn />
+      {!minVersion && <Stars />}
 
       <Comp
         data={data || fetchData}
         size={size}
+        minVersion={minVersion}
         currentAddress={currentAddress}
       />
     </>

diff --git a/src/features/cyberlinks/GraphFullscreenBtn/GraphFullscreenBtn.module.scss b/src/features/cyberlinks/GraphFullscreenBtn/GraphFullscreenBtn.module.scss
@@ -1,12 +1,2 @@
 .btn {
-  position: absolute;
-  right: 50px;
-  z-index: 10;
-  top: 200px;
-  font-size: 18px;
-  color: var(--primary-color);
-
-  &:hover {
-    opacity: 0.7;
-  }
 }
diff --git a/src/features/cyberlinks/GraphFullscreenBtn/GraphFullscreenBtn.tsx b/src/features/cyberlinks/GraphFullscreenBtn/GraphFullscreenBtn.tsx
@@ -1,6 +1,7 @@
 import { PORTAL_ID } from 'src/containers/application/App';
 import { useState } from 'react';
 import useEventListener from 'src/hooks/dom/useEventListener';
+import { Button } from 'src/components';
 import styles from './GraphFullscreenBtn.module.scss';
 
 export function useFullscreen() {
@@ -20,6 +21,19 @@ export function useFullscreen() {
     }
   }
 
+  function handleKeyDown(event: KeyboardEvent) {
+    // if input is focused, do not handle keydown
+    if (['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+      return;
+    }
+    if (event.key === 'f') {
+      toggleFullscreen(document.getElementById(PORTAL_ID));
+    }
+  }
+
+  // listen F key
+  useEventListener('keydown', handleKeyDown);
+
   return {
     isFullscreen,
     toggleFullscreen,
@@ -38,9 +52,9 @@ function GraphFullscreenBtn() {
   }
 
   return (
-    <button className={styles.btn} onClick={onClick} type="button">
+    <Button className={styles.btn} onClick={onClick}>
       {isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
-    </button>
+    </Button>
   );
 }
 

diff --git a/src/features/cyberlinks/GraphNew/GraphNew.module.scss b/src/features/cyberlinks/GraphNew/GraphNew.module.scss
@@ -6,11 +6,3 @@
   height: 100%;
   position: relative;
 }
-
-.total {
-  top: 250px;
-  color: white;
-  left: calc(50% - 50px);
-  position: absolute;
-  z-index: 11;
-}
diff --git a/src/features/cyberlinks/GraphNew/GraphNew.tsx b/src/features/cyberlinks/GraphNew/GraphNew.tsx
@@ -4,25 +4,31 @@ import {
   CosmographProvider,
   Cosmograph,
   CosmographRef,
-  CosmographSearchRef,
 } from '@cosmograph/react';
 
 import { CosmosInputNode, CosmosInputLink } from '@cosmograph/cosmos';
-import { ActionBar as ActionBarComponent } from 'src/components';
+import { Button } from 'src/components';
+import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
+import useGraphLimit from 'src/pages/robot/Brain/useGraphLimit';
+import { useLocation } from 'react-router-dom';
 import { Node } from './data';
-// import './styles.css';
 import styles from './GraphNew.module.scss';
-import { useFullscreen } from '../GraphFullscreenBtn/GraphFullscreenBtn';
 import { useCyberlinkWithWaitAndAdviser } from '../hooks/useCyberlink';
 import GraphHoverInfo from '../CyberlinksGraph/GraphHoverInfo/GraphHoverInfo';
+import GraphActionBar from '../graph/GraphActionBar/GraphActionBar';
 
 export default function GraphNew({ address, data, size }) {
   const cosmograph = useRef<CosmographRef>();
   // const histogram = useRef<CosmographHistogramRef<Node>>();
   // const timeline = useRef<CosmographTimelineRef<Link>>();
-  const search = useRef<CosmographSearchRef>();
+  // const search = useRef<CosmographSearchRef>();
+
+  const location = useLocation();
+
   const [degree, setDegree] = useState<number[]>([]);
 
+  const { limit } = useGraphLimit();
+
   // max 2 nodes
   const [selectedNodes, setSelectedNodes] = useState<CosmosInputNode[]>([]);
 
@@ -36,27 +42,7 @@ export default function GraphNew({ address, data, size }) {
 
   const [hoverNode, setHoverNode] = useState(null);
   const [nodePostion, setNodePostion] = useState(null);
-
-  const { links, nodes } = useMemo(() => {
-    const nodes = [...data.nodes, ...localData.nodes].map((node) => {
-      return {
-        ...node,
-        size: 0.5,
-        // value: 1,
-        color: node.color || 'rgba(0,100,235,1)',
-      };
-    });
-
-    const links = [...data.links, ...localData.links].map((link) => {
-      return {
-        ...link,
-        width: 2.5,
-        color: link.color || 'rgba(9,255,13,1)',
-      };
-    });
-
-    return { links, nodes };
-  }, [data, localData]);
+  const [selectedNode, setSelectedNode] = useState<Node | undefined>();
 
   const scaleColor = useRef(
     scaleSymlog<string, string>()
@@ -72,6 +58,14 @@ export default function GraphNew({ address, data, size }) {
     }
   }, [degree]);
 
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      cosmograph.current?.pause();
+    }, 5000);
+
+    return () => clearTimeout(timeoutId);
+  }, []);
+
   // const nodeColor = useCallback(
   //   (n: Node, index: number) => {
   //     if (index === undefined) {
@@ -90,15 +84,6 @@ export default function GraphNew({ address, data, size }) {
   // const [showLabelsFor, setShowLabelsFor] = useState<Node[] | undefined>(
   //   undefined
   // );
-  const [selectedNode, setSelectedNode] = useState<Node | undefined>();
-
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      cosmograph.current?.pause();
-    }, 5000);
-
-    return () => clearTimeout(timeoutId);
-  }, []);
 
   // const onCosmographClick = useCallback<
   //   Exclude<CosmographInputConfig<Node, Link>['onClick'], undefined>
@@ -143,18 +128,43 @@ export default function GraphNew({ address, data, size }) {
     });
   }
 
-  console.log(localData);
+  const { links, nodes } = useMemo(() => {
+    const nodes = [...data.nodes, ...localData.nodes].map((node) => {
+      return {
+        ...node,
+        size: 0.5,
+        // value: 1,
+        color: node.color || 'rgba(0,100,235,1)',
+      };
+    });
 
-  const { isFullscreen } = useFullscreen();
+    const links = [...data.links, ...localData.links].map((link) => {
+      return {
+        ...link,
+        width: 2.5,
+        color: link.color || 'rgba(9,255,13,1)',
+      };
+    });
+
+    return { links, nodes };
+  }, [data, localData]);
+
+  useAdviserTexts({
+    defaultText: useMemo(() => {
+      return (
+        <>
+          {/* @nick (or) your */}
+          public brain, with {nodes.length} particles and {links.length}{' '}
+          cyberlinks
+          <br />
+          The limit is {limit}
+        </>
+      );
+    }, [nodes.length, links.length, limit]),
+  });
 
   return (
     <div className={styles.wrapper}>
-      {!isFullscreen && (
-        <div className={styles.total}>
-          <p>total nodes: {nodes.length} </p>
-          <p>total links: {links.length} </p>
-        </div>
-      )}
       <GraphHoverInfo
         node={hoverNode}
         left={nodePostion?.x + 50}
@@ -258,7 +268,11 @@ export default function GraphNew({ address, data, size }) {
         /> */}
       </CosmographProvider>
 
-      <ActionBar selectedNodes={selectedNodes} callback={callback} />
+      {location.pathname !== '/brain' && (
+        <GraphActionBar>
+          <ActionBar selectedNodes={selectedNodes} callback={callback} />
+        </GraphActionBar>
+      )}
     </div>
   );
 }
@@ -275,22 +289,22 @@ function ActionBar({ selectedNodes, callback }: Props2) {
     callback,
   });
 
+  const { length } = selectedNodes;
+
   let text;
-  if (selectedNodes.length !== 2 || selectedNodes.length === 0) {
-    text = `select ${2 - selectedNodes.length}  particles`;
+  if (length !== 2 || length === 0) {
+    text = `select ${2 - length}  particle${length === 0 ? 's' : ''}`;
   } else {
-    text = '';
+    text = 'cyberlink particles';
   }
 
   return (
-    <ActionBarComponent
-      button={{
-        text: 'cyberlink particles',
-        onClick: execute,
-        disabled: !isReady || selectedNodes.length !== 2,
-        pending: isLoading,
-      }}
-      text={text}
-    />
+    <Button
+      onClick={execute}
+      disabled={!isReady || selectedNodes.length !== 2}
+      pending={isLoading}
+    >
+      {text}
+    </Button>
   );
 }