From 0f9e930c1d568220d81860b5ed0ce69d5dbcb0df Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Mon, 12 Aug 2024 12:07:53 +0700
Subject: [PATCH 01/11] new brain wip

---
 package.json                                  |   2 +
 .../CyberlinksGraphContainer.tsx              |   8 +-
 .../GraphHoverInfo/GraphHoverInfo.tsx         |  50 ++--
 .../cyberlinks/GraphNew/GraphNew.module.scss  |   7 +
 src/features/cyberlinks/GraphNew/GraphNew.tsx | 196 ++++++++++++++
 src/features/cyberlinks/GraphNew/data.ts      |  40 +++
 src/pages/robot/Brain/Brain.tsx               |  18 ++
 yarn.lock                                     | 251 +++++++++++++++---
 8 files changed, 505 insertions(+), 67 deletions(-)
 create mode 100644 src/features/cyberlinks/GraphNew/GraphNew.module.scss
 create mode 100644 src/features/cyberlinks/GraphNew/GraphNew.tsx
 create mode 100644 src/features/cyberlinks/GraphNew/data.ts

diff --git a/package.json b/package.json
index 6ee83e5e9..d055720ea 100644
--- a/package.json
+++ b/package.json
@@ -155,6 +155,8 @@
     "@cosmjs/proto-signing": "0.29.0",
     "@cosmjs/stargate": "0.32.0",
     "@cosmjs/tendermint-rpc": "0.29.0",
+    "@cosmograph/cosmos": "^1.6.1",
+    "@cosmograph/react": "^1.4.0",
     "@cybercongress/cyber-js": "^0.3.92",
     "@cybercongress/gravity": "0.0.15",
     "@ethersproject/providers": "^5.7.2",
diff --git a/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx b/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx
index 4c92bc5ab..7965d1bc2 100644
--- a/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx
+++ b/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx
@@ -4,7 +4,8 @@ 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 LinksGraph from './CyberlinksGraph';
+import GraphNew from '../GraphNew/GraphNew';
+import CyberlinksGraph from './CyberlinksGraph';
 
 type Props = {
   address?: string;
@@ -20,6 +21,7 @@ function CyberlinksGraphContainer({
   size,
   limit,
   data,
+  isNew,
 }: Props) {
   const { data: fetchData, loading } = useCyberlinks(
     { address },
@@ -31,6 +33,8 @@ function CyberlinksGraphContainer({
 
   const currentAddress = useAppSelector(selectCurrentAddress);
 
+  const Comp = isNew ? GraphNew : CyberlinksGraph;
+
   const content = loading ? (
     <div
       style={{
@@ -53,7 +57,7 @@ function CyberlinksGraphContainer({
       </p>
     </div>
   ) : (
-    <LinksGraph
+    <Comp
       data={data || fetchData}
       size={size}
       currentAddress={currentAddress}
diff --git a/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.tsx b/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.tsx
index 4f7c59b80..47dbdc6fa 100644
--- a/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.tsx
+++ b/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.tsx
@@ -1,6 +1,4 @@
-import * as THREE from 'three';
 import ContentItem from 'src/components/ContentItem/contentItem';
-import { useMemo } from 'react';
 import styles from './GraphHoverInfo.module.scss';
 
 // fix
@@ -10,34 +8,38 @@ type Props = {
   size: number;
 };
 
-function HoverInfo({ node, camera, size }: Props) {
-  const calc = useMemo(() => {
-    if (!node || !camera) {
-      return null;
-    }
+function HoverInfo({ node, camera, size, left, top }: 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 { 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 widthHalf = window.innerWidth / 2;
+  //   const heightHalf = window.innerHeight / 2;
 
-    const posX = vector.x * widthHalf + widthHalf;
-    const posY = -(vector.y * heightHalf) + heightHalf;
+  //   const posX = vector.x * widthHalf + widthHalf;
+  //   const posY = -(vector.y * heightHalf) + heightHalf;
 
-    return {
-      posX,
-      posY,
-    };
-  }, [camera, node]);
+  //   return {
+  //     posX,
+  //     posY,
+  //   };
+  // }, [camera, node]);
 
-  if (!calc) {
+  // if (!calc) {
+  //   return null;
+  // }
+
+  // const { posX, posY } = calc;
+
+  if (!node?.id) {
     return null;
   }
 
-  const { posX, posY } = calc;
-
   const isCid = node.id.startsWith('Qm');
 
   if (!isCid) {
@@ -49,8 +51,8 @@ function HoverInfo({ node, camera, size }: Props) {
     <div
       className={styles.hoverInfo}
       style={{
-        top: posY,
-        left: posX,
+        top,
+        left,
       }}
     >
       <ContentItem cid={node.id} />
diff --git a/src/features/cyberlinks/GraphNew/GraphNew.module.scss b/src/features/cyberlinks/GraphNew/GraphNew.module.scss
new file mode 100644
index 000000000..364f6db80
--- /dev/null
+++ b/src/features/cyberlinks/GraphNew/GraphNew.module.scss
@@ -0,0 +1,7 @@
+.cosmographStyle {
+  //   background-color: red;
+}
+
+.wrapper {
+  height: 100%;
+}
diff --git a/src/features/cyberlinks/GraphNew/GraphNew.tsx b/src/features/cyberlinks/GraphNew/GraphNew.tsx
new file mode 100644
index 000000000..2d85def1b
--- /dev/null
+++ b/src/features/cyberlinks/GraphNew/GraphNew.tsx
@@ -0,0 +1,196 @@
+import { scaleSymlog } from 'd3-scale';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import {
+  CosmographProvider,
+  Cosmograph,
+  CosmographRef,
+  CosmographHistogramRef,
+  CosmographTimelineRef,
+  CosmographSearchRef,
+  CosmographInputConfig,
+} from '@cosmograph/react';
+import { Node, Link } from './data';
+// import './styles.css';
+import styles from './GraphNew.module.scss';
+import GraphHoverInfo from '../CyberlinksGraph/GraphHoverInfo/GraphHoverInfo';
+
+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 [degree, setDegree] = useState<number[]>([]);
+
+  const [hoverNode, setHoverNode] = useState(null);
+  const [nodePostion, setNodePostion] = useState(null);
+
+  // const { data } = useCyberlinks(
+  //   {
+  //     address,
+  //   },
+  //   {
+  //     limit: 1024,
+  //   }
+  // );
+
+  const nodes = useMemo(() => {
+    return (
+      data?.nodes?.map((node) => {
+        return {
+          ...node,
+          size: 0.5,
+          // value: 1,
+          color: 'rgba(0,100,235,1)',
+        };
+      }) ?? []
+    );
+  }, [data]);
+
+  const links = useMemo(() => {
+    return (
+      data?.links?.map((link) => {
+        return {
+          ...link,
+          width: 2.5,
+          color: 'rgba(9,255,13,1)',
+        };
+      }) ?? []
+    );
+  }, [data]);
+
+  // console.log(data);
+
+  const scaleColor = useRef(
+    scaleSymlog<string, string>()
+      .range(['rgba(80, 105, 180, 0.75)', 'rgba(240, 105, 180, 0.75)'])
+      .clamp(true)
+  );
+
+  useEffect(() => {
+    const degree = cosmograph?.current?.getNodeDegrees();
+    if (degree) {
+      scaleColor.current.domain([Math.min(...degree), Math.max(...degree)]);
+      setDegree(degree);
+    }
+  }, [degree]);
+
+  // const nodeColor = useCallback(
+  //   (n: Node, index: number) => {
+  //     if (index === undefined) {
+  //       return null;
+  //     }
+
+  //     const degreeValue = degree[index];
+  //     if (degreeValue === undefined) {
+  //       return null;
+  //     }
+  //     return scaleColor.current?.(degreeValue);
+  //   },
+  //   [degree]
+  // );
+
+  const [showLabelsFor, setShowLabelsFor] = useState<Node[] | undefined>(
+    undefined
+  );
+  const [selectedNode, setSelectedNode] = useState<Node | undefined>();
+
+  const onCosmographClick = useCallback<
+    Exclude<CosmographInputConfig<Node, Link>['onClick'], undefined>
+  >((n) => {
+    search?.current?.clearInput();
+    if (n) {
+      cosmograph.current?.selectNode(n);
+      setShowLabelsFor([n]);
+      setSelectedNode(n);
+    } else {
+      cosmograph.current?.unselectNodes();
+      setShowLabelsFor(undefined);
+      setSelectedNode(undefined);
+    }
+  }, []);
+
+  // const onSearchSelectResult = useCallback<
+  //   Exclude<CosmographSearchInputConfig<Node>['onSelectResult'], undefined>
+  // >((n) => {
+  //   setShowLabelsFor(n ? [n] : undefined);
+  //   setSelectedNode(n);
+  // }, []);
+
+  console.log(nodePostion);
+
+  return (
+    <div className={styles.wrapper}>
+      <GraphHoverInfo
+        node={hoverNode}
+        // left={nodePostion?.[0]}
+        // top={nodePostion?.[1]}
+        left={500}
+        top={500}
+        // camera={fgRef.current?.camera()}
+        size={size || window.innerWidth}
+      />
+
+      <CosmographProvider nodes={nodes} links={links}>
+        {/* <CosmographSearch
+          ref={search}
+          className="searchStyle"
+          onSelectResult={onSearchSelectResult}
+          maxVisibleItems={20}
+        /> */}
+        {nodes.length > 0 && (
+          <Cosmograph
+            ref={cosmograph}
+            // spaceSize={size}
+            className={styles.cosmographStyle}
+            showTopLabels
+            showTopLabelsLimit={10}
+            showFPSMonitor
+            backgroundColor="transparent"
+            showDynamicLabels={false}
+            showLabelsFor={showLabelsFor}
+            nodeLabelColor="white"
+            hoveredNodeLabelColor="white"
+            nodeSize={(n) => n.size ?? null}
+            // nodeColor={nodeColor}
+            nodeColor={(d) => d.color}
+            linkColor={(d) => d.color}
+            onNodeMouseOver={(n, _, position) => {
+              setHoverNode(n);
+              setNodePostion(position);
+            }}
+            onNodeMouseOut={() => {
+              setHoverNode(null);
+              setNodePostion(null);
+            }}
+            // linkWidth={(l: Link) => l.width ?? null}
+            // linkColor={(l: Link) => l.color ?? null}
+            curvedLinks
+            onClick={onCosmographClick}
+          />
+        )}
+        <div className="sidebarStyle">
+          {selectedNode ? (
+            <div className="infoStyle">
+              {`id: ${selectedNode?.id}
+            value: ${selectedNode?.value}`}
+            </div>
+          ) : (
+            <></>
+          )}
+          {/* <div className="histogramWrapper">
+            <CosmographHistogram
+              className="histogramStyle"
+              ref={histogram}
+              barCount={100}
+            />
+          </div> */}
+        </div>
+        {/* <CosmographTimeline
+          className="timelineStyle"
+          ref={timeline}
+          showAnimationControls
+        /> */}
+      </CosmographProvider>
+    </div>
+  );
+}
diff --git a/src/features/cyberlinks/GraphNew/data.ts b/src/features/cyberlinks/GraphNew/data.ts
new file mode 100644
index 000000000..0a23c2f35
--- /dev/null
+++ b/src/features/cyberlinks/GraphNew/data.ts
@@ -0,0 +1,40 @@
+export type Node = {
+  [key: string]: unknown;
+  id: string;
+  value?: number;
+  color?: string;
+  size?: number;
+};
+
+export type Link = {
+  source: string;
+  target: string;
+  time?: string;
+  width?: number;
+  color?: string;
+};
+
+const randomIntFromInterval = (min: number, max: number): number => {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+const colors = ['#88C6FF', '#FF99D2', '#2748A4'];
+
+// export const links: Link[] = silkRoadCase.map((d) => ({
+//   source: d.source,
+//   target: d.target,
+//   color: colors[Math.floor(Math.random() * colors.length)],
+//   width: Math.random() * 2,
+//   date: new Date(d.time),
+// }));
+
+// export const nodes: Node[] = Array.from(
+//   new Set([
+//     ...silkRoadCase.map((d) => d.source),
+//     ...silkRoadCase.map((d) => d.target),
+//   ])
+// ).map((id, i) => ({
+//   id,
+//   value: i % randomIntFromInterval(0, 10000),
+//   size: Math.floor(Math.random() * 10) + 1,
+// }));
diff --git a/src/pages/robot/Brain/Brain.tsx b/src/pages/robot/Brain/Brain.tsx
index 983e97243..9f8d086ad 100644
--- a/src/pages/robot/Brain/Brain.tsx
+++ b/src/pages/robot/Brain/Brain.tsx
@@ -2,6 +2,7 @@ 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 CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
 import { useRobotContext } from '../robot.context';
 import TreedView from './ui/TreedView';
 import styles from './Brain.module.scss';
@@ -11,6 +12,7 @@ import { LIMIT_GRAPH } from './utils';
 enum TabsKey {
   list = 'list',
   graph = 'graph',
+  graph2 = 'graph2',
 }
 
 function Brain() {
@@ -47,6 +49,10 @@ function Brain() {
               key: TabsKey.list,
               to: './list',
             },
+            {
+              key: TabsKey.graph2,
+              to: './graph2',
+            },
           ]}
           selected={selected}
         />
@@ -62,6 +68,18 @@ function Brain() {
         ))}
 
         <Route path="list" element={<TreedView address={address} />} />
+
+        <Route
+          path="graph2"
+          element={
+            <CyberlinksGraphContainer
+              toPortal
+              limit={99999}
+              isNew
+              address={address}
+            />
+          }
+        />
       </Routes>
     </div>
   );
diff --git a/yarn.lock b/yarn.lock
index d866dd2cf..7e323d680 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4397,6 +4397,61 @@
   resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.32.2.tgz#324304aa85bfa6f10561cc17781d824d02130897"
   integrity sha512-Gg5t+eR7vPJMAmhkFt6CZrzPd0EKpAslWwk5rFVYZpJsM8JG5KT9XQ99hgNM3Ov6ScNoIWbXkpX27F6A9cXR4Q==
 
+"@cosmograph/cosmograph@1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@cosmograph/cosmograph/-/cosmograph-1.4.0.tgz#ac04a0c6eed6808c40c533b74dd8e329adc96e1b"
+  integrity sha512-tetqj0UAOxPBhmEM9T9Xd4jMY+srNuE1HEpoJeZrx3PdnVyGGS013aHSKiw3dkMY2N+WSfIT52ALzp/sKrneng==
+  dependencies:
+    "@cosmograph/cosmos" "1.6.1"
+    "@cosmograph/ui" "1.4.0"
+    "@interacta/css-labels" "^0.1.1"
+    "@supabase/supabase-js" "^2.38.4"
+    crossfilter2 "^1.5.4"
+    d3-color "^3.1.0"
+    rollup-plugin-rename-node-modules "^1.3.1"
+
+"@cosmograph/cosmos@1.6.1", "@cosmograph/cosmos@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@cosmograph/cosmos/-/cosmos-1.6.1.tgz#4901dc310b6ece34038e0d53531c6cabcacc0fa4"
+  integrity sha512-A91YabqDxCRqYZXmlOs5ykqkDw1pui0TnuXA65sYFRHwskOJ+BNy7z2IFb/vVIBlsnl3Jdyzm9G93A/xipbHIA==
+  dependencies:
+    d3-array "^3.2.0"
+    d3-color "^3.1.0"
+    d3-ease "^3.0.1"
+    d3-scale "^4.0.2"
+    d3-selection "^3.0.0"
+    d3-transition "^3.0.1"
+    d3-zoom "^3.0.0"
+    gl-bench "^1.0.42"
+    gl-matrix "^3.4.3"
+    random "^4.1.0"
+    regl "^2.1.0"
+
+"@cosmograph/react@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@cosmograph/react/-/react-1.4.0.tgz#a6565afcd29e9eb4024f1341d9dfc03b3f61fbf3"
+  integrity sha512-bixXYMHVD2oqCBYq5tG17EThBMJKppaa8iG6zxGS57Uz0aGP1gZ7CO6JCSSkh19Aam0+v2IDwraoVeQtVFeGBg==
+  dependencies:
+    "@cosmograph/cosmograph" "1.4.0"
+    "@cosmograph/cosmos" "1.6.1"
+
+"@cosmograph/ui@1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@cosmograph/ui/-/ui-1.4.0.tgz#5c856c9df0f0d7e49b9e102744e27febfced44bb"
+  integrity sha512-SnmFAkTC/FX37Ga0qG+kgsDifUEJ+gOmb7xFDbOcIFalYjtKjAam2/VV2Cl/HJ4Vuluq0+S5m9BJTJ+ODEhGZw==
+  dependencies:
+    "@juggle/resize-observer" "^3.4.0"
+    d3-array "^3.2.4"
+    d3-axis "^3.0.0"
+    d3-brush "^3.0.0"
+    d3-format "^3.1.0"
+    d3-scale "^4.0.2"
+    d3-selection "^3.0.0"
+    d3-time "^3.1.0"
+    d3-time-format "^4.1.0"
+    d3-transition "^3.0.1"
+    escape-string-regexp "^5.0.0"
+
 "@csstools/cascade-layer-name-parser@^1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.1.tgz#5957adeb71be8159e543d37a9c48e124dcd6c32e"
@@ -5937,6 +5992,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@interacta/css-labels@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@interacta/css-labels/-/css-labels-0.1.1.tgz#0f5a5f9e8b8fe094b733c08a962cb5059d5322a7"
+  integrity sha512-1XlnE0rXWzLkHV4tkhrS3qJV4GkIPgZ0U9joY0KdHK4lh7KsNu7Od9auudh9gKyEI7108ih0AKK82NEW5fi7rQ==
+
 "@ipld/car@^5.0.0":
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/@ipld/car/-/car-5.1.1.tgz#14a26dc97c4783ade491ac811f61885259b9d75e"
@@ -6421,7 +6481,7 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@juggle/resize-observer@^3.3.1":
+"@juggle/resize-observer@^3.3.1", "@juggle/resize-observer@^3.4.0":
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
@@ -8151,6 +8211,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@ranfdev/deepobj@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@ranfdev/deepobj/-/deepobj-1.0.2.tgz#9dba923578fa24aed3d3961975037b6423a03771"
+  integrity sha512-FM3y6kfJaj5MCoAjdv24EDCTDbuFz+4+pgAunbjYfugwIE4O/xx8mPNji1n/ouG8pHCntSnBr1xwTOensF23Gg==
+
 "@reduxjs/toolkit@^1.9.3":
   version "1.9.5"
   resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.5.tgz#d3987849c24189ca483baa7aa59386c8e52077c4"
@@ -9429,6 +9494,63 @@
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
 
+"@supabase/auth-js@2.64.4":
+  version "2.64.4"
+  resolved "https://registry.yarnpkg.com/@supabase/auth-js/-/auth-js-2.64.4.tgz#f27fdabf1ebd1b532ceb57e8bbe66969ee09cfba"
+  integrity sha512-9ITagy4WP4FLl+mke1rchapOH0RQpf++DI+WSG2sO1OFOZ0rW3cwAM0nCrMOxu+Zw4vJ4zObc08uvQrXx590Tg==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/functions-js@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@supabase/functions-js/-/functions-js-2.4.1.tgz#373e75f8d3453bacd71fb64f88d7a341d7b53ad7"
+  integrity sha512-8sZ2ibwHlf+WkHDUZJUXqqmPvWQ3UHN0W30behOJngVh/qHHekhJLCFbh0AjkE9/FqqXtf9eoVvmYgfCLk5tNA==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/node-fetch@2.6.15", "@supabase/node-fetch@^2.6.14":
+  version "2.6.15"
+  resolved "https://registry.yarnpkg.com/@supabase/node-fetch/-/node-fetch-2.6.15.tgz#731271430e276983191930816303c44159e7226c"
+  integrity sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+"@supabase/postgrest-js@1.15.8":
+  version "1.15.8"
+  resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-1.15.8.tgz#827aaa408cdbc89e67d0a758e7a545ac86e34312"
+  integrity sha512-YunjXpoQjQ0a0/7vGAvGZA2dlMABXFdVI/8TuVKtlePxyT71sl6ERl6ay1fmIeZcqxiuFQuZw/LXUuStUG9bbg==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/realtime-js@2.10.2":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-2.10.2.tgz#c2b42d17d723d2d2a9146cfad61dc3df1ce3127e"
+  integrity sha512-qyCQaNg90HmJstsvr2aJNxK2zgoKh9ZZA8oqb7UT2LCh3mj9zpa3Iwu167AuyNxsxrUE8eEJ2yH6wLCij4EApA==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+    "@types/phoenix" "^1.5.4"
+    "@types/ws" "^8.5.10"
+    ws "^8.14.2"
+
+"@supabase/storage-js@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@supabase/storage-js/-/storage-js-2.6.0.tgz#0fa5e04db760ed7f78e4394844a6d409e537adc5"
+  integrity sha512-REAxr7myf+3utMkI2oOmZ6sdplMZZ71/2NEIEMBZHL9Fkmm3/JnaOZVSRqvG4LStYj2v5WhCruCzuMn6oD/Drw==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/supabase-js@^2.38.4":
+  version "2.45.1"
+  resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-2.45.1.tgz#38992923e4150dc5d8f99fda02c9f81bf0d5a4d6"
+  integrity sha512-/PVe3lXmalazD8BGMIoI7+ttvT1mLXy13lNcoAPtjP1TDDY83g8csZbVR6l+0/RZtvJxl3LGXfTJT4bjWgC5Nw==
+  dependencies:
+    "@supabase/auth-js" "2.64.4"
+    "@supabase/functions-js" "2.4.1"
+    "@supabase/node-fetch" "2.6.15"
+    "@supabase/postgrest-js" "1.15.8"
+    "@supabase/realtime-js" "2.10.2"
+    "@supabase/storage-js" "2.6.0"
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -10104,6 +10226,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/phoenix@^1.5.4":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@types/phoenix/-/phoenix-1.6.5.tgz#5654e14ec7ad25334a157a20015996b6d7d2075e"
+  integrity sha512-xegpDuR+z0UqG9fwHqNoy3rI7JDlvaPh2TY47Fl80oq6g+hXT+c/LEuE43X48clZ6lOfANl5WrPur9fYO1RJ/w==
+
 "@types/pretty-hrtime@^1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz#72a26101dc567b0d68fd956cf42314556e42d601"
@@ -10332,6 +10459,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/ws@^8.5.10":
+  version "8.5.12"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.12.tgz#619475fe98f35ccca2a2f6c137702d85ec247b7e"
+  integrity sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/yargs-parser@*":
   version "21.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -14311,6 +14445,13 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+crossfilter2@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/crossfilter2/-/crossfilter2-1.5.4.tgz#855a11245d9dc18631cd49d88101dc31a2bcffce"
+  integrity sha512-oOGqOM0RocwQFOXJnEaUKqYV6Mc1TNCRv3LrNUa0QlofQTutGAXyQaLW1aGKLls2sfnbwBEtsa6tPD3jY+ycqQ==
+  dependencies:
+    "@ranfdev/deepobj" "1.0.2"
+
 crypto-browserify@3.12.0, crypto-browserify@^3.12.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -14626,11 +14767,23 @@ d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0, d3-array@^1.2.1:
   dependencies:
     internmap "1 - 2"
 
+d3-array@^3.2.0, d3-array@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
 d3-axis@1:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.12.tgz#cdf20ba210cfbb43795af33756886fb3638daac9"
   integrity sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==
 
+d3-axis@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-3.0.0.tgz#c42a4a13e8131d637b745fc2973824cfeaf93322"
+  integrity sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==
+
 d3-binarytree@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/d3-binarytree/-/d3-binarytree-1.0.2.tgz#ed43ebc13c70fbabfdd62df17480bc5a425753cc"
@@ -14647,6 +14800,17 @@ d3-brush@1:
     d3-selection "1"
     d3-transition "1"
 
+d3-brush@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-3.0.0.tgz#6f767c4ed8dcb79de7ede3e1c0f89e63ef64d31c"
+  integrity sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "3"
+    d3-transition "3"
+
 d3-chord@1:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.6.tgz#309157e3f2db2c752f0280fedd35f2067ccbb15f"
@@ -14665,7 +14829,7 @@ d3-color@1:
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a"
   integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
 
-"d3-color@1 - 3":
+"d3-color@1 - 3", d3-color@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
@@ -14717,7 +14881,7 @@ d3-ease@1:
   resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.7.tgz#9a834890ef8b8ae8c558b2fe55bd57f5993b85e2"
   integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==
 
-"d3-ease@1 - 3":
+"d3-ease@1 - 3", d3-ease@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
   integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
@@ -14755,7 +14919,7 @@ d3-format@1:
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
   integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
 
-"d3-format@1 - 3":
+"d3-format@1 - 3", d3-format@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
   integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
@@ -14832,7 +14996,7 @@ d3-scale-chromatic@1:
     d3-color "1 - 3"
     d3-interpolate "1 - 3"
 
-"d3-scale@1 - 4":
+"d3-scale@1 - 4", d3-scale@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
   integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
@@ -14860,7 +15024,7 @@ d3-selection@1, d3-selection@^1.1.0:
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.2.tgz#dcaa49522c0dbf32d6c1858afc26b6094555bc5c"
   integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==
 
-"d3-selection@2 - 3", d3-selection@3:
+"d3-selection@2 - 3", d3-selection@3, d3-selection@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
   integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
@@ -14879,7 +15043,7 @@ d3-time-format@2, d3-time-format@^2.2.3:
   dependencies:
     d3-time "1"
 
-"d3-time-format@2 - 4":
+"d3-time-format@2 - 4", d3-time-format@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
   integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
@@ -14891,7 +15055,7 @@ d3-time@1:
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
   integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
 
-"d3-time@1 - 3", "d3-time@2.1.1 - 3":
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
   integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
@@ -14920,7 +15084,7 @@ d3-transition@1:
     d3-selection "^1.1.0"
     d3-timer "1"
 
-"d3-transition@2 - 3":
+"d3-transition@2 - 3", d3-transition@3, d3-transition@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
   integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
@@ -14947,7 +15111,7 @@ d3-zoom@1:
     d3-selection "1"
     d3-transition "1"
 
-"d3-zoom@2 - 3":
+"d3-zoom@2 - 3", d3-zoom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
   integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
@@ -16969,7 +17133,7 @@ estree-walker@^1.0.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
-estree-walker@^2.0.2:
+estree-walker@^2.0.1, estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -18350,6 +18514,11 @@ gl-axes3d@^1.5.3:
     split-polygon "^1.0.0"
     vectorize-text "^3.2.1"
 
+gl-bench@^1.0.42:
+  version "1.0.42"
+  resolved "https://registry.yarnpkg.com/gl-bench/-/gl-bench-1.0.42.tgz#f82b9a1556bc89db2a7d095aec3f51f4eda85cfc"
+  integrity sha512-zuMsA/NCPmI8dPy6q3zTUH8OUM5cqKg7uVWwqzrtXJPBqoypM0XeFWEc8iFOqbf/1qtXieWOrbmgFEByKTQt4Q==
+
 gl-buffer@^2.1.1, gl-buffer@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/gl-buffer/-/gl-buffer-2.1.2.tgz#2db8d9c1a5527fba0cdb91289c206e882b889cdb"
@@ -18461,7 +18630,7 @@ gl-mat4@^1.0.1, gl-mat4@^1.0.2, gl-mat4@^1.0.3, gl-mat4@^1.1.2, gl-mat4@^1.2.0:
   resolved "https://registry.yarnpkg.com/gl-mat4/-/gl-mat4-1.2.0.tgz#49d8a7636b70aa00819216635f4a3fd3f4669b26"
   integrity sha512-sT5C0pwB1/e9G9AvAoLsoaJtbMGjfd/jfxo8jMCKqYYEnjZuFvqV5rehqar0538EmssjdDeiEWnKyBSTw7quoA==
 
-gl-matrix@^3.2.1:
+gl-matrix@^3.2.1, gl-matrix@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.4.3.tgz#fc1191e8320009fd4d20e9339595c6041ddc22c9"
   integrity sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==
@@ -27628,6 +27797,13 @@ ramda@0.29.0, ramda@^0.29.0:
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.29.0.tgz#fbbb67a740a754c8a4cbb41e2a6e0eb8507f55fb"
   integrity sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==
 
+random@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/random/-/random-4.1.0.tgz#3e0fff0eea0d311e6a80fd2c91e72bb064dec363"
+  integrity sha512-6Ajb7XmMSE9EFAMGC3kg9mvE7fGlBip25mYYuSMzw/uUSrmGilvZo2qwX3RnTRjwXkwkS+4swse9otZ92VjAtQ==
+  dependencies:
+    seedrandom "^3.0.5"
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -28664,7 +28840,7 @@ regl@^1.6.1:
   resolved "https://registry.yarnpkg.com/regl/-/regl-1.7.0.tgz#0d185431044a356bf80e9b775b11b935ef2746d3"
   integrity sha512-bEAtp/qrtKucxXSJkD4ebopFZYP0q1+3Vb2WECWv/T8yQEgKxDxJ7ztO285tAMaYZVR6mM1GgI6CCn8FROtL1w==
 
-regl@^2.0.0:
+regl@^2.0.0, regl@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/regl/-/regl-2.1.0.tgz#7dae71e9ff20f29c4f42f510c70cd92ebb6b657c"
   integrity sha512-oWUce/aVoEvW5l2V0LK7O5KJMzUSKeiOwFuJehzpSFd43dO5spP9r+sSUfhKtsky4u6MCqWJaRL+abzExynfTg==
@@ -29138,6 +29314,14 @@ robust-sum@^1.0.0:
   resolved "https://registry.yarnpkg.com/robust-sum/-/robust-sum-1.0.0.tgz#16646e525292b4d25d82757a286955e0bbfa53d9"
   integrity sha512-AvLExwpaqUqD1uwLU6MwzzfRdaI6VEZsyvQ3IAQ0ZJ08v1H+DTyqskrf2ZJyh0BDduFVLN7H04Zmc+qTiahhAw==
 
+rollup-plugin-rename-node-modules@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-rename-node-modules/-/rollup-plugin-rename-node-modules-1.3.1.tgz#d80091fc817ce726e7cdfc388ec2f4da286e280f"
+  integrity sha512-46TUPqO94GXuACYqVZjdbzNXTQAp+wTdZg/vUx2gaINb0da/ZPdaOtno2RGUOKBF4sbVM9v2ZqV98r4TQbp1UA==
+  dependencies:
+    estree-walker "^2.0.1"
+    magic-string "^0.25.7"
+
 rollup@^2.43.1:
   version "2.79.1"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
@@ -29413,6 +29597,11 @@ secp256k1@^4.0.1:
     node-addon-api "^2.0.0"
     node-gyp-build "^4.2.0"
 
+seedrandom@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/seedrandom/-/seedrandom-3.0.5.tgz#54edc85c95222525b0c7a6f6b3543d8e0b3aa0a7"
+  integrity sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==
+
 seek-bzip@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/seek-bzip/-/seek-bzip-1.0.6.tgz#35c4171f55a680916b52a07859ecf3b5857f21c4"
@@ -30379,7 +30568,7 @@ string-to-arraybuffer@^1.0.0:
     atob-lite "^2.0.0"
     is-base64 "^0.1.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -30405,15 +30594,6 @@ string-width@^3.0.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -30546,7 +30726,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -30567,13 +30747,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
@@ -33780,7 +33953,7 @@ world-calendars@^1.0.3:
   dependencies:
     object-assign "^4.1.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -33807,15 +33980,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -33908,6 +34072,11 @@ ws@^8.12.0, ws@^8.15.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.16.0.tgz#d1cd774f36fbc07165066a60e40323eab6446fd4"
   integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==
 
+ws@^8.14.2:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
+  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
+
 ws@~8.11.0:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"

From 0a1748f3d65b0fef3ee539fbfe1c10cc7ce9f093 Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Mon, 12 Aug 2024 14:15:29 +0700
Subject: [PATCH 02/11] updates

---
 package.json                                  |  1 -
 .../GraphHoverInfo/GraphHoverInfo.module.scss |  2 +-
 .../cyberlinks/GraphNew/GraphNew.module.scss  |  9 ++++
 src/features/cyberlinks/GraphNew/GraphNew.tsx | 42 ++++++++++++++-----
 src/pages/robot/Brain/Brain.tsx               |  1 +
 5 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index d055720ea..be6f25b18 100644
--- a/package.json
+++ b/package.json
@@ -155,7 +155,6 @@
     "@cosmjs/proto-signing": "0.29.0",
     "@cosmjs/stargate": "0.32.0",
     "@cosmjs/tendermint-rpc": "0.29.0",
-    "@cosmograph/cosmos": "^1.6.1",
     "@cosmograph/react": "^1.4.0",
     "@cybercongress/cyber-js": "^0.3.92",
     "@cybercongress/gravity": "0.0.15",
diff --git a/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.module.scss b/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.module.scss
index 273151086..3ac6bc16c 100644
--- a/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.module.scss
+++ b/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.module.scss
@@ -4,7 +4,7 @@
   @include glassBackground;
 
   position: absolute;
-  z-index: 0;
+  z-index: 10;
   max-width: 480px;
   border-radius: 5px;
 }
diff --git a/src/features/cyberlinks/GraphNew/GraphNew.module.scss b/src/features/cyberlinks/GraphNew/GraphNew.module.scss
index 364f6db80..6410f3d55 100644
--- a/src/features/cyberlinks/GraphNew/GraphNew.module.scss
+++ b/src/features/cyberlinks/GraphNew/GraphNew.module.scss
@@ -4,4 +4,13 @@
 
 .wrapper {
   height: 100%;
+  position: relative;
+}
+
+.total {
+  top: 200px;
+  color: white;
+  left: 50%;
+  position: absolute;
+  z-index: 11;
 }
diff --git a/src/features/cyberlinks/GraphNew/GraphNew.tsx b/src/features/cyberlinks/GraphNew/GraphNew.tsx
index 2d85def1b..c99569202 100644
--- a/src/features/cyberlinks/GraphNew/GraphNew.tsx
+++ b/src/features/cyberlinks/GraphNew/GraphNew.tsx
@@ -120,13 +120,13 @@ export default function GraphNew({ address, data, size }) {
 
   return (
     <div className={styles.wrapper}>
+      <div className={styles.total}>
+        <p>total nodes {nodes.length} </p>
+      </div>
       <GraphHoverInfo
         node={hoverNode}
-        // left={nodePostion?.[0]}
-        // top={nodePostion?.[1]}
-        left={500}
-        top={500}
-        // camera={fgRef.current?.camera()}
+        left={nodePostion?.x}
+        top={nodePostion?.y}
         size={size || window.innerWidth}
       />
 
@@ -142,21 +142,43 @@ export default function GraphNew({ address, data, size }) {
             ref={cosmograph}
             // spaceSize={size}
             className={styles.cosmographStyle}
-            showTopLabels
-            showTopLabelsLimit={10}
+            // showTopLabels={}
+            // showTopLabelsLimit={10}
             showFPSMonitor
+            // disableSimulation
             backgroundColor="transparent"
             showDynamicLabels={false}
+            linkArrows={false}
+            linkWidth={2}
+            onClick={() => {
+              debugger;
+              cosmograph.current?.pause();
+            }}
             showLabelsFor={showLabelsFor}
+            showHoveredNodeLabel={false}
             nodeLabelColor="white"
             hoveredNodeLabelColor="white"
+            // nodeLabelAccessor={(n) => {
+            //   return (
+            //     <>
+            //       <div>{n.id}</div>
+            //       <div>{n.value}</div>
+            //     </>
+            //   );
+            // }}
             nodeSize={(n) => n.size ?? null}
             // nodeColor={nodeColor}
             nodeColor={(d) => d.color}
             linkColor={(d) => d.color}
-            onNodeMouseOver={(n, _, position) => {
+            onNodeMouseOver={(n, _, _1, e) => {
               setHoverNode(n);
-              setNodePostion(position);
+
+              if (e) {
+                setNodePostion({
+                  x: e.clientX,
+                  y: e.clientY,
+                });
+              }
             }}
             onNodeMouseOut={() => {
               setHoverNode(null);
@@ -165,7 +187,7 @@ export default function GraphNew({ address, data, size }) {
             // linkWidth={(l: Link) => l.width ?? null}
             // linkColor={(l: Link) => l.color ?? null}
             curvedLinks
-            onClick={onCosmographClick}
+            // onClick={onCosmographClick}
           />
         )}
         <div className="sidebarStyle">
diff --git a/src/pages/robot/Brain/Brain.tsx b/src/pages/robot/Brain/Brain.tsx
index 9f8d086ad..8ec840827 100644
--- a/src/pages/robot/Brain/Brain.tsx
+++ b/src/pages/robot/Brain/Brain.tsx
@@ -52,6 +52,7 @@ function Brain() {
             {
               key: TabsKey.graph2,
               to: './graph2',
+              text: 'graph new',
             },
           ]}
           selected={selected}

From 34c235120e56b7f05962aeebbedaf0ed0a664330 Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Tue, 20 Aug 2024 11:19:49 +0700
Subject: [PATCH 03/11] updates

---
 .../CyberlinksGraphContainer.tsx              | 12 ++++--
 .../CyberlinksGraph/useCyberlinks.ts          |  4 +-
 .../cyberlinks/GraphNew/GraphNew.module.scss  |  4 +-
 src/features/cyberlinks/GraphNew/GraphNew.tsx | 35 ++++-------------
 src/pages/Brain/Brain.tsx                     | 27 ++++++++++++-
 src/pages/robot/Brain/Brain.tsx               | 38 +++++++++----------
 src/pages/robot/Brain/ui/GraphView.tsx        |  2 +-
 src/pages/robot/Brain/ui/TreedView.tsx        |  3 +-
 yarn.lock                                     |  2 +-
 9 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx b/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx
index 7965d1bc2..85601da2f 100644
--- a/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx
+++ b/src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx
@@ -7,12 +7,18 @@ import { PORTAL_ID } from '../../../containers/application/App';
 import GraphNew from '../GraphNew/GraphNew';
 import CyberlinksGraph from './CyberlinksGraph';
 
+enum Types {
+  '3d' = '3d',
+  '2d' = '2d',
+}
+
 type Props = {
   address?: string;
   toPortal?: boolean;
   size?: number;
-  limit?: number;
+  limit?: number | false;
   data?: any;
+  type?: Types;
 };
 
 function CyberlinksGraphContainer({
@@ -21,7 +27,7 @@ function CyberlinksGraphContainer({
   size,
   limit,
   data,
-  isNew,
+  type = Types['2d'],
 }: Props) {
   const { data: fetchData, loading } = useCyberlinks(
     { address },
@@ -33,7 +39,7 @@ function CyberlinksGraphContainer({
 
   const currentAddress = useAppSelector(selectCurrentAddress);
 
-  const Comp = isNew ? GraphNew : CyberlinksGraph;
+  const Comp = type === Types['2d'] ? GraphNew : CyberlinksGraph;
 
   const content = loading ? (
     <div
diff --git a/src/features/cyberlinks/CyberlinksGraph/useCyberlinks.ts b/src/features/cyberlinks/CyberlinksGraph/useCyberlinks.ts
index 92000b9af..9cbbafbaf 100644
--- a/src/features/cyberlinks/CyberlinksGraph/useCyberlinks.ts
+++ b/src/features/cyberlinks/CyberlinksGraph/useCyberlinks.ts
@@ -46,7 +46,7 @@ function useCyberlinks(
     limit = 1024,
     skip,
   }: {
-    limit?: number;
+    limit?: number | false;
     skip?: boolean;
   }
 ) {
@@ -65,7 +65,7 @@ function useCyberlinks(
     variables: {
       where,
       orderBy: { height: OrderBy.Desc },
-      limit,
+      limit: limit || undefined,
     },
     skip,
   });
diff --git a/src/features/cyberlinks/GraphNew/GraphNew.module.scss b/src/features/cyberlinks/GraphNew/GraphNew.module.scss
index 6410f3d55..375558b3c 100644
--- a/src/features/cyberlinks/GraphNew/GraphNew.module.scss
+++ b/src/features/cyberlinks/GraphNew/GraphNew.module.scss
@@ -8,9 +8,9 @@
 }
 
 .total {
-  top: 200px;
+  top: 250px;
   color: white;
-  left: 50%;
+  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
index c99569202..3aa384c7f 100644
--- a/src/features/cyberlinks/GraphNew/GraphNew.tsx
+++ b/src/features/cyberlinks/GraphNew/GraphNew.tsx
@@ -4,8 +4,6 @@ import {
   CosmographProvider,
   Cosmograph,
   CosmographRef,
-  CosmographHistogramRef,
-  CosmographTimelineRef,
   CosmographSearchRef,
   CosmographInputConfig,
 } from '@cosmograph/react';
@@ -16,23 +14,14 @@ import GraphHoverInfo from '../CyberlinksGraph/GraphHoverInfo/GraphHoverInfo';
 
 export default function GraphNew({ address, data, size }) {
   const cosmograph = useRef<CosmographRef>();
-  const histogram = useRef<CosmographHistogramRef<Node>>();
-  const timeline = useRef<CosmographTimelineRef<Link>>();
+  // const histogram = useRef<CosmographHistogramRef<Node>>();
+  // const timeline = useRef<CosmographTimelineRef<Link>>();
   const search = useRef<CosmographSearchRef>();
   const [degree, setDegree] = useState<number[]>([]);
 
   const [hoverNode, setHoverNode] = useState(null);
   const [nodePostion, setNodePostion] = useState(null);
 
-  // const { data } = useCyberlinks(
-  //   {
-  //     address,
-  //   },
-  //   {
-  //     limit: 1024,
-  //   }
-  // );
-
   const nodes = useMemo(() => {
     return (
       data?.nodes?.map((node) => {
@@ -58,8 +47,6 @@ export default function GraphNew({ address, data, size }) {
     );
   }, [data]);
 
-  // console.log(data);
-
   const scaleColor = useRef(
     scaleSymlog<string, string>()
       .range(['rgba(80, 105, 180, 0.75)', 'rgba(240, 105, 180, 0.75)'])
@@ -116,12 +103,13 @@ export default function GraphNew({ address, data, size }) {
   //   setSelectedNode(n);
   // }, []);
 
-  console.log(nodePostion);
+  // console.log(nodePostion);
 
   return (
     <div className={styles.wrapper}>
       <div className={styles.total}>
-        <p>total nodes {nodes.length} </p>
+        <p>total nodes: {nodes.length} </p>
+        <p>total links: {links.length} </p>
       </div>
       <GraphHoverInfo
         node={hoverNode}
@@ -144,28 +132,19 @@ export default function GraphNew({ address, data, size }) {
             className={styles.cosmographStyle}
             // showTopLabels={}
             // showTopLabelsLimit={10}
-            showFPSMonitor
+            showFPSMonitor={process.env.NODE_ENV === 'development'}
             // disableSimulation
             backgroundColor="transparent"
             showDynamicLabels={false}
             linkArrows={false}
             linkWidth={2}
             onClick={() => {
-              debugger;
               cosmograph.current?.pause();
             }}
             showLabelsFor={showLabelsFor}
             showHoveredNodeLabel={false}
             nodeLabelColor="white"
             hoveredNodeLabelColor="white"
-            // nodeLabelAccessor={(n) => {
-            //   return (
-            //     <>
-            //       <div>{n.id}</div>
-            //       <div>{n.value}</div>
-            //     </>
-            //   );
-            // }}
             nodeSize={(n) => n.size ?? null}
             // nodeColor={nodeColor}
             nodeColor={(d) => d.color}
@@ -186,7 +165,7 @@ export default function GraphNew({ address, data, size }) {
             }}
             // linkWidth={(l: Link) => l.width ?? null}
             // linkColor={(l: Link) => l.color ?? null}
-            curvedLinks
+            // curvedLinks
             // onClick={onCosmographClick}
           />
         )}
diff --git a/src/pages/Brain/Brain.tsx b/src/pages/Brain/Brain.tsx
index b7c6ff7e1..5fa0461f2 100644
--- a/src/pages/Brain/Brain.tsx
+++ b/src/pages/Brain/Brain.tsx
@@ -1,18 +1,41 @@
 import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
 import { ActionBar, Button } from 'src/components';
+import { useSearchParams } from 'react-router-dom';
+import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
 import styles from './Brain.module.scss';
 
+const DEFAULT_LIMIT = 10000;
+
 function Brain() {
+  const [searchParams] = useSearchParams();
+
+  const limit = Number(searchParams.get('limit')) || DEFAULT_LIMIT;
+
+  useAdviserTexts({
+    defaultText: 'cyber graph',
+  });
+
   return (
     <div className={styles.wrapper}>
-      <CyberlinksGraphContainer toPortal />
+      <CyberlinksGraphContainer toPortal limit={limit} />
+
+      <p
+        style={{
+          zIndex: 10,
+        }}
+      >
+        Limit is: {limit.toLocaleString()}
+        <br />
+        use url param to set different limit :
+        <a href="/brain?limit=500">/brain?limit=500</a>
+      </p>
 
       <ActionBar>
         <Button
           className={styles.link}
           link="https://cosmograph.app/run/?data=https://gateway.ipfs.cybernode.ai/ipfs/QmQ3snofqRrDhpANRCwZrCPG7rAvABrkL9KHreMtmYDiCL"
         >
-          Full graph <span />
+          External graph <span />
         </Button>
       </ActionBar>
     </div>
diff --git a/src/pages/robot/Brain/Brain.tsx b/src/pages/robot/Brain/Brain.tsx
index 8ec840827..66452e919 100644
--- a/src/pages/robot/Brain/Brain.tsx
+++ b/src/pages/robot/Brain/Brain.tsx
@@ -10,9 +10,9 @@ import GraphView from './ui/GraphView';
 import { LIMIT_GRAPH } from './utils';
 
 enum TabsKey {
-  list = 'list',
+  graph3d = 'graph3d',
   graph = 'graph',
-  graph2 = 'graph2',
+  list = 'list',
 }
 
 function Brain() {
@@ -27,7 +27,7 @@ function Brain() {
       () => (
         <>
           neurons public knowledge cybergraph <br />
-          {selected === TabsKey.graph && (
+          {selected === TabsKey.graph3d && (
             <> that is how last {LIMIT_GRAPH} cyberlinks looks like </>
           )}
         </>
@@ -41,18 +41,20 @@ function Brain() {
       <div className={styles.tabs}>
         <Tabs
           options={[
+            {
+              key: TabsKey.graph3d,
+              to: './graph3d',
+              text: '3d graph',
+            },
             {
               key: TabsKey.graph,
               to: './graph',
+              text: '2d graph',
             },
             {
               key: TabsKey.list,
               to: './list',
-            },
-            {
-              key: TabsKey.graph2,
-              to: './graph2',
-              text: 'graph new',
+              text: 'last cyberlinks',
             },
           ]}
           selected={selected}
@@ -64,23 +66,19 @@ function Brain() {
           <Route
             key={path}
             path={path}
-            element={<GraphView address={address} />}
+            element={
+              <CyberlinksGraphContainer
+                toPortal
+                limit={false}
+                address={address}
+              />
+            }
           />
         ))}
 
         <Route path="list" element={<TreedView address={address} />} />
 
-        <Route
-          path="graph2"
-          element={
-            <CyberlinksGraphContainer
-              toPortal
-              limit={99999}
-              isNew
-              address={address}
-            />
-          }
-        />
+        <Route path="graph3d" element={<GraphView address={address} />} />
       </Routes>
     </div>
   );
diff --git a/src/pages/robot/Brain/ui/GraphView.tsx b/src/pages/robot/Brain/ui/GraphView.tsx
index 202356780..0861d069a 100644
--- a/src/pages/robot/Brain/ui/GraphView.tsx
+++ b/src/pages/robot/Brain/ui/GraphView.tsx
@@ -10,7 +10,7 @@ function GraphView({ address }: { address?: string }) {
     }
   );
 
-  return <CyberlinksGraphContainer data={fetchData} toPortal />;
+  return <CyberlinksGraphContainer data={fetchData} toPortal type="3d" />;
 }
 
 export default GraphView;
diff --git a/src/pages/robot/Brain/ui/TreedView.tsx b/src/pages/robot/Brain/ui/TreedView.tsx
index bdb73bfd0..57f00230c 100644
--- a/src/pages/robot/Brain/ui/TreedView.tsx
+++ b/src/pages/robot/Brain/ui/TreedView.tsx
@@ -5,6 +5,7 @@ import {
   Order_By as OrderBy,
   useCyberlinksByParticleQuery,
 } from 'src/generated/graphql';
+import Loader2 from 'src/components/ui/Loader2';
 import { LIMIT_TREED } from '../utils';
 import TreedItem from './TreedItem/TreedItem';
 import styles from './TreedView.modile.scss';
@@ -55,7 +56,7 @@ function TreedView({ address }: { address?: string }) {
       dataLength={data?.cyberlinks.length || 0}
       next={fetchMoreData}
       hasMore={hasMore}
-      loader={<h4>Loading</h4>}
+      loader={<Loader2 />}
       className={styles.wrapper}
     >
       {data?.cyberlinks.map((item) => {
diff --git a/yarn.lock b/yarn.lock
index 7e323d680..f5a09bdcb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4410,7 +4410,7 @@
     d3-color "^3.1.0"
     rollup-plugin-rename-node-modules "^1.3.1"
 
-"@cosmograph/cosmos@1.6.1", "@cosmograph/cosmos@^1.6.1":
+"@cosmograph/cosmos@1.6.1":
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/@cosmograph/cosmos/-/cosmos-1.6.1.tgz#4901dc310b6ece34038e0d53531c6cabcacc0fa4"
   integrity sha512-A91YabqDxCRqYZXmlOs5ykqkDw1pui0TnuXA65sYFRHwskOJ+BNy7z2IFb/vVIBlsnl3Jdyzm9G93A/xipbHIA==

From 5fab70991c3a25b561542027648c1e72fd082341 Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Tue, 20 Aug 2024 14:20:40 +0700
Subject: [PATCH 04/11] updates

---
 src/layouts/Main.tsx                          |  7 +-
 src/pages/Brain/Brain.tsx                     | 48 +++++++++-----
 .../oracle/landing/OracleLanding.module.scss  | 64 ++++++++-----------
 src/pages/oracle/landing/OracleLanding.tsx    | 20 ++++--
 src/pages/robot/Brain/Brain.tsx               | 22 +++++--
 src/pages/robot/Brain/useGraphLimit.ts        | 16 +++++
 6 files changed, 107 insertions(+), 70 deletions(-)
 create mode 100644 src/pages/robot/Brain/useGraphLimit.ts

diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx
index 96ae3877b..abf33923e 100644
--- a/src/layouts/Main.tsx
+++ b/src/layouts/Main.tsx
@@ -13,6 +13,7 @@ import CircularMenu from 'src/components/appMenu/CircularMenu/CircularMenu';
 import TimeHistory from 'src/features/TimeHistory/TimeHistory';
 import MobileMenu from 'src/components/appMenu/MobileMenu/MobileMenu';
 import useCurrentAddress from 'src/hooks/useCurrentAddress';
+import { BrainBtn } from 'src/pages/oracle/landing/OracleLanding';
 import graphDataPrepared from '../pages/oracle/landing/graphDataPrepared.json';
 import stylesOracle from '../pages/oracle/landing/OracleLanding.module.scss';
 import SenseButton from '../features/sense/ui/SenseButton/SenseButton';
@@ -72,13 +73,13 @@ function MainLayout({ children }: { children: JSX.Element }) {
             to={link}
             className={stylesOracle.graphWrapper}
             style={{ bottom: '0px' }}
-
-            // className={stylesOracle.enlargeBtn}
-            // title="open full graph"
           >
+            <BrainBtn />
+
             {isRenderGraph && (
               <CyberlinksGraphContainer
                 size={graphSize}
+                type="3d"
                 data={graphDataPrepared}
               />
             )}
diff --git a/src/pages/Brain/Brain.tsx b/src/pages/Brain/Brain.tsx
index 5fa0461f2..73e8bbae2 100644
--- a/src/pages/Brain/Brain.tsx
+++ b/src/pages/Brain/Brain.tsx
@@ -1,15 +1,11 @@
 import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
 import { ActionBar, Button } from 'src/components';
-import { useSearchParams } from 'react-router-dom';
 import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
 import styles from './Brain.module.scss';
-
-const DEFAULT_LIMIT = 10000;
+import useGraphLimit from '../robot/Brain/useGraphLimit';
 
 function Brain() {
-  const [searchParams] = useSearchParams();
-
-  const limit = Number(searchParams.get('limit')) || DEFAULT_LIMIT;
+  const { limit, setSearchParams } = useGraphLimit();
 
   useAdviserTexts({
     defaultText: 'cyber graph',
@@ -19,16 +15,7 @@ function Brain() {
     <div className={styles.wrapper}>
       <CyberlinksGraphContainer toPortal limit={limit} />
 
-      <p
-        style={{
-          zIndex: 10,
-        }}
-      >
-        Limit is: {limit.toLocaleString()}
-        <br />
-        use url param to set different limit :
-        <a href="/brain?limit=500">/brain?limit=500</a>
-      </p>
+      <ParamsBlock limit={limit} setSearchParams={setSearchParams} />
 
       <ActionBar>
         <Button
@@ -43,3 +30,32 @@ function Brain() {
 }
 
 export default Brain;
+
+export function ParamsBlock({ limit, setSearchParams }) {
+  return (
+    <p
+      style={{
+        textAlign: 'center',
+        zIndex: 10,
+        position: 'relative',
+        marginBottom: 20,
+      }}
+    >
+      Limit is: {limit.toLocaleString()}
+      <br />
+      use url param to set different limit :
+      <a
+        href="/brain?limit=500"
+        onClick={(e) => {
+          e.preventDefault();
+
+          setSearchParams({
+            limit: 500,
+          });
+        }}
+      >
+        /brain?limit=500
+      </a>
+    </p>
+  );
+}
diff --git a/src/pages/oracle/landing/OracleLanding.module.scss b/src/pages/oracle/landing/OracleLanding.module.scss
index cc61f4fc6..c127d4137 100644
--- a/src/pages/oracle/landing/OracleLanding.module.scss
+++ b/src/pages/oracle/landing/OracleLanding.module.scss
@@ -1,4 +1,4 @@
-@import '../../../layouts/variables.module.scss';
+@import '../../../layouts/variables.module';
 
 $mobile-breakpoint: 1279px;
 
@@ -10,9 +10,9 @@ $mobile-breakpoint: 1279px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+
   // header, footer widths, TODO: use variables
   min-height: calc(100vh - $reservedTopHeight - $actionBarHeight);
-
   padding: 0 10px;
 
   // not good, need fix wrapper
@@ -30,14 +30,11 @@ $mobile-breakpoint: 1279px;
 .starsWrapper {
   z-index: -1;
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
 }
 
 .header {
-  margin: 0px auto;
+  margin: 0 auto;
   width: 415px;
 
   @media (width <= $mobile-breakpoint) {
@@ -102,13 +99,14 @@ $mobile-breakpoint: 1279px;
   h3,
   h4 {
     $animation-duration: 2s;
+
     animation-name: scaleInFadeIn;
     animation-duration: $animation-duration;
   }
 
   h2 {
     font-size: clamp(26px, 3.3vw, 50px);
-    color: rgba(255, 255, 255, 0.78);
+    color: rgb(255 255 255 / 78%);
     animation-delay: 0.3s;
     animation-fill-mode: forwards;
     opacity: 0;
@@ -121,7 +119,7 @@ $mobile-breakpoint: 1279px;
   h4 {
     margin-top: 17px;
     font-size: clamp(20px, 2.1vw, 32px);
-    color: rgba(255, 255, 255, 0.5);
+    color: rgb(255 255 255 / 50%);
     animation-delay: 0.6s;
     animation-fill-mode: forwards;
     opacity: 0;
@@ -138,51 +136,43 @@ $mobile-breakpoint: 1279px;
   justify-content: center;
 }
 
+.enlargeBtn {
+  z-index: 1;
+  width: 22px;
+  height: 22px;
+  background-image: url('images/enlarge.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  font-size: 0;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
 .graphWrapper {
   position: fixed;
-  left: 0px;
+  left: 0;
   bottom: 10px;
   z-index: 3;
-
   width: var(--graph-size);
   height: var(--graph-size);
   background-color: black;
-
   overflow: hidden;
-
   border-radius: 50% 50% 50% 0;
-  border: 1px solid rgba(118, 255, 3, 0.1);
+  border: 1px solid rgb(118 255 3 / 10%);
 
   .enlargeBtn {
-    float: right;
-    position: relative;
-    top: 2px;
-    right: 2px;
-
-    z-index: 1;
-
-    width: 22px;
-    height: 22px;
-
-    background-image: url('images/enlarge.svg');
-    background-size: contain;
-    background-repeat: no-repeat;
-
-    font-size: 0;
-
-    &:hover {
-      opacity: 0.8;
-    }
+    position: absolute;
+    bottom: 35px;
+    right: 35px;
   }
 
   &::after {
     content: '';
     position: absolute;
     pointer-events: none;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+    inset: 0;
     box-shadow: inset 0 0 50px 20px black;
   }
 }
diff --git a/src/pages/oracle/landing/OracleLanding.tsx b/src/pages/oracle/landing/OracleLanding.tsx
index fbff90bfd..22aad12e3 100644
--- a/src/pages/oracle/landing/OracleLanding.tsx
+++ b/src/pages/oracle/landing/OracleLanding.tsx
@@ -1,6 +1,6 @@
 import { ActionBar, Button, Tabs } from 'src/components';
 import { routes } from 'src/routes';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 // import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
 import { Stars } from 'src/containers/portal/components';
 
@@ -9,13 +9,13 @@ import { useDevice } from 'src/contexts/device';
 import { useAppDispatch } from 'src/redux/hooks';
 import { setFocus } from 'src/containers/application/Header/Commander/commander.redux';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
 import styles from './OracleLanding.module.scss';
 import KeywordButton from './components/KeywordButton/KeywordButton';
 
 import Stats from './Stats/Stats';
 // import graphDataPrepared from './graphDataPrepared.json';
 import { TitleType } from './type';
-import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
 
 const mapTitleTypeToTitle = {
   [TitleType.search]: 'search',
@@ -150,11 +150,7 @@ function OracleLanding() {
 
       {/* {!isMobile && (
         <div className={styles.graphWrapper}>
-          <Link
-            to={routes.brain.path}
-            className={styles.enlargeBtn}
-            title="open full graph"
-          />
+        
 
           {isRenderGraph && (
             <CyberlinksGraphContainer
@@ -224,3 +220,13 @@ function OracleLanding() {
 }
 
 export default OracleLanding;
+
+export function BrainBtn() {
+  return (
+    <Link
+      to={routes.brain.path}
+      className={styles.enlargeBtn}
+      title="open full graph"
+    />
+  );
+}
diff --git a/src/pages/robot/Brain/Brain.tsx b/src/pages/robot/Brain/Brain.tsx
index 66452e919..ce56a396b 100644
--- a/src/pages/robot/Brain/Brain.tsx
+++ b/src/pages/robot/Brain/Brain.tsx
@@ -3,11 +3,13 @@ import { Route, Routes, useParams } from 'react-router-dom';
 import { useMemo } from 'react';
 import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
 import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
+import { ParamsBlock } from 'src/pages/Brain/Brain';
 import { useRobotContext } from '../robot.context';
 import TreedView from './ui/TreedView';
 import styles from './Brain.module.scss';
 import GraphView from './ui/GraphView';
 import { LIMIT_GRAPH } from './utils';
+import useGraphLimit from './useGraphLimit';
 
 enum TabsKey {
   graph3d = 'graph3d',
@@ -66,13 +68,7 @@ function Brain() {
           <Route
             key={path}
             path={path}
-            element={
-              <CyberlinksGraphContainer
-                toPortal
-                limit={false}
-                address={address}
-              />
-            }
+            element={<Graph2d address={address} />}
           />
         ))}
 
@@ -85,3 +81,15 @@ function Brain() {
 }
 
 export default Brain;
+
+function Graph2d({ address }) {
+  const { limit, setSearchParams } = useGraphLimit();
+
+  return (
+    <div>
+      <ParamsBlock limit={limit} setSearchParams={setSearchParams} />
+
+      <CyberlinksGraphContainer toPortal limit={limit} address={address} />
+    </div>
+  );
+}
diff --git a/src/pages/robot/Brain/useGraphLimit.ts b/src/pages/robot/Brain/useGraphLimit.ts
new file mode 100644
index 000000000..84580064b
--- /dev/null
+++ b/src/pages/robot/Brain/useGraphLimit.ts
@@ -0,0 +1,16 @@
+import { useSearchParams } from 'react-router-dom';
+
+const DEFAULT_LIMIT = 30000;
+
+function useGraphLimit() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const limit = Number(searchParams.get('limit')) || DEFAULT_LIMIT;
+
+  return {
+    limit,
+    setSearchParams,
+  };
+}
+
+export default useGraphLimit;

From 35d174470ac168234f271165fb9f2f6b4887e2aa Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Tue, 20 Aug 2024 15:55:58 +0700
Subject: [PATCH 05/11] start

---
 src/generated/graphql.ts                      | 101 ++++++++++++++++++
 src/pages/robot/Brain/Brain.tsx               |   7 ++
 .../robot/Brain/ui/Particles/Particles.tsx    |  91 ++++++++++++++++
 .../graphql/particles/particles.graphql       |   8 ++
 .../particles/particlesAggregate.graphql      |   7 ++
 5 files changed, 214 insertions(+)
 create mode 100644 src/pages/robot/Brain/ui/Particles/Particles.tsx
 create mode 100644 src/services/backend/services/indexer/graphql/particles/particles.graphql
 create mode 100644 src/services/backend/services/indexer/graphql/particles/particlesAggregate.graphql

diff --git a/src/generated/graphql.ts b/src/generated/graphql.ts
index f50f9dbf0..a219cb32e 100644
--- a/src/generated/graphql.ts
+++ b/src/generated/graphql.ts
@@ -9845,6 +9845,21 @@ export type MessagesByAddressSenseWsSubscriptionVariables = Exact<{
 
 export type MessagesByAddressSenseWsSubscription = { messages_by_address: Array<{ transaction_hash: string, index: any, value: any, type: string, transaction: { success: boolean, memo?: string | null, block: { timestamp: any, height: any } } }> };
 
+export type ParticlesQueryVariables = Exact<{
+  neuron?: InputMaybe<Scalars['String']['input']>;
+  limit?: InputMaybe<Scalars['Int']['input']>;
+}>;
+
+
+export type ParticlesQuery = { particles: Array<{ id: number, particle: string, timestamp: any, transaction_hash: string }> };
+
+export type ParticlesAggregateQueryVariables = Exact<{
+  neuron?: InputMaybe<Scalars['String']['input']>;
+}>;
+
+
+export type ParticlesAggregateQuery = { particles_aggregate: { aggregate?: { count: number } | null } };
+
 export type TransactionCountQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -10381,6 +10396,92 @@ export function useMessagesByAddressSenseWsSubscription(baseOptions?: Apollo.Sub
       }
 export type MessagesByAddressSenseWsSubscriptionHookResult = ReturnType<typeof useMessagesByAddressSenseWsSubscription>;
 export type MessagesByAddressSenseWsSubscriptionResult = Apollo.SubscriptionResult<MessagesByAddressSenseWsSubscription>;
+export const ParticlesDocument = gql`
+    query particles($neuron: String, $limit: Int = 10) {
+  particles(where: {neuron: {_eq: $neuron}}, limit: $limit) {
+    id
+    particle
+    timestamp
+    transaction_hash
+  }
+}
+    `;
+
+/**
+ * __useParticlesQuery__
+ *
+ * To run a query within a React component, call `useParticlesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useParticlesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useParticlesQuery({
+ *   variables: {
+ *      neuron: // value for 'neuron'
+ *      limit: // value for 'limit'
+ *   },
+ * });
+ */
+export function useParticlesQuery(baseOptions?: Apollo.QueryHookOptions<ParticlesQuery, ParticlesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ParticlesQuery, ParticlesQueryVariables>(ParticlesDocument, options);
+      }
+export function useParticlesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ParticlesQuery, ParticlesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ParticlesQuery, ParticlesQueryVariables>(ParticlesDocument, options);
+        }
+export function useParticlesSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<ParticlesQuery, ParticlesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<ParticlesQuery, ParticlesQueryVariables>(ParticlesDocument, options);
+        }
+export type ParticlesQueryHookResult = ReturnType<typeof useParticlesQuery>;
+export type ParticlesLazyQueryHookResult = ReturnType<typeof useParticlesLazyQuery>;
+export type ParticlesSuspenseQueryHookResult = ReturnType<typeof useParticlesSuspenseQuery>;
+export type ParticlesQueryResult = Apollo.QueryResult<ParticlesQuery, ParticlesQueryVariables>;
+export const ParticlesAggregateDocument = gql`
+    query particlesAggregate($neuron: String) {
+  particles_aggregate(where: {neuron: {_eq: $neuron}}) {
+    aggregate {
+      count
+    }
+  }
+}
+    `;
+
+/**
+ * __useParticlesAggregateQuery__
+ *
+ * To run a query within a React component, call `useParticlesAggregateQuery` and pass it any options that fit your needs.
+ * When your component renders, `useParticlesAggregateQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useParticlesAggregateQuery({
+ *   variables: {
+ *      neuron: // value for 'neuron'
+ *   },
+ * });
+ */
+export function useParticlesAggregateQuery(baseOptions?: Apollo.QueryHookOptions<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>(ParticlesAggregateDocument, options);
+      }
+export function useParticlesAggregateLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>(ParticlesAggregateDocument, options);
+        }
+export function useParticlesAggregateSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>(ParticlesAggregateDocument, options);
+        }
+export type ParticlesAggregateQueryHookResult = ReturnType<typeof useParticlesAggregateQuery>;
+export type ParticlesAggregateLazyQueryHookResult = ReturnType<typeof useParticlesAggregateLazyQuery>;
+export type ParticlesAggregateSuspenseQueryHookResult = ReturnType<typeof useParticlesAggregateSuspenseQuery>;
+export type ParticlesAggregateQueryResult = Apollo.QueryResult<ParticlesAggregateQuery, ParticlesAggregateQueryVariables>;
 export const TransactionCountDocument = gql`
     query transactionCount {
   transaction_aggregate {
diff --git a/src/pages/robot/Brain/Brain.tsx b/src/pages/robot/Brain/Brain.tsx
index ce56a396b..21c6bb09e 100644
--- a/src/pages/robot/Brain/Brain.tsx
+++ b/src/pages/robot/Brain/Brain.tsx
@@ -10,6 +10,7 @@ import styles from './Brain.module.scss';
 import GraphView from './ui/GraphView';
 import { LIMIT_GRAPH } from './utils';
 import useGraphLimit from './useGraphLimit';
+import Particles from './ui/Particles/Particles';
 
 enum TabsKey {
   graph3d = 'graph3d',
@@ -58,6 +59,11 @@ function Brain() {
               to: './list',
               text: 'last cyberlinks',
             },
+            {
+              key: TabsKey.list,
+              to: './particles',
+              text: 'particles',
+            },
           ]}
           selected={selected}
         />
@@ -73,6 +79,7 @@ function Brain() {
         ))}
 
         <Route path="list" element={<TreedView address={address} />} />
+        <Route path="particles" element={<Particles />} />
 
         <Route path="graph3d" element={<GraphView address={address} />} />
       </Routes>
diff --git a/src/pages/robot/Brain/ui/Particles/Particles.tsx b/src/pages/robot/Brain/ui/Particles/Particles.tsx
new file mode 100644
index 000000000..5ea99475f
--- /dev/null
+++ b/src/pages/robot/Brain/ui/Particles/Particles.tsx
@@ -0,0 +1,91 @@
+import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
+import {
+  ParticlesQuery,
+  useParticlesAggregateQuery,
+  useParticlesQuery,
+} from 'src/generated/graphql';
+import { useRobotContext } from 'src/pages/robot/robot.context';
+
+import { createColumnHelper } from '@tanstack/react-table';
+import Table from 'src/components/Table/Table';
+import ContentItem from 'src/components/ContentItem/contentItem';
+import { Display, DisplayTitle } from 'src/components';
+import { useState } from 'react';
+
+const columnHelper = createColumnHelper<ParticlesQuery['particles'][0]>();
+
+const LIMIT = 200;
+
+function Particles() {
+  const { address } = useRobotContext();
+  const [offset, setOffset] = useState(0);
+
+  const { data, loading, error } = useParticlesQuery({
+    variables: {
+      neuron: address,
+      limit: offset + LIMIT,
+    },
+  });
+
+  const particleAggregateQuery = useParticlesAggregateQuery({
+    variables: {
+      neuron: address,
+    },
+  });
+
+  useAdviserTexts({
+    defaultText: 'Particles',
+    isLoading: loading,
+    error,
+  });
+
+  console.log(data);
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        zIndex: 2,
+      }}
+    >
+      <Display
+        title={
+          <DisplayTitle title="Particles">
+            <p>
+              {
+                particleAggregateQuery.data?.particles_aggregate.aggregate
+                  ?.count
+              }{' '}
+              particles
+            </p>
+          </DisplayTitle>
+        }
+      >
+        {/* <InfiniteScroll
+          dataLength={data?.cyberlinks.length || 0}
+          next={fetchMoreData}
+          hasMore={hasMore}
+          loader={<Loader2 />}
+        > */}
+        <Table
+          columns={[
+            columnHelper.accessor('particle', {
+              header: 'CID',
+              cell: (info) => {
+                return <ContentItem cid={info.getValue()} />;
+              },
+            }),
+            columnHelper.accessor('timestamp', {
+              header: 'timestamp',
+              cell: (info) => info.getValue(),
+            }),
+          ]}
+          data={data?.particles || []}
+        />
+        {/* </InfiniteScroll> */}
+      </Display>
+    </div>
+  );
+}
+
+export default Particles;
diff --git a/src/services/backend/services/indexer/graphql/particles/particles.graphql b/src/services/backend/services/indexer/graphql/particles/particles.graphql
new file mode 100644
index 000000000..f439b1c13
--- /dev/null
+++ b/src/services/backend/services/indexer/graphql/particles/particles.graphql
@@ -0,0 +1,8 @@
+query particles($neuron: String, $limit: Int = 10) {
+  particles(where: { neuron: { _eq: $neuron } }, limit: $limit) {
+    id
+    particle
+    timestamp
+    transaction_hash
+  }
+}
diff --git a/src/services/backend/services/indexer/graphql/particles/particlesAggregate.graphql b/src/services/backend/services/indexer/graphql/particles/particlesAggregate.graphql
new file mode 100644
index 000000000..ad735485d
--- /dev/null
+++ b/src/services/backend/services/indexer/graphql/particles/particlesAggregate.graphql
@@ -0,0 +1,7 @@
+query particlesAggregate($neuron: String) {
+  particles_aggregate(where: { neuron: { _eq: $neuron } }) {
+    aggregate {
+      count
+    }
+  }
+}

From 858b473b226c156f61aa00ce98d05a9f0bd5009d Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Tue, 17 Sep 2024 09:47:54 +0700
Subject: [PATCH 06/11] fix

---
 .../GraphHoverInfo/GraphHoverInfo.tsx         | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.tsx b/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.tsx
index caf914701..8053a870f 100644
--- a/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.tsx
+++ b/src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.tsx
@@ -19,21 +19,21 @@ function HoverInfo({ node, camera, size, left, top }: Props) {
       return null;
     }
 
-  //   const { x, y, z } = node;
-  //   const vector = new THREE.Vector3(x, y, z);
-  //   vector.project(camera);
+    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 widthHalf = window.innerWidth / 2;
+    const heightHalf = window.innerHeight / 2;
 
-  //   const posX = vector.x * widthHalf + widthHalf;
-  //   const posY = -(vector.y * heightHalf) + heightHalf;
+    const posX = vector.x * widthHalf + widthHalf;
+    const posY = -(vector.y * heightHalf) + heightHalf;
 
-  //   return {
-  //     posX,
-  //     posY,
-  //   };
-  // }, [camera, node]);
+    return {
+      posX,
+      posY,
+    };
+  }, [camera, node]);
 
   if (calc) {
     const { posX, posY } = calc;

From 840f5af3c5c18a18529baa6606a99dd8a7b8b5a3 Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Tue, 17 Sep 2024 09:48:37 +0700
Subject: [PATCH 07/11] fix

---
 src/pages/oracle/landing/OracleLanding.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/oracle/landing/OracleLanding.tsx b/src/pages/oracle/landing/OracleLanding.tsx
index 8d2921234..dce4162d8 100644
--- a/src/pages/oracle/landing/OracleLanding.tsx
+++ b/src/pages/oracle/landing/OracleLanding.tsx
@@ -1,6 +1,6 @@
 import { ActionBar, Button, Tabs } from 'src/components';
 import { routes } from 'src/routes';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 // import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
 import { Stars } from 'src/containers/portal/components';
 

From d4cc514354ffcad21a30c8b0e7c3bd6ee36415c8 Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Tue, 17 Sep 2024 12:42:52 +0700
Subject: [PATCH 08/11] update

---
 .../search/Spark/Meta/Meta.module.scss        |   5 -
 src/components/search/Spark/Meta/Meta.tsx     |  19 +--
 .../components/AdviserMeta/AdviserMeta.tsx    |  11 +-
 src/containers/ipfs/ipfs.tsx                  |  12 +-
 .../cyberlinks/hooks/useCyberlinksCount.ts    |   2 +-
 .../ParticleSize/ParticleSize.module.scss     |   3 +
 .../particle/ParticleSize/ParticleSize.tsx    |  36 +++++
 src/generated/graphql.ts                      |   6 +-
 .../Brain/ui/Particles/Particles.module.scss  |   5 +
 .../robot/Brain/ui/Particles/Particles.tsx    | 149 +++++++++++++-----
 .../graphql/particles/particles.graphql       |  19 ++-
 src/utils/date.ts                             |   4 -
 12 files changed, 186 insertions(+), 85 deletions(-)
 create mode 100644 src/features/particle/ParticleSize/ParticleSize.module.scss
 create mode 100644 src/features/particle/ParticleSize/ParticleSize.tsx
 create mode 100644 src/pages/robot/Brain/ui/Particles/Particles.module.scss

diff --git a/src/components/search/Spark/Meta/Meta.module.scss b/src/components/search/Spark/Meta/Meta.module.scss
index e5d423fce..18bbfb7f3 100644
--- a/src/components/search/Spark/Meta/Meta.module.scss
+++ b/src/components/search/Spark/Meta/Meta.module.scss
@@ -5,7 +5,6 @@
 
   // temp
   z-index: 1;
-
   font-size: 14px;
 
   & > :first-child {
@@ -13,7 +12,3 @@
     top: 4px;
   }
 }
-
-.size {
-  white-space: nowrap;
-}
diff --git a/src/components/search/Spark/Meta/Meta.tsx b/src/components/search/Spark/Meta/Meta.tsx
index e7802d1e7..5f3221305 100644
--- a/src/components/search/Spark/Meta/Meta.tsx
+++ b/src/components/search/Spark/Meta/Meta.tsx
@@ -1,10 +1,7 @@
-import useQueueIpfsContent from 'src/hooks/useQueueIpfsContent';
-import { formatCurrency } from 'src/utils/utils';
-import { PREFIXES } from 'src/containers/ipfs/components/metaInfo';
 import { useNavigate } from 'react-router-dom';
 import { routes } from 'src/routes';
-import { useEffect } from 'react';
 import useCyberlinksCount from 'src/features/cyberlinks/hooks/useCyberlinksCount';
+import ParticleSize from 'src/features/particle/ParticleSize/ParticleSize';
 import Links from './Links/Links';
 import styles from './Meta.module.scss';
 
@@ -13,18 +10,10 @@ type Props = {
 };
 
 function Meta({ cid }: Props) {
-  const { content, fetchParticle } = useQueueIpfsContent(cid);
-
   const { data: count } = useCyberlinksCount(cid);
 
-  useEffect(() => {
-    fetchParticle && (async () => fetchParticle(cid))();
-  }, [cid, fetchParticle]);
-
   const navigate = useNavigate();
 
-  const size = content?.meta?.size;
-
   return (
     <div className={styles.meta}>
       <Links
@@ -35,11 +24,7 @@ function Meta({ cid }: Props) {
         }}
       />
 
-      {size && (
-        <span className={styles.size}>
-          🟥 {formatCurrency(size, 'B', 0, PREFIXES)}
-        </span>
-      )}
+      <ParticleSize cid={cid} />
     </div>
   );
 }
diff --git a/src/containers/ipfs/components/AdviserMeta/AdviserMeta.tsx b/src/containers/ipfs/components/AdviserMeta/AdviserMeta.tsx
index 8b3e12d71..d43252f9b 100644
--- a/src/containers/ipfs/components/AdviserMeta/AdviserMeta.tsx
+++ b/src/containers/ipfs/components/AdviserMeta/AdviserMeta.tsx
@@ -1,19 +1,18 @@
 import { Account } from 'src/components';
-import { timeSince, formatCurrency } from 'src/utils/utils';
+import { timeSince } from 'src/utils/utils';
 import useRank from 'src/features/cyberlinks/rank/useRank';
 import { Link } from 'react-router-dom';
 import { routes } from 'src/routes';
+import ParticleSize from 'src/features/particle/ParticleSize/ParticleSize';
 import useGetCreator from '../../hooks/useGetCreator';
-import { PREFIXES } from '../metaInfo';
 import styles from './AdviserMeta.module.scss';
 
 type Props = {
   cid: string;
   type: string | undefined;
-  size: number | bigint | undefined;
 };
 
-function AdviserMeta({ cid, type, size }: Props) {
+function AdviserMeta({ cid, type }: Props) {
   const { creator } = useGetCreator(cid);
   const rank = useRank(cid);
 
@@ -47,9 +46,7 @@ function AdviserMeta({ cid, type, size }: Props) {
         </div>
       )}
       <div className={styles.right}>
-        <span>
-          🟥 {size ? formatCurrency(size, 'B', 0, PREFIXES) : 'unknown'}
-        </span>
+        <ParticleSize cid={cid} />
         <Link to={routes.robot.routes.soul.path}>🌓</Link>
       </div>
     </div>
diff --git a/src/containers/ipfs/ipfs.tsx b/src/containers/ipfs/ipfs.tsx
index 8d5d190ad..dfa9fa9ec 100644
--- a/src/containers/ipfs/ipfs.tsx
+++ b/src/containers/ipfs/ipfs.tsx
@@ -26,6 +26,7 @@ function Ipfs() {
   const { setAdviser } = useAdviser();
 
   const isText = useMemo(() => !query.match(PATTERN_IPFS_HASH), [query]);
+
   useEffect(() => {
     if (!isReady) {
       return;
@@ -41,7 +42,7 @@ function Ipfs() {
       })();
     }
   }, [isText, isReady, query, ipfsApi, isIpfsInitialized]);
-  useEffect(() => {}, [details]);
+
   useEffect(() => {
     if (!status) {
       return;
@@ -61,14 +62,7 @@ function Ipfs() {
         'yellow'
       );
     } else if (status === 'completed') {
-      setAdviser(
-        <AdviserMeta
-          cid={cid}
-          type={details?.type}
-          size={content?.meta?.size || details?.content?.length}
-        />,
-        'purple'
-      );
+      setAdviser(<AdviserMeta cid={cid} type={details?.type} />, 'purple');
     }
   }, [details, setAdviser, cid, content, status]);
 
diff --git a/src/features/cyberlinks/hooks/useCyberlinksCount.ts b/src/features/cyberlinks/hooks/useCyberlinksCount.ts
index 7c668f115..26a5e7011 100644
--- a/src/features/cyberlinks/hooks/useCyberlinksCount.ts
+++ b/src/features/cyberlinks/hooks/useCyberlinksCount.ts
@@ -4,7 +4,7 @@ const getVar = (type: 'from' | 'to', cid: string, neuron) => {
   return { [`particle_${type}`]: { _eq: cid }, neuron: { _eq: neuron } };
 };
 
-function useCyberlinksCount(cid: string, neuron) {
+function useCyberlinksCount(cid: string, neuron?: string) {
   const toCountQuery = useCyberlinksCountByParticleQuery({
     variables: { where: getVar('to', cid, neuron) },
   });
diff --git a/src/features/particle/ParticleSize/ParticleSize.module.scss b/src/features/particle/ParticleSize/ParticleSize.module.scss
new file mode 100644
index 000000000..4e0cd13f0
--- /dev/null
+++ b/src/features/particle/ParticleSize/ParticleSize.module.scss
@@ -0,0 +1,3 @@
+.size {
+  white-space: nowrap;
+}
diff --git a/src/features/particle/ParticleSize/ParticleSize.tsx b/src/features/particle/ParticleSize/ParticleSize.tsx
new file mode 100644
index 000000000..96d5104f2
--- /dev/null
+++ b/src/features/particle/ParticleSize/ParticleSize.tsx
@@ -0,0 +1,36 @@
+import { formatCurrency } from 'src/utils/utils';
+import { PREFIXES } from 'src/containers/ipfs/components/metaInfo';
+import useParticle from '../../../hooks/useParticle';
+import styles from './ParticleSize.module.scss';
+
+// for future use if no UI needed
+// eslint-disable-next-line import/no-unused-modules
+export function useParticleSize(cid: string) {
+  const { content, details, status } = useParticle(cid);
+
+  const size = content?.meta?.size || details?.content?.length;
+
+  return {
+    size,
+    isLoading: status === 'pending' || status === 'executing',
+  };
+}
+
+function ParticleSize({ cid }: { cid: string }) {
+  const { isLoading, size } = useParticleSize(cid);
+
+  let content;
+
+  if (isLoading) {
+    // use Loading component
+    content = 'loading...';
+  } else if (size) {
+    content = formatCurrency(size, 'B', 0, PREFIXES);
+  } else {
+    content = 'unknown';
+  }
+
+  return <span className={styles.size}>🟥 {content}</span>;
+}
+
+export default ParticleSize;
diff --git a/src/generated/graphql.ts b/src/generated/graphql.ts
index a219cb32e..54a92e2a2 100644
--- a/src/generated/graphql.ts
+++ b/src/generated/graphql.ts
@@ -9848,6 +9848,7 @@ export type MessagesByAddressSenseWsSubscription = { messages_by_address: Array<
 export type ParticlesQueryVariables = Exact<{
   neuron?: InputMaybe<Scalars['String']['input']>;
   limit?: InputMaybe<Scalars['Int']['input']>;
+  offset?: InputMaybe<Scalars['Int']['input']>;
 }>;
 
 
@@ -10397,8 +10398,8 @@ export function useMessagesByAddressSenseWsSubscription(baseOptions?: Apollo.Sub
 export type MessagesByAddressSenseWsSubscriptionHookResult = ReturnType<typeof useMessagesByAddressSenseWsSubscription>;
 export type MessagesByAddressSenseWsSubscriptionResult = Apollo.SubscriptionResult<MessagesByAddressSenseWsSubscription>;
 export const ParticlesDocument = gql`
-    query particles($neuron: String, $limit: Int = 10) {
-  particles(where: {neuron: {_eq: $neuron}}, limit: $limit) {
+    query particles($neuron: String, $limit: Int = 10, $offset: Int = 0) {
+  particles(where: {neuron: {_eq: $neuron}}, limit: $limit, offset: $offset) {
     id
     particle
     timestamp
@@ -10421,6 +10422,7 @@ export const ParticlesDocument = gql`
  *   variables: {
  *      neuron: // value for 'neuron'
  *      limit: // value for 'limit'
+ *      offset: // value for 'offset'
  *   },
  * });
  */
diff --git a/src/pages/robot/Brain/ui/Particles/Particles.module.scss b/src/pages/robot/Brain/ui/Particles/Particles.module.scss
new file mode 100644
index 000000000..275cba72a
--- /dev/null
+++ b/src/pages/robot/Brain/ui/Particles/Particles.module.scss
@@ -0,0 +1,5 @@
+.particleContent {
+  max-height: 60px;
+  display: block;
+  overflow: auto;
+}
diff --git a/src/pages/robot/Brain/ui/Particles/Particles.tsx b/src/pages/robot/Brain/ui/Particles/Particles.tsx
index 5ea99475f..ccc9dbaa2 100644
--- a/src/pages/robot/Brain/ui/Particles/Particles.tsx
+++ b/src/pages/robot/Brain/ui/Particles/Particles.tsx
@@ -9,30 +9,68 @@ import { useRobotContext } from 'src/pages/robot/robot.context';
 import { createColumnHelper } from '@tanstack/react-table';
 import Table from 'src/components/Table/Table';
 import ContentItem from 'src/components/ContentItem/contentItem';
-import { Display, DisplayTitle } from 'src/components';
+import { Display, Rank } from 'src/components';
 import { useState } from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import Loader2 from 'src/components/ui/Loader2';
+import ParticleSize from 'src/features/particle/ParticleSize/ParticleSize';
+import { Link, useNavigate } from 'react-router-dom';
+import { routes } from 'src/routes';
+import useRank from 'src/features/cyberlinks/rank/useRank';
+import styles from './Particles.module.scss';
 
 const columnHelper = createColumnHelper<ParticlesQuery['particles'][0]>();
 
-const LIMIT = 200;
+const LIMIT = 20;
+
+function Rank2({ cid }) {
+  const rank = useRank(cid);
+
+  return <span>{rank}</span>;
+}
 
 function Particles() {
   const { address } = useRobotContext();
-  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  // const [offset, setOffset] = useState(0);
+
+  const navigate = useNavigate();
 
-  const { data, loading, error } = useParticlesQuery({
+  const { data, loading, error, fetchMore } = useParticlesQuery({
     variables: {
       neuron: address,
-      limit: offset + LIMIT,
+      limit: LIMIT,
     },
   });
 
+  console.log(data);
+
   const particleAggregateQuery = useParticlesAggregateQuery({
     variables: {
       neuron: address,
     },
   });
 
+  function fetch() {
+    fetchMore({
+      variables: {
+        offset: data?.particles.length,
+      },
+      updateQuery: (prev, { fetchMoreResult }) => {
+        if (!fetchMoreResult) {
+          return prev;
+        }
+
+        setHasMore(fetchMoreResult.particles.length > 0);
+
+        return {
+          ...prev,
+          particles: [...prev.particles, ...fetchMoreResult.particles],
+        };
+      },
+    });
+  }
+
   useAdviserTexts({
     defaultText: 'Particles',
     isLoading: loading,
@@ -41,6 +79,9 @@ function Particles() {
 
   console.log(data);
 
+  const total =
+    particleAggregateQuery.data?.particles_aggregate.aggregate?.count;
+
   return (
     <div
       style={{
@@ -48,41 +89,73 @@ function Particles() {
         zIndex: 2,
       }}
     >
-      <Display
-        title={
-          <DisplayTitle title="Particles">
-            <p>
-              {
-                particleAggregateQuery.data?.particles_aggregate.aggregate
-                  ?.count
-              }{' '}
-              particles
-            </p>
-          </DisplayTitle>
-        }
-      >
-        {/* <InfiniteScroll
-          dataLength={data?.cyberlinks.length || 0}
-          next={fetchMoreData}
+      <Display>
+        <p>{total} particles</p>
+      </Display>
+      <br />
+      <Display noPadding>
+        <InfiniteScroll
+          dataLength={data?.particles.length || 0}
+          next={fetch}
           hasMore={hasMore}
           loader={<Loader2 />}
-        > */}
-        <Table
-          columns={[
-            columnHelper.accessor('particle', {
-              header: 'CID',
-              cell: (info) => {
-                return <ContentItem cid={info.getValue()} />;
-              },
-            }),
-            columnHelper.accessor('timestamp', {
-              header: 'timestamp',
-              cell: (info) => info.getValue(),
-            }),
-          ]}
-          data={data?.particles || []}
-        />
-        {/* </InfiniteScroll> */}
+        >
+          <Table
+            onSelect={(row) => {
+              const cid = data!.particles[row].particle;
+
+              navigate(routes.oracle.ask.getLink(cid));
+            }}
+            columns={[
+              columnHelper.accessor('particle', {
+                header: 'CID',
+                id: 'cid',
+                cell: (info) => {
+                  return (
+                    <ContentItem
+                      cid={info.getValue()}
+                      className={styles.particleContent}
+                    />
+                  );
+                },
+              }),
+              columnHelper.accessor('timestamp', {
+                header: 'timestamp',
+                cell: (info) => {
+                  const hash = info.row.original.transaction_hash;
+                  // return new Date(info.getValue()).toLocaleString();
+                  return (
+                    <Link to={routes.txExplorer.getLink(hash)}>
+                      {new Intl.DateTimeFormat(navigator.language, {
+                        dateStyle: 'medium',
+                        timeStyle: 'short',
+                      }).format(new Date(info.getValue()))}
+                    </Link>
+                  );
+                },
+              }),
+              columnHelper.accessor('particle', {
+                header: 'size',
+                id: 'size',
+                cell: (info) => {
+                  return <ParticleSize cid={info.getValue()} />;
+                },
+              }),
+              columnHelper.accessor('particle', {
+                header: (
+                  <>
+                    rank <Rank />
+                  </>
+                ),
+                id: 'rank',
+                cell: (info) => {
+                  return <Rank2 cid={info.getValue()} />;
+                },
+              }),
+            ]}
+            data={data?.particles || []}
+          />
+        </InfiniteScroll>
       </Display>
     </div>
   );
diff --git a/src/services/backend/services/indexer/graphql/particles/particles.graphql b/src/services/backend/services/indexer/graphql/particles/particles.graphql
index f439b1c13..9b30bb771 100644
--- a/src/services/backend/services/indexer/graphql/particles/particles.graphql
+++ b/src/services/backend/services/indexer/graphql/particles/particles.graphql
@@ -1,5 +1,20 @@
-query particles($neuron: String, $limit: Int = 10) {
-  particles(where: { neuron: { _eq: $neuron } }, limit: $limit) {
+# input OrderByInput {
+#   timestamp: order_by
+#   id: order_by
+# }
+
+query particles(
+  $neuron: String
+  $limit: Int = 10
+  $offset: Int = 0
+) # $orderBy: OrderByInput
+{
+  particles(
+    where: { neuron: { _eq: $neuron } }
+    # order_by: $orderBy
+    limit: $limit
+    offset: $offset
+  ) {
     id
     particle
     timestamp
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 8cab5cdb3..9e4f8da02 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -14,10 +14,6 @@ function roundMilliseconds(dateTimeString: string) {
   date.setMilliseconds(roundedMilliseconds);
   return dateFormat(date, 'yyyy-mm-dd"T"HH:MM:ss.l');
 }
-function getCurrentTimezoneOffset() {
-  const now = new Date();
-  return -now.getTimezoneOffset() / 60;
-}
 
 function pluralizeUnit(quantity: number, unit: string): string {
   return quantity === 1 ? unit : `${unit}s`;

From 50457c8d18678de4b52dd26286ebc43ad05b12a0 Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Tue, 17 Sep 2024 14:42:16 +0700
Subject: [PATCH 09/11] try light weight build for netlify

---
 .../cyberlinks/GraphNew/GraphNew.mock.tsx        | 16 ++++++++++++++++
 src/router.tsx                                   |  3 +--
 webpack.config.common.js                         |  6 ++++++
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/features/cyberlinks/GraphNew/GraphNew.mock.tsx

diff --git a/src/features/cyberlinks/GraphNew/GraphNew.mock.tsx b/src/features/cyberlinks/GraphNew/GraphNew.mock.tsx
new file mode 100644
index 000000000..16a1b531e
--- /dev/null
+++ b/src/features/cyberlinks/GraphNew/GraphNew.mock.tsx
@@ -0,0 +1,16 @@
+function GraphNewMock(): JSX.Element {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        zIndex: 10,
+        color: 'white',
+        top: '50%',
+      }}
+    >
+      2d graph is disabled for netlify builds
+    </div>
+  );
+}
+
+export default GraphNewMock;
diff --git a/src/router.tsx b/src/router.tsx
index 8f73a59ae..99a1c9cc3 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -55,7 +55,6 @@ import Learn from './pages/oracle/Learn/Learn';
 import ToOracleAsk from './pages/redirects/ToOracleAsk';
 import Social from './pages/Social/Social';
 import Brain from './pages/Brain/Brain';
-import Cybernet from './features/cybernet/ui/Cybernet';
 import Settings from './pages/Settings/Settings';
 import FreestyleIde from './pages/robot/Soul/RuneEditor/FreestyleIde/FreestyleIde';
 import Map from './pages/Portal/Map/Map';
@@ -220,7 +219,7 @@ function AppRouter() {
 
           <Route path="/nebula" element={<Nebula />} />
 
-          <Route path="/cyberver/*" element={<Cybernet />} />
+          {/* <Route path="/cyberver/*" element={<Cybernet />} /> */}
 
           <Route path="/keys" element={<Keys />} />
 
diff --git a/webpack.config.common.js b/webpack.config.common.js
index 5f90d1fc9..c05eaede9 100644
--- a/webpack.config.common.js
+++ b/webpack.config.common.js
@@ -77,6 +77,12 @@ const config = {
           throw new Error(`Not found ${mod}`);
       }
     }),
+    new webpack.NormalModuleReplacementPlugin(/\/GraphNew/, (resource) => {
+      resource.request = resource.request.replace(
+        /w\/GraphNew/,
+        'w/GraphNew.mock'
+      );
+    }),
     new CleanWebpackPlugin(),
     new BootloaderPlugin(HTMLWebpackPlugin, {
       script: './src/components/loader/loader.js',

From 21997936e18304b6763e9fd1719e1d3e593e7f0a Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Tue, 17 Sep 2024 15:03:55 +0700
Subject: [PATCH 10/11] update

---
 src/generated/graphql.ts                      | 49 +++++++++++++++++++
 .../robot/Brain/ui/Particles/Particles.tsx    | 41 ++++++++++++++--
 .../graphql/cyberlinksCountByNeuron.graphql   |  9 ++++
 3 files changed, 95 insertions(+), 4 deletions(-)

diff --git a/src/generated/graphql.ts b/src/generated/graphql.ts
index 54a92e2a2..5c2087880 100644
--- a/src/generated/graphql.ts
+++ b/src/generated/graphql.ts
@@ -9805,6 +9805,13 @@ export type CyberlinksCountByNeuronQueryVariables = Exact<{
 
 export type CyberlinksCountByNeuronQuery = { cyberlinks_aggregate: { aggregate?: { count: number } | null } };
 
+export type CyberlinksCountByNeuron2QueryVariables = Exact<{
+  address?: InputMaybe<Scalars['String']['input']>;
+}>;
+
+
+export type CyberlinksCountByNeuron2Query = { cyberlinks_aggregate: { aggregate?: { count: number } | null } };
+
 export type CyberlinksCountByParticleQueryVariables = Exact<{
   cid?: InputMaybe<Scalars['String']['input']>;
   where?: InputMaybe<Cyberlinks_Bool_Exp>;
@@ -10198,6 +10205,48 @@ export type CyberlinksCountByNeuronQueryHookResult = ReturnType<typeof useCyberl
 export type CyberlinksCountByNeuronLazyQueryHookResult = ReturnType<typeof useCyberlinksCountByNeuronLazyQuery>;
 export type CyberlinksCountByNeuronSuspenseQueryHookResult = ReturnType<typeof useCyberlinksCountByNeuronSuspenseQuery>;
 export type CyberlinksCountByNeuronQueryResult = Apollo.QueryResult<CyberlinksCountByNeuronQuery, CyberlinksCountByNeuronQueryVariables>;
+export const CyberlinksCountByNeuron2Document = gql`
+    query CyberlinksCountByNeuron2($address: String) {
+  cyberlinks_aggregate(where: {neuron: {_eq: $address}}) {
+    aggregate {
+      count
+    }
+  }
+}
+    `;
+
+/**
+ * __useCyberlinksCountByNeuron2Query__
+ *
+ * To run a query within a React component, call `useCyberlinksCountByNeuron2Query` and pass it any options that fit your needs.
+ * When your component renders, `useCyberlinksCountByNeuron2Query` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useCyberlinksCountByNeuron2Query({
+ *   variables: {
+ *      address: // value for 'address'
+ *   },
+ * });
+ */
+export function useCyberlinksCountByNeuron2Query(baseOptions?: Apollo.QueryHookOptions<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>(CyberlinksCountByNeuron2Document, options);
+      }
+export function useCyberlinksCountByNeuron2LazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>(CyberlinksCountByNeuron2Document, options);
+        }
+export function useCyberlinksCountByNeuron2SuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>(CyberlinksCountByNeuron2Document, options);
+        }
+export type CyberlinksCountByNeuron2QueryHookResult = ReturnType<typeof useCyberlinksCountByNeuron2Query>;
+export type CyberlinksCountByNeuron2LazyQueryHookResult = ReturnType<typeof useCyberlinksCountByNeuron2LazyQuery>;
+export type CyberlinksCountByNeuron2SuspenseQueryHookResult = ReturnType<typeof useCyberlinksCountByNeuron2SuspenseQuery>;
+export type CyberlinksCountByNeuron2QueryResult = Apollo.QueryResult<CyberlinksCountByNeuron2Query, CyberlinksCountByNeuron2QueryVariables>;
 export const CyberlinksCountByParticleDocument = gql`
     query cyberlinksCountByParticle($cid: String, $where: cyberlinks_bool_exp) {
   cyberlinks_aggregate(where: $where) {
diff --git a/src/pages/robot/Brain/ui/Particles/Particles.tsx b/src/pages/robot/Brain/ui/Particles/Particles.tsx
index ccc9dbaa2..a6aa106bb 100644
--- a/src/pages/robot/Brain/ui/Particles/Particles.tsx
+++ b/src/pages/robot/Brain/ui/Particles/Particles.tsx
@@ -1,6 +1,7 @@
 import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
 import {
   ParticlesQuery,
+  useCyberlinksCountByNeuron2Query,
   useParticlesAggregateQuery,
   useParticlesQuery,
 } from 'src/generated/graphql';
@@ -9,7 +10,7 @@ import { useRobotContext } from 'src/pages/robot/robot.context';
 import { createColumnHelper } from '@tanstack/react-table';
 import Table from 'src/components/Table/Table';
 import ContentItem from 'src/components/ContentItem/contentItem';
-import { Display, Rank } from 'src/components';
+import { Display } from 'src/components';
 import { useState } from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import Loader2 from 'src/components/ui/Loader2';
@@ -26,7 +27,20 @@ const LIMIT = 20;
 function Rank2({ cid }) {
   const rank = useRank(cid);
 
-  return <span>{rank}</span>;
+  if (!rank) {
+    return null;
+  }
+
+  return (
+    <span
+      style={{
+        fontSize: 14,
+      }}
+    >
+      {rank / 10 ** 15}
+      {/* {rank.toLocaleString().replaceAll(',', ' ')} */}
+    </span>
+  );
 }
 
 function Particles() {
@@ -51,6 +65,12 @@ function Particles() {
     },
   });
 
+  const cyberlinksCountQuery = useCyberlinksCountByNeuron2Query({
+    variables: {
+      address,
+    },
+  });
+
   function fetch() {
     fetchMore({
       variables: {
@@ -77,7 +97,7 @@ function Particles() {
     error,
   });
 
-  console.log(data);
+  console.log(data, cyberlinksCountQuery);
 
   const total =
     particleAggregateQuery.data?.particles_aggregate.aggregate?.count;
@@ -91,6 +111,11 @@ function Particles() {
     >
       <Display>
         <p>{total} particles</p>
+
+        <p>
+          {cyberlinksCountQuery.data?.cyberlinks_aggregate.aggregate?.count}{' '}
+          cyberlinks
+        </p>
       </Display>
       <br />
       <Display noPadding>
@@ -144,7 +169,15 @@ function Particles() {
               columnHelper.accessor('particle', {
                 header: (
                   <>
-                    rank <Rank />
+                    {/* rank{' '} */}
+                    {/* <Link
+                      to="https://docs.cyb.ai/#/page/cyberank"
+                      replace
+                      target="_blank"
+                    >
+                      🦠
+                    </Link> */}
+                    probability of observation
                   </>
                 ),
                 id: 'rank',
diff --git a/src/services/backend/services/indexer/graphql/cyberlinksCountByNeuron.graphql b/src/services/backend/services/indexer/graphql/cyberlinksCountByNeuron.graphql
index 880c18a98..abaa4986b 100644
--- a/src/services/backend/services/indexer/graphql/cyberlinksCountByNeuron.graphql
+++ b/src/services/backend/services/indexer/graphql/cyberlinksCountByNeuron.graphql
@@ -17,3 +17,12 @@ query CyberlinksCountByNeuron(
     }
   }
 }
+
+# refactor
+query CyberlinksCountByNeuron2($address: String) {
+  cyberlinks_aggregate(where: { neuron: { _eq: $address } }) {
+    aggregate {
+      count
+    }
+  }
+}

From d8a599a659b94fc3209c7f1ee2430b0d62a41502 Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Wed, 9 Oct 2024 13:04:55 +0700
Subject: [PATCH 11/11] remove mocking

---
 .../cyberlinks/GraphNew/GraphNew.mock.tsx        | 16 ----------------
 webpack.config.common.js                         |  6 ------
 2 files changed, 22 deletions(-)
 delete mode 100644 src/features/cyberlinks/GraphNew/GraphNew.mock.tsx

diff --git a/src/features/cyberlinks/GraphNew/GraphNew.mock.tsx b/src/features/cyberlinks/GraphNew/GraphNew.mock.tsx
deleted file mode 100644
index 16a1b531e..000000000
--- a/src/features/cyberlinks/GraphNew/GraphNew.mock.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-function GraphNewMock(): JSX.Element {
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        zIndex: 10,
-        color: 'white',
-        top: '50%',
-      }}
-    >
-      2d graph is disabled for netlify builds
-    </div>
-  );
-}
-
-export default GraphNewMock;
diff --git a/webpack.config.common.js b/webpack.config.common.js
index 09358c5e7..6eb9483ef 100644
--- a/webpack.config.common.js
+++ b/webpack.config.common.js
@@ -77,12 +77,6 @@ const config = {
           throw new Error(`Not found ${mod}`);
       }
     }),
-    new webpack.NormalModuleReplacementPlugin(/\/GraphNew/, (resource) => {
-      resource.request = resource.request.replace(
-        /w\/GraphNew/,
-        'w/GraphNew.mock'
-      );
-    }),
     new CleanWebpackPlugin(),
     new BootloaderPlugin(HTMLWebpackPlugin, {
       script: './src/components/loader/loader.js',