feat(visualizer): update block colors #1193
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from "react"; | ||
| import { useGetThemeMode } from "~/helpers/hooks/useGetThemeMode.js"; | ||
| import { VisualizerRouteProps } from "~/app/routes/VisualizerRouteProps.js"; | ||
| import { RouteComponentProps } from "react-router-dom"; | ||
| import NovaVisualizer from "./VisualizerInstance"; | ||
|
|
||
| export default function NovaVisualizerWrapper(props: RouteComponentProps<VisualizerRouteProps>): React.JSX.Element { | ||
| const theme = useGetThemeMode(); | ||
|
|
||
| return <NovaVisualizer key={theme} {...props} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,7 +4,7 @@ import { devtools } from "zustand/middleware"; | |
| import { ZOOM_DEFAULT, SPRAY_DISTANCE } from "../constants"; | ||
| import { IFeedBlockData } from "~models/api/nova/feed/IFeedBlockData"; | ||
| import { IThreeDimensionalPosition } from "../interfaces"; | ||
| import { BlockId, BlockState, SlotIndex } from "@iota/sdk-wasm-nova/web"; | ||
| import { getVisualizerConfigValues } from "~features/visualizer-threejs/ConfigControls"; | ||
|
|
||
| export interface IBlockAnimationPosition { | ||
|
|
@@ -80,6 +80,9 @@ interface TangleState { | |
| confirmedBlocksBySlot: Map<number, string[]>; | ||
| addToConfirmedBlocksBySlot: (blockId: BlockId, slot: SlotIndex) => void; | ||
| removeConfirmedBlocksSlot: (slot: SlotIndex) => void; | ||
|
|
||
| blockIdToState: Map<BlockId, BlockState>; | ||
| setBlockIdToBlockState: (blockId: BlockId, blockState: BlockState) => void; | ||
|
Comment on lines
+84
to
+85
There was a problem hiding this comment. I noticed that we have a lot of data that related to blockId. Maybe it's a good sign to:
There was a problem hiding this comment. Created a new issue for this: |
||
| } | ||
|
|
||
| const INITIAL_STATE = { | ||
|
|
@@ -97,12 +100,32 @@ const INITIAL_STATE = { | |
| bps: 0, | ||
| clickedInstanceId: null, | ||
| confirmedBlocksBySlot: new Map(), | ||
| blockIdToState: new Map(), | ||
| }; | ||
|
|
||
| export const useTangleStore = create<TangleState>()( | ||
| devtools((set) => ({ | ||
| ...INITIAL_STATE, | ||
| resetConfigState: () => | ||
| // hard cleanup of the store | ||
| set((state) => { | ||
| state.blockQueue = []; | ||
| state.edgeQueue = []; | ||
| state.colorQueue = []; | ||
| state.blockIdToEdges = new Map(); | ||
| state.blockIdToIndex = new Map(); | ||
| state.blockIdToPosition = new Map(); | ||
| state.blockMetadata = new Map(); | ||
| state.blockIdToAnimationPosition = new Map(); | ||
| state.indexToBlockId = []; | ||
| state.zoom = ZOOM_DEFAULT; | ||
| state.forcedZoom = undefined; | ||
| state.bps = 0; | ||
| state.clickedInstanceId = null; | ||
| state.confirmedBlocksBySlot = new Map(); | ||
| state.blockIdToState = new Map(); | ||
| return state; | ||
| }), | ||
| updateBlockIdToAnimationPosition: (updatedPositions) => { | ||
| set((state) => { | ||
| updatedPositions.forEach((value, key) => { | ||
|
|
@@ -196,15 +219,18 @@ export const useTangleStore = create<TangleState>()( | |
| updateBlockIdToIndex: (blockId: string, index: number) => { | ||
| set((state) => { | ||
| state.blockIdToIndex.set(blockId, index); | ||
| const previousBlockId = state.indexToBlockId[index]; | ||
| if (previousBlockId) { | ||
|
Comment on lines
+222
to
+223
There was a problem hiding this comment. ah, I see. Maybe this is something that I was talking about in comment above. |
||
| // Clean up map from old blockIds | ||
| state.blockIdToIndex.delete(previousBlockId); | ||
| // Clean up old block edges | ||
| state.blockIdToEdges.delete(previousBlockId); | ||
| // Clean up old block position | ||
| state.blockIdToPosition.delete(previousBlockId); | ||
| // Clean up old block metadata | ||
| state.blockMetadata.delete(previousBlockId); | ||
| // Cleanup old block state | ||
| state.blockIdToState.delete(previousBlockId); | ||
| } | ||
|
|
||
| const nextIndexToBlockId = [...state.indexToBlockId]; | ||
|
|
@@ -268,5 +294,14 @@ export const useTangleStore = create<TangleState>()( | |
| }; | ||
| }); | ||
| }, | ||
| setBlockIdToBlockState(blockId, blockState) { | ||
| set((state) => { | ||
| state.blockIdToState.set(blockId, blockState); | ||
| return { | ||
| ...state, | ||
| blockIdToState: state.blockIdToState, | ||
| }; | ||
| }); | ||
| }, | ||
| })), | ||
| ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import React, { memo } from "react"; | ||
|
|
||
| const ColorPanel = ({ label, color }: { label: string; color: string }): React.JSX.Element => ( | ||
| <div className="key-panel-item"> | ||
| <div | ||
| className="key-marker" | ||
| style={{ | ||
| backgroundColor: color, | ||
| }} | ||
| /> | ||
| <div className="key-label">{label}</div> | ||
| </div> | ||
| ); | ||
|
|
||
| export default memo(ColorPanel); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we use
NovaVisualizername instead ofNovaVisualizerWrapper?Seems it could be more convenient according to names on this page.
Could we create in folder
features/visualizer-threejsfile like index.ts and make all exports from this file? It will look like all what exported fromindex.tsis like public. What not exported only for internal using.And maybe we could rename
NovaVisualizerWrapper.tsx → NovaVisualizer.tsx
In file client/src/features/visualizer-threejs/NovaVisualizerWrapper.tsx
from import NovaVisualizer from "./VisualizerInstance";
to import VisualizerInstance from "./VisualizerInstance";
Not requirement, just discussion.
What do you think?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I updated the file name and made a new task for the store refactor:
#1196