feat: onSlotFinalized include all previous slots. (#1335)

Signed-off-by: Eugene Panteleymonchuk <[email protected]>
Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>

client/src/features/visualizer-vivagraph/hooks/useFeed.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, useContext } from "react";
-import { type BlockMetadataResponse } from "@iota/sdk-wasm-nova/web";
+import { type BlockMetadataResponse, Utils, BlockState, SlotIndex } from "@iota/sdk-wasm-nova/web";
 import { ServiceFactory } from "~factories/serviceFactory";
 import { IFeedBlockData } from "~/models/api/nova/feed/IFeedBlockData";
 import Viva from "vivagraphjs";
@@ -35,6 +35,9 @@ export const useFeed = (network: string) => {
     const deleteBlockIdToMetadata = useTangleStore((state) => state.deleteBlockIdToMetadata);
     const updateBlockIdToMetadata = useTangleStore((state) => state.updateBlockIdToMetadata);
     const search = useTangleStore((state) => state.search);
+    const addToConfirmedBlocksBySlot = useTangleStore((state) => state.addToConfirmedBlocksBySlot);
+    const removeConfirmedBlocksSlot = useTangleStore((state) => state.removeConfirmedBlocksSlot);
+    const confirmedBlocksBySlot = useTangleStore((state) => state.confirmedBlocksBySlot);
     const themeMode = useGetThemeMode();
 
     const graphContext = useContext(GraphContext);
@@ -209,8 +212,9 @@ export const useFeed = (network: string) => {
             const blockMetadata = getBlockIdToMetadata(blockId);
 
             if (!blockMetadata) {
-                const color = getBlockColorByState(themeMode, "pending");
-                createBlock(blockId, { ...newBlock, color: color }, now);
+                const initState = "pending";
+                const color = getBlockColorByState(themeMode, initState);
+                createBlock(blockId, { ...newBlock, color: color, state: initState }, now);
 
                 const parentIds = getBlockParents(newBlock);
                 const existingBlockIds = getBlockMetadataKeys();
@@ -232,12 +236,61 @@ export const useFeed = (network: string) => {
             const selectedColor = getBlockColorByState(themeMode, metadataUpdate.blockState);
 
             updateBlockIdToMetadata(metadataUpdate.blockId, { color: selectedColor });
-            updateBlockColor(metadataUpdate.blockId, selectedColor);
+
+            const blockMetadata = getBlockIdToMetadata(metadataUpdate.blockId);
+            if (blockMetadata) {
+                const previousBlockState = blockMetadata.state;
+                const wasConfirmedBeforeAccepted = previousBlockState === "accepted" && metadataUpdate.blockState === "confirmed";
+
+                if (!wasConfirmedBeforeAccepted) {
+                    updateBlockIdToMetadata(metadataUpdate.blockId, {
+                        state: metadataUpdate.blockState,
+                    });
+                }
+
+                updateBlockColor(metadataUpdate.blockId, selectedColor);
+                const acceptedStates: BlockState[] = ["confirmed", "accepted"];
+                if (acceptedStates.includes(metadataUpdate.blockState)) {
+                    const slot = Utils.computeSlotIndex(metadataUpdate.blockId);
+                    addToConfirmedBlocksBySlot(metadataUpdate.blockId, slot);
+                }
+            }
+        }
+    }
+
+    function onSlotFinalized(slotFinalized: SlotIndex): void {
+        const slotsBefore = Array.from(confirmedBlocksBySlot.keys());
+
+        const slots = [...slotsBefore, slotFinalized];
+
+        const blocks = [];
+        for (const slot of slots) {
+            const blockIds = confirmedBlocksBySlot.get(slot);
+            if (blockIds) {
+                blocks.push(...blockIds);
+            }
+        }
+
+        if (blocks?.length) {
+            blocks.forEach((blockId) => {
+                const selectedColor = getBlockColorByState(themeMode, "finalized");
+                if (selectedColor) {
+                    updateBlockIdToMetadata(blockId, {
+                        state: "finalized",
+                        color: selectedColor,
+                    });
+                    updateBlockColor(blockId, selectedColor);
+                }
+            });
+        }
+
+        for (const slot of slots) {
+            removeConfirmedBlocksSlot(slot);
         }
     }
 
     const feedSubscriptionStart = () => {
-        feedService.subscribeBlocks(onNewBlock, onBlockMetadataUpdate, () => {});
+        feedService.subscribeBlocks(onNewBlock, onBlockMetadataUpdate, onSlotFinalized);
     };
 
     useEffect(() => {

client/src/features/visualizer-vivagraph/store/tangle.ts

@@ -1,9 +1,11 @@
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 import { IFeedBlockData } from "~models/api/nova/feed/IFeedBlockData";
+import { BlockId, BlockState, SlotIndex } from "@iota/sdk-wasm-nova/web";
 
 export interface VivagraphParams {
     color: string;
+    state: BlockState;
 }
 
 interface TangleState {
@@ -24,13 +26,21 @@ interface TangleState {
 
     search: string;
     setSearch: (search: string) => void;
+
+    resetTangleStore: () => void;
+
+    // Confirmed/accepted blocks by slot
+    confirmedBlocksBySlot: Map<number, string[]>;
+    addToConfirmedBlocksBySlot: (blockId: BlockId, slot: SlotIndex) => void;
+    removeConfirmedBlocksSlot: (slot: SlotIndex) => void;
 }
 
 const INITIAL_STATE = {
     blockIdToMetadata: new Map(),
     visibleBlocks: [],
     selectedNode: null,
     search: "",
+    confirmedBlocksBySlot: new Map(),
 };
 
 export const useTangleStore = create<TangleState>()(
@@ -85,5 +95,35 @@ export const useTangleStore = create<TangleState>()(
         getBlockMetadataValues: () => {
             return Array.from(get().blockIdToMetadata.values());
         },
+
+        addToConfirmedBlocksBySlot: (blockId, slot) => {
+            set((state) => {
+                state.confirmedBlocksBySlot.has(slot)
+                    ? state.confirmedBlocksBySlot.get(slot)?.push(blockId)
+                    : state.confirmedBlocksBySlot.set(slot, [blockId]);
+                return {
+                    ...state,
+                    confirmedBlocksBySlot: state.confirmedBlocksBySlot,
+                };
+            });
+        },
+
+        removeConfirmedBlocksSlot: (slot) => {
+            set((state) => {
+                state.confirmedBlocksBySlot.delete(slot);
+
+                // Cleanup all slots that are lower than the current slot
+                for (const existingSlot of state.confirmedBlocksBySlot.keys()) {
+                    if (existingSlot < slot) {
+                        state.confirmedBlocksBySlot.delete(existingSlot);
+                    }
+                }
+
+                return {
+                    ...state,
+                    confirmedBlocksBySlot: state.confirmedBlocksBySlot,
+                };
+            });
+        },
     })),
 );