feat(graph): cid resolving (#1204)

Author: happylolonly

src/components/ContentItem/contentItem.tsx

@@ -13,12 +13,12 @@ import { getRankGrade } from '../../utils/search/utils';
 import ContentIpfs from '../contentIpfs/contentIpfs';
 
 type ContentItemProps = {
-  item: $TsFixMe;
+  item?: $TsFixMe;
   cid: string;
   grade?: $TsFixMe;
   className?: string;
   parent?: string;
-  linkType: LinksType;
+  linkType?: LinksType;
   setType?: (type: IpfsContentType) => void;
 };
 
@@ -35,7 +35,7 @@ function ContentItem({
 
   useEffect(() => {
     details?.type && setType && setType(details?.type);
-  }, [details]); //TODO: REFACT - setType rise infinite loop
+  }, [details]); // TODO: REFACT - setType rise infinite loop
 
   if (hidden) {
     return <div />;

src/components/atoms/glass/mixins.scss

@@ -0,0 +1,23 @@
+// https://www.sketch.com/s/b13841a7-cfd2-47e8-a114-efb8e29285af/a/JAOznjr
+
+@mixin glass {
+  backdrop-filter: blur(15px);
+  box-shadow: 0px 0px 10px rgba(75, 0, 130, 0.09);
+  background-color: rgba(75, 0, 130, 0.09);
+}
+
+@mixin glassBackground {
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+
+    @include glass;
+  }
+}

src/features/cyberlinks/CyberlinksGraph/CyberlinksGraph.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { ForceGraph3D } from 'react-force-graph';
+import GraphHoverInfo from './GraphHoverInfo/GraphHoverInfo';
+
 import styles from './CyberlinksGraph.module.scss';
 
 type Props = {
@@ -17,6 +19,7 @@ const CAMERA_ZOOM_IN_EFFECT_DELAY = 500;
 function CyberlinksGraph({ data, size }: Props) {
   const [isRendering, setRendering] = useState(true);
   const [touched, setTouched] = useState(false);
+  const [hoverNode, setHoverNode] = useState(null);
 
   const fgRef = useRef();
 
@@ -157,6 +160,7 @@ function CyberlinksGraph({ data, size }: Props) {
     <div
       style={{
         minHeight: size,
+        position: 'relative',
       }}
     >
       {isRendering && (
@@ -175,18 +179,19 @@ function CyberlinksGraph({ data, size }: Props) {
         enableNodeDrag={false}
         enablePointerInteraction
         enableNavigationControls
-        nodeLabel="id"
+        // nodeLabel="id"
         nodeColor={() => 'rgba(0,100,235,1)'}
         nodeOpacity={1.0}
         nodeRelSize={8}
+        onNodeHover={setHoverNode}
         linkColor={
           // not working
           (link) =>
             // link.subject && link.subject === currentAddress
             //   ? 'red'
             'rgba(9,255,13,1)'
         }
-        linkLabel={''}
+        linkLabel=""
         linkWidth={4}
         linkCurvature={0.2}
         linkOpacity={0.7}
@@ -204,6 +209,12 @@ function CyberlinksGraph({ data, size }: Props) {
         onLinkRightClick={handleLinkClick}
         onEngineStop={handleEngineStop}
       />
+
+      <GraphHoverInfo
+        node={hoverNode}
+        camera={fgRef.current?.camera()}
+        size={size || window.innerWidth}
+      />
     </div>
   );
 }

src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.module.scss

@@ -0,0 +1,10 @@
+@import '../../../../components/atoms/glass/mixins';
+
+.hoverInfo {
+  @include glassBackground;
+
+  position: absolute;
+  z-index: 0;
+  max-width: 480px;
+  border-radius: 5px;
+}

src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.tsx

@@ -0,0 +1,61 @@
+import * as THREE from 'three';
+import ContentItem from 'src/components/ContentItem/contentItem';
+import { useMemo } from 'react';
+import styles from './GraphHoverInfo.module.scss';
+
+// fix
+type Props = {
+  node: any;
+  camera: any;
+  size: number;
+};
+
+function HoverInfo({ node, camera, size }: Props) {
+  const calc = useMemo(() => {
+    if (!node || !camera) {
+      return null;
+    }
+
+    const { x, y, z } = node;
+    const vector = new THREE.Vector3(x, y, z);
+    vector.project(camera);
+
+    const widthHalf = window.innerWidth / 2;
+    const heightHalf = window.innerHeight / 2;
+
+    const posX = vector.x * widthHalf + widthHalf;
+    const posY = -(vector.y * heightHalf) + heightHalf;
+
+    return {
+      posX,
+      posY,
+    };
+  }, [camera, node]);
+
+  if (!calc) {
+    return null;
+  }
+
+  const { posX, posY } = calc;
+
+  const isCid = node.id.startsWith('Qm');
+
+  if (!isCid) {
+    // debug, delete
+    debugger;
+  }
+
+  return (
+    <div
+      className={styles.hoverInfo}
+      style={{
+        top: posY,
+        left: posX,
+      }}
+    >
+      <ContentItem cid={node.id} />
+    </div>
+  );
+}
+
+export default HoverInfo;

src/features/cyberlinks/CyberlinksGraph/useCyberlinks.ts

@@ -86,20 +86,18 @@ function useCyberlinks(
     const to = cyberlinks.map((a) => a.to);
 
     const object = Array.from(new Set(from.concat(to))).map((value) => ({
-      id: valueByKeyOrSelf(value, particlesPreview),
+      // id: valueByKeyOrSelf(value, particlesPreview),
+      id: value,
     }));
 
-    // console.log(
-    //   '---obj',
-    //   object.filter((o) => o.id.indexOf('Qm') === 0).map((o) => o.id)
-    // );
-
     const links = [];
 
     for (let i = 0; i < cyberlinks.length; i++) {
       links[i] = {
-        source: valueByKeyOrSelf(cyberlinks[i].from, particlesPreview),
-        target: valueByKeyOrSelf(cyberlinks[i].to, particlesPreview),
+        // source: valueByKeyOrSelf(cyberlinks[i].from, particlesPreview),
+        // target: valueByKeyOrSelf(cyberlinks[i].to, particlesPreview),
+        source: cyberlinks[i].from,
+        target: cyberlinks[i].to,
         name: cyberlinks[i].transaction_hash,
         subject: cyberlinks[i].neuron,
         // curvative: getRandomInt(20, 500) / 1000,
@@ -110,7 +108,7 @@ function useCyberlinks(
       nodes: object,
       links,
     };
-  }, [cyberlinks, isLoading, particlesPreview]);
+  }, [cyberlinks]);
 
   return {
     data,

src/pages/robot/Brain/Brain.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useState } from 'react';
-import { useAdviser } from 'src/features/adviser/context';
 import { Tabs } from 'src/components';
+import { Route, Routes, useParams } from 'react-router-dom';
+import { useMemo } from 'react';
+import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
 import { useRobotContext } from '../robot.context';
 import TreedView from './ui/TreedView';
 import styles from './Brain.module.scss';
-import { LIMIT_GRAPH } from './utils';
 import GraphView from './ui/GraphView';
+import { LIMIT_GRAPH } from './utils';
 
 enum TabsKey {
   list = 'list',
@@ -14,41 +15,54 @@ enum TabsKey {
 
 function Brain() {
   const { address } = useRobotContext();
-  const [selected, setSelected] = useState(TabsKey.list);
-  const { setAdviser } = useAdviser();
-
-  useEffect(() => {
-    setAdviser(
-      <>
-        neurons public knowledge cybergraph <br />
-        {selected === TabsKey.graph && (
-          <> that is how last {LIMIT_GRAPH} cyberlinks looks like </>
-        )}
-      </>
-    );
-  }, [setAdviser, selected]);
-
-  let content;
-
-  if (selected === TabsKey.list) {
-    content = <TreedView address={address} />;
-  }
-
-  if (selected === TabsKey.graph) {
-    content = <GraphView address={address} />;
-  }
+
+  const params = useParams();
+
+  const selected = params['*'] || TabsKey.graph;
+
+  useAdviserTexts({
+    defaultText: useMemo(
+      () => (
+        <>
+          neurons public knowledge cybergraph <br />
+          {selected === TabsKey.graph && (
+            <> that is how last {LIMIT_GRAPH} cyberlinks looks like </>
+          )}
+        </>
+      ),
+      [selected]
+    ),
+  });
 
   return (
     <div className={styles.wrapper}>
       <div className={styles.tabs}>
         <Tabs
-          options={[TabsKey.list, TabsKey.graph].map((item) => {
-            return { key: item, onClick: () => setSelected(item) };
-          })}
+          options={[
+            {
+              key: TabsKey.graph,
+              to: './graph',
+            },
+            {
+              key: TabsKey.list,
+              to: './list',
+            },
+          ]}
           selected={selected}
         />
       </div>
-      {content}
+
+      <Routes>
+        {['/', 'graph'].map((path) => (
+          <Route
+            key={path}
+            path={path}
+            element={<GraphView address={address} />}
+          />
+        ))}
+
+        <Route path="list" element={<TreedView address={address} />} />
+      </Routes>
     </div>
   );
 }

src/pages/robot/Robot.tsx

@@ -3,6 +3,7 @@ import TxsTable from 'src/pages/robot/_refactor/account/component/txsTable';
 import Sigma from 'src/containers/sigma';
 import RoutedEnergy from 'src/containers/energy';
 import TableDiscipline from 'src/containers/gol/table';
+import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
 import Layout from './Layout/Layout';
 import RobotContextProvider, { useRobotContext } from './robot.context';
 import Brain from './Brain/Brain';
@@ -15,7 +16,6 @@ import Heroes from './_refactor/account/tabs/heroes';
 import Karma from './Karma/Karma';
 import Follows from './_refactor/account/tabs/Follows/Follows';
 import Soul from './Soul/Soul';
-import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
 
 function RobotRoutes() {
   const { isLoading, address } = useRobotContext();
@@ -54,7 +54,7 @@ function RobotRoutes() {
           <Route key={path} path={path} element={<SensePage />} />
         ))}
 
-        <Route path="brain" element={<Brain />} />
+        <Route path="brain/*" element={<Brain />} />
 
         <Route path="*" element={<p>Page should not exist</p>} />
       </Route>