feat(brain): vr experience

package.json

@@ -181,6 +181,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@uniswap/sdk": "^3.0.3",
     "@xenova/transformers": "^2.17.0",
+    "aframe": "^1.6.0",
     "apollo-boost": "^0.4.7",
     "bech32": "^1.1.3",
     "big.js": "^5.2.2",

src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainerVR.tsx

@@ -0,0 +1,68 @@
+import { createPortal } from 'react-dom';
+import { Loading } from 'src/components';
+import { useAppSelector } from 'src/redux/hooks';
+import { selectCurrentAddress } from 'src/redux/features/pocket';
+import useCyberlinks from './useCyberlinks';
+import { PORTAL_ID } from '../../../containers/application/App';
+import LinksGraphVR from './CyberlinksGraphVR';
+
+type Props = {
+  address?: string;
+  toPortal?: boolean;
+  size?: number;
+  limit?: number;
+  data?: any;
+};
+
+function CyberlinksGraphContainer({
+  address,
+  toPortal,
+  size,
+  limit,
+  data,
+}: Props) {
+  const { data: fetchData, loading } = useCyberlinks(
+    { address },
+    {
+      limit,
+      skip: !!data,
+    }
+  );
+
+  const currentAddress = useAppSelector(selectCurrentAddress);
+
+  const content = loading ? (
+    <div
+      style={{
+        display: 'flex',
+        height: '100%',
+        flexDirection: 'column',
+        alignContent: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Loading />
+      <p
+        style={{
+          color: '#fff',
+          fontSize: 20,
+          textAlign: 'center',
+        }}
+      >
+        loading...
+      </p>
+    </div>
+  ) : (
+    <LinksGraphVR
+      data={data || fetchData}
+      size={size}
+      currentAddress={currentAddress}
+    />
+  );
+
+  const portalEl = document.getElementById(PORTAL_ID);
+
+  return toPortal ? portalEl && createPortal(content, portalEl) : content;
+}
+
+export default CyberlinksGraphContainer;

src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphVR.tsx

@@ -0,0 +1,222 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { ForceGraphVR } from 'react-force-graph';
+import GraphHoverInfoVR from './GraphHoverInfo/GraphHoverInfoVR';
+
+import styles from './CyberlinksGraph.module.scss';
+
+type Props = {
+  data: any;
+  // currentAddress?: string;
+  size?: number;
+};
+
+// before zoom in
+const INITIAL_CAMERA_DISTANCE = 2500;
+const DEFAULT_CAMERA_DISTANCE = 1300;
+const CAMERA_ZOOM_IN_EFFECT_DURATION = 5000;
+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();
+
+  // debug, remove later
+  useEffect(() => {
+    if (isRendering) {
+      console.time('rendering');
+    } else {
+      console.timeEnd('rendering');
+    }
+  }, [isRendering]);
+
+  // initial camera position, didn't find via props
+  useEffect(() => {
+    if (!fgRef.current) {
+      return;
+    }
+    // fgRef.current.cameraPosition({ z: INITIAL_CAMERA_DISTANCE });
+  }, [fgRef]);
+
+  // initial loading camera zoom effect
+  useEffect(() => {
+    // if (!fgRef.current || isRendering) {
+    //   return;
+    // }
+
+    // setTimeout(() => {
+    //   if (!fgRef.current) {
+    //     return;
+    //   }
+
+    //   fgRef.current.cameraPosition(
+    //     { z: DEFAULT_CAMERA_DISTANCE },
+    //     null,
+    //     CAMERA_ZOOM_IN_EFFECT_DURATION
+    //   );
+    // }, CAMERA_ZOOM_IN_EFFECT_DELAY);
+  }, [fgRef, isRendering]);
+
+  useEffect(() => {
+    if (!fgRef.current) {
+      return;
+    }
+
+    function onTouch() {
+      setTouched(true);
+    }
+
+    // fgRef.current.controls().addEventListener('start', onTouch);
+
+    // return () => {
+    //   if (fgRef.current) {
+    //     fgRef.current.controls().removeEventListener('start', onTouch);
+    //   }
+    // };
+  }, [fgRef]);
+
+  // orbit camera
+  useEffect(() => {
+    // if (!fgRef.current || touched || isRendering) {
+    //   return;
+    // }
+
+    // let angle = 0;
+
+    // let interval = null;
+
+    // const timeout = setTimeout(() => {
+    //   interval = setInterval(() => {
+    //     fgRef.current.cameraPosition({
+    //       x: DEFAULT_CAMERA_DISTANCE * Math.sin(angle),
+    //       z: DEFAULT_CAMERA_DISTANCE * Math.cos(angle),
+    //     });
+    //     angle += Math.PI / 3000;
+    //   }, 10);
+    // }, CAMERA_ZOOM_IN_EFFECT_DURATION + CAMERA_ZOOM_IN_EFFECT_DELAY);
+
+    // return () => {
+    //   clearTimeout(timeout);
+    //   clearInterval(interval);
+    // };
+  }, [fgRef, touched, isRendering]);
+
+  const handleNodeClick = useCallback(
+    (node) => {
+      if (!fgRef.current) {
+        return;
+      }
+
+      const distance = 300;
+      const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
+
+      // fgRef.current.cameraPosition(
+      //   { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio },
+      //   node,
+      //   5000
+      // );
+    },
+    [fgRef]
+  );
+
+  const handleLinkClick = useCallback(
+    (link) => {
+      if (!fgRef.current) {
+        return;
+      }
+
+      const node = link.target;
+      const distance = 300;
+      const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
+
+      // fgRef.current.cameraPosition(
+      //   { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio },
+      //   node,
+      //   5000
+      // );
+    },
+    [fgRef]
+  );
+
+  const handleNodeRightClick = useCallback((node) => {
+    window.open(`${window.location.origin}/ipfs/${node.id}`, '_blank');
+  }, []);
+
+  const handleLinkRightClick = useCallback((link) => {
+    window.open(
+      `${window.location.origin}/network/bostrom/tx/${link.name}`,
+      '_blank'
+    );
+  }, []);
+
+  const handleEngineStop = useCallback(() => {
+    console.log('ForceGraph3D engine stopped!');
+    setRendering(false);
+  }, []);
+
+  return (
+    <div
+      style={{
+        minHeight: size,
+        position: 'relative',
+      }}
+    >
+      {isRendering && (
+        <div className={styles.loaderWrapper}>rendering data...</div>
+      )}
+
+      <ForceGraphVR
+        height={size}
+        width={size}
+        ref={fgRef}
+        graphData={data}
+        showNavInfo={false}
+        backgroundColor="#000000"
+        warmupTicks={420}
+        cooldownTicks={0}
+        enableNodeDrag={false}
+        enablePointerInteraction
+        enableNavigationControls
+        // 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=""
+        linkWidth={4}
+        linkCurvature={0.2}
+        linkOpacity={0.7}
+        linkDirectionalParticles={1}
+        linkDirectionalParticleColor={() => 'rgba(9,255,13,1)'}
+        linkDirectionalParticleWidth={4}
+        linkDirectionalParticleSpeed={0.015}
+        // linkDirectionalArrowRelPos={1}
+        // linkDirectionalArrowLength={10}
+        // linkDirectionalArrowColor={() => 'rgba(9,255,13,1)'}
+
+        onNodeClick={handleNodeRightClick}
+        onNodeRightClick={handleNodeClick}
+        onLinkClick={handleLinkRightClick}
+        onLinkRightClick={handleLinkClick}
+        onEngineStop={handleEngineStop}
+      />
+
+      {/* <GraphHoverInfoVR */}
+      {/*   node={hoverNode} */}
+      {/*   // camera={fgRef.current?.camera()} */}
+      {/*   size={size || window.innerWidth} */}
+      {/* /> */}
+    </div>
+  );
+}
+
+export default CyberlinksGraph;

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

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef } from 'react';
+import 'aframe';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'a-entity': any;
+      'a-plane': any;
+      'a-text': any;
+      'a-image': any;
+    }
+  }
+}
+
+type Props = {
+  node: any;
+  camera: any;
+  size: number;
+  imageUrl?: string;
+};
+
+function HoverInfo({ node, camera, size, imageUrl }: Props) {
+  const hoverRef = useRef(null);
+
+//   useEffect(() => {
+//     if (!node || !camera || !hoverRef.current) return;
+
+//     const hoverEl = hoverRef.current;
+
+//     // Position the hover info in 3D space
+//     hoverEl.setAttribute('position', `${node.x} ${node.y} ${node.z}`);
+
+//     // Make the hover info always face the camera
+//     hoverEl.setAttribute('look-at', '[camera]');
+
+//     // Update content
+//     const textEl = hoverEl.querySelector('[text]');
+//     if (textEl) {
+//       textEl.setAttribute('text', 'value', node.id);
+//     }
+
+//     // Show/hide based on distance from camera
+//     const updateVisibility = () => {
+//       const distance = hoverEl.object3D.position.distanceTo(camera.position);
+//       if (hoverEl.object3D) {
+//         hoverEl.object3D.visible = distance < size;
+//       }
+//     };
+
+//     // Add this to the render loop
+//     (hoverEl as any).sceneEl.addBehavior({
+//       tick: updateVisibility
+//     });
+
+//   }, [node, camera, size]);
+
+  return (
+    <a-entity ref={hoverRef}>
+      <a-plane color="white" height="100" width="100">
+        {imageUrl && (
+          <a-image
+            src={imageUrl}
+            width="0.5"
+            height="0.5"
+            position="0 0.15 0.01"
+          />
+        )}
+        <a-text 
+          value={node.id}
+          color="black"
+          align="center" 
+          width="1.1"
+          position="0 -0.2 0.01"
+        />
+      </a-plane>
+    </a-entity>
+  );
+}
+
+export default HoverInfo;