feat: Remove nodes if max nodes limit is reached

Signed-off-by: Eugene Panteleymonchuk <[email protected]>
iotaledger · Mar 13, 2024 · 980ef53 · 980ef53
1 parent 66de1e0
commit 980ef53
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 91 deletions.
diff --git a/client/src/features/visualizer-vivagraph/VisualizerInstance.tsx b/client/src/features/visualizer-vivagraph/VisualizerInstance.tsx
@@ -1,7 +1,4 @@
-import React, {
-    // useEffect,
-    useRef,
-} from "react";
+import React from "react";
 import { RouteComponentProps } from "react-router-dom";
 import { VisualizerRouteProps } from "~app/routes/VisualizerRouteProps";
 import { useGetThemeMode } from "~/helpers/hooks/useGetThemeMode";
@@ -15,27 +12,12 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
         params: { network },
     },
 }) => {
-
     const [networkConfig] = useNetworkConfig(network);
     const themeMode = useGetThemeMode();
-    const { graphElement, itemCount } = useFeed(network);
+    const { graphElement } = useFeed(network);
 
     return (
-        <Wrapper
-            key={network}
-            blocksCount={itemCount}
-            network={network}
-            networkConfig={networkConfig}
-            selectNode={() => {}}
-            selectedFeedItem={null}
-            themeMode={themeMode}
-            searchValue={""}
-            onChangeSearch={(value) => {}}
-            isEdgeRenderingEnabled={false}
-            setEdgeRenderingEnabled={(checked) => {}}
-            isPlaying={false}
-            setIsPlaying={() => {}}
-        >
+        <Wrapper key={network} network={network} networkConfig={networkConfig} themeMode={themeMode} isPlaying selectedFeedItem={null}>
             <div className="viva" onClick={() => {}} ref={graphElement} />
         </Wrapper>
     );

diff --git a/client/src/features/visualizer-vivagraph/components/KeyPanel.tsx b/client/src/features/visualizer-vivagraph/components/KeyPanel.tsx
@@ -1,7 +1,6 @@
 import React, { memo } from "react";
 import { BlockState } from "@iota/sdk-wasm-nova/web";
 import StatsPanel from "~features/visualizer-threejs/wrapper/StatsPanel";
-
 import { SEARCH_RESULT_COLOR, THEME_BLOCK_COLORS } from "../definitions/constants";
 import { ThemeMode } from "../definitions/enums";
 import ColorPanel from "./ColorPanel";

diff --git a/client/src/features/visualizer-vivagraph/components/SelectedFeedInfo.tsx b/client/src/features/visualizer-vivagraph/components/SelectedFeedInfo.tsx
@@ -19,9 +19,7 @@ export const SelectedFeedInfo = ({
 }) => {
     const [selectedBlockMetadata, isMetadataLoading] = useBlockMetadata(network, selectedFeedItem.blockId);
 
-    const onClose = useCallback(() => {
-        // pass
-    }, []);
+    const onClose = useCallback(() => {}, []);
 
     return (
         <div className="info-panel card padding-m">

diff --git a/client/src/features/visualizer-vivagraph/components/Wrapper.tsx b/client/src/features/visualizer-vivagraph/components/Wrapper.tsx
@@ -1,48 +1,30 @@
 import React, { useCallback } from "react";
 import Modal from "~/app/components/Modal";
-import { TSelectFeedItemNova, TSelectNode } from "~/app/types/visualizer.types";
+import { TSelectFeedItemNova } from "~/app/types/visualizer.types";
 import { INetwork } from "~/models/config/INetwork";
 import KeyPanel from "./KeyPanel";
 import mainHeader from "~assets/modals/visualizer/main-header.json";
 import { SelectedFeedInfo } from "./SelectedFeedInfo";
-import { features } from "~features/visualizer-threejs/constants";
 import { ThemeMode } from "../definitions/enums";
 
 export const Wrapper = ({
-    blocksCount,
     children,
-    isEdgeRenderingEnabled,
-    isPlaying,
     network,
     networkConfig,
-    onChangeSearch,
-    searchValue,
-    selectedFeedItem,
-    setEdgeRenderingEnabled,
-    setIsPlaying,
     themeMode,
+
+    isPlaying,
+
+    selectedFeedItem,
 }: {
-    readonly blocksCount: number;
     readonly children: React.ReactNode;
     readonly network: string;
     readonly networkConfig: INetwork;
-    readonly selectNode: TSelectNode;
-    readonly selectedFeedItem: TSelectFeedItemNova;
     readonly themeMode: ThemeMode;
-
-    readonly searchValue: string;
-    readonly onChangeSearch: (value: string) => void;
-
-    readonly isEdgeRenderingEnabled?: boolean;
-    readonly setEdgeRenderingEnabled?: (isEnabled: boolean) => void;
-
     readonly isPlaying: boolean;
-    readonly setIsPlaying: (isPlaying: boolean) => void;
+    readonly selectedFeedItem: TSelectFeedItemNova;
 }) => {
-
-    const onToggle = useCallback(() => {
-        setIsPlaying(!isPlaying);
-    }, [isPlaying]);
+    const onToggle = useCallback(() => {}, []);
 
     return (
         <>
@@ -55,15 +37,7 @@ export const Wrapper = ({
                     <div className="card search-filter fill">
                         <div className="card--content row middle">
                             <div className="card--label margin-r-s">Search</div>
-                            <input
-                                className="input form-input-long"
-                                type="text"
-                                value={searchValue}
-                                onChange={(e) => {
-                                    onChangeSearch(e.target.value);
-                                }}
-                                maxLength={2000}
-                            />
+                            <input className="input form-input-long" type="text" value={""} onChange={(e) => {}} maxLength={2000} />
                         </div>
                     </div>
                 </div>
@@ -79,19 +53,6 @@ export const Wrapper = ({
                                 )}
                             </button>
                         </div>
-                        {features.showEdgeRenderingCheckbox &&
-                            isEdgeRenderingEnabled !== undefined &&
-                            setEdgeRenderingEnabled !== undefined && (
-                                <div className="margin-l-t row middle">
-                                    <h3>Show edges:</h3>
-                                    <input
-                                        type="checkbox"
-                                        className="margin-l-t"
-                                        checked={isEdgeRenderingEnabled}
-                                        onChange={({ target: { checked } }) => setEdgeRenderingEnabled(checked)}
-                                    />
-                                </div>
-                            )}
                     </div>
                 </div>
                 {selectedFeedItem && (

diff --git a/client/src/features/visualizer-vivagraph/definitions/constants.ts b/client/src/features/visualizer-vivagraph/definitions/constants.ts
@@ -2,6 +2,8 @@ import { BlockState } from "@iota/sdk-wasm-nova/web";
 import { Color } from "three";
 import { ThemeMode } from "./enums";
 
+export const MAX_VISIBLE_BLOCKS = 2500;
+
 // colors
 export const ACCEPTED_BLOCK_COLORS: Color[] = [new Color("#0101FF"), new Color("#0000DB"), new Color("#0101AB")];
 export const CONFIRMED_BLOCK_COLOR = new Color("#3CE5E1");

diff --git a/client/src/features/visualizer-vivagraph/hooks/useFeed.ts b/client/src/features/visualizer-vivagraph/hooks/useFeed.ts
@@ -7,6 +7,7 @@ import { NovaFeedClient } from "~services/nova/novaFeedClient";
 import { buildNodeShader } from "~helpers/nodeShader";
 import { useTangleStore } from "~features/visualizer-vivagraph/store/tangle";
 import { getBlockParents } from "~features/visualizer-vivagraph/lib/helpers";
+import { MAX_VISIBLE_BLOCKS } from "~features/visualizer-vivagraph/definitions/constants";
 
 export const useFeed = (network: string) => {
     const [feedService] = useState<NovaFeedClient | null>(ServiceFactory.get<NovaFeedClient>(`feed-${network}`));
@@ -15,19 +16,18 @@ export const useFeed = (network: string) => {
     const graph = useRef<Viva.Graph.IGraph<INodeData, unknown> | null>(null);
     const resetCounter = useRef<number>(0);
     const lastUpdateTime = useRef<number>(0);
-    const existingIds = useRef<string[]>([]);
     const graphics = useRef<Viva.Graph.View.IWebGLGraphics<INodeData, unknown> | null>(null);
     const renderer = useRef<Viva.Graph.View.IRenderer | null>(null);
     const getBlockIdToMetadata = useTangleStore((state) => state.getBlockIdToMetadata);
     const getExistingBlockIds = useTangleStore((state) => state.getExistingBlockIds);
-    const updateBlockIdToMetadata = useTangleStore((state) => state.updateBlockIdToMetadata);
     const createBlockIdToMetadata = useTangleStore((state) => state.createBlockIdToMetadata);
-
-    const [itemCount, setItemCount] = useState<number>(0);
+    const getVisibleBlocks = useTangleStore((state) => state.getVisibleBlocks);
+    const setVisibleBlocks = useTangleStore((state) => state.setVisibleBlocks);
+    const deleteBlockIdToMetadata = useTangleStore((state) => state.deleteBlockIdToMetadata);
 
     useEffect(() => {
         // eslint-disable-next-line no-void
-        void (async () => {
+        void (() => {
             if (!feedService) {
                 return;
             }
@@ -36,6 +36,25 @@ export const useFeed = (network: string) => {
         })();
     }, [feedService, graph.current, graphElement.current]);
 
+    const createBlock = (blockId: string, newBlock: IFeedBlockData, addedTime: number) => {
+        createBlockIdToMetadata(blockId, newBlock);
+
+        graph.current?.addNode(blockId, {
+            feedItem: newBlock,
+            added: addedTime,
+        });
+        const visibleBlocks = getVisibleBlocks();
+        const updatedVisibleBlocks = [...visibleBlocks, blockId];
+
+        if (updatedVisibleBlocks.length >= MAX_VISIBLE_BLOCKS) {
+            const firstBlockId = updatedVisibleBlocks[0];
+            updatedVisibleBlocks.shift();
+            deleteBlockIdToMetadata(firstBlockId);
+        }
+
+        setVisibleBlocks(updatedVisibleBlocks);
+    };
+
     const onNewBlock = (newBlock: IFeedBlockData) => {
         if (graph.current) {
             const now = Date.now();
@@ -45,11 +64,7 @@ export const useFeed = (network: string) => {
             const blockMetadata = getBlockIdToMetadata(blockId);
 
             if (!blockMetadata) {
-                createBlockIdToMetadata(blockId, newBlock);
-                graph.current.addNode(blockId, {
-                    feedItem: newBlock,
-                    added: now,
-                });
+                createBlock(blockId, newBlock, now);
 
                 const parentIds = getBlockParents(newBlock);
                 const existingBlockIds = getExistingBlockIds();
@@ -59,8 +74,6 @@ export const useFeed = (network: string) => {
                         graph.current.addLink(parentId, blockId);
                     }
                 }
-
-                setItemCount(existingIds.current.length);
             }
         }
     };
@@ -120,6 +133,5 @@ export const useFeed = (network: string) => {
     return {
         graphElement,
         resetCounter,
-        itemCount,
     };
 };
diff --git a/client/src/features/visualizer-vivagraph/lib/helpers.ts b/client/src/features/visualizer-vivagraph/lib/helpers.ts
@@ -1,9 +1,11 @@
+import { BasicBlockBody, Parents } from "@iota/sdk-wasm-nova/web";
 import { IFeedBlockData } from "~models/api/nova/feed/IFeedBlockData";
 
-export const getBlockParents = (block: IFeedBlockData): string[] => {
-
-    // @ts-ignore
-    const parents = block.block?.body?.strongParents;
+export const getBlockParents = (blockData: IFeedBlockData): string[] => {
+    const parents: Parents = [];
+    const blockStrongParents = (blockData?.block?.body as BasicBlockBody).strongParents ?? [];
+    const blockWeakParents = (blockData?.block?.body as BasicBlockBody).weakParents ?? [];
+    parents.push(...blockStrongParents, ...blockWeakParents);
 
     if (parents && parents.length) {
         return parents;
@@ -19,4 +21,4 @@ export const getBlockParents = (block: IFeedBlockData): string[] => {
     // }
 
     return [];
-}
+};
diff --git a/client/src/features/visualizer-vivagraph/store/tangle.ts b/client/src/features/visualizer-vivagraph/store/tangle.ts
@@ -7,17 +7,33 @@ interface TangleState {
     createBlockIdToMetadata: (blockId: string, metadata: IFeedBlockData) => void;
     getBlockIdToMetadata: (blockId: string) => IFeedBlockData | undefined;
     updateBlockIdToMetadata: (blockId: string, metadata: Partial<IFeedBlockData>) => void;
+    deleteBlockIdToMetadata: (blockId: string) => void;
     getExistingBlockIds: () => string[];
+
+    visibleBlocks: string[];
+    setVisibleBlocks: (blockIds: string[]) => void;
+    getVisibleBlocks: () => string[];
 }
 
 const INITIAL_STATE = {
     blockIdToMetadata: new Map(),
+    visibleBlocks: [],
 };
 
 export const useTangleStore = create<TangleState>()(
     devtools((set, get) => ({
         ...INITIAL_STATE,
 
+        setVisibleBlocks: (blockIds) => {
+            set(() => {
+                return {
+                    visibleBlocks: blockIds,
+                };
+            });
+        },
+        getVisibleBlocks: () => {
+            return get().visibleBlocks;
+        },
         createBlockIdToMetadata: (blockId, metadata) => {
             get().blockIdToMetadata.set(blockId, metadata);
         },
@@ -32,6 +48,10 @@ export const useTangleStore = create<TangleState>()(
                 blockMetadata.set(blockId, newMetadata);
             }
         },
+        deleteBlockIdToMetadata: (blockId) => {
+            const blockMetadata = get().blockIdToMetadata;
+            blockMetadata.delete(blockId);
+        },
         getExistingBlockIds: () => {
             return Array.from(get().blockIdToMetadata.keys());
         },

diff --git a/client/src/services/nova/novaFeedClient.ts b/client/src/services/nova/novaFeedClient.ts
@@ -81,7 +81,6 @@ export class NovaFeedClient {
                 });
 
                 this.socket.on("block", async (update: IFeedUpdate) => {
-                    // TODO
                     if (update.subscriptionId === this.blockSubscriptionId) {
                         if (update.blockUpdate) {
                             onBlockDataCallback?.(update.blockUpdate);