From e0c6d0ec5091536734288ab06ad4587b43387d2f Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Thu, 29 Jul 2021 06:07:45 +0200 Subject: handled all the link color cases --- components/config.ts | 28 +-- components/tweaks.tsx | 464 +++++++++++++++++++++++++++++++++----------------- 2 files changed, 308 insertions(+), 184 deletions(-) (limited to 'components') diff --git a/components/config.ts b/components/config.ts index c6f581d..2c7a1b6 100644 --- a/components/config.ts +++ b/components/config.ts @@ -84,33 +84,9 @@ export const initialVisuals = { algorithms: algorithms, algorithmOptions: options, algorithmName: 'CubicOut', - linkColorScheme: 'grey', + linkColorScheme: '500', nodeColorScheme: ['gray', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'pink', 'purple'], nodeHighlight: '', linkHighlight: '', -} - -export type Visuals = { - particles: boolean - particlesNumber: number - particlesWidth: number - linkOpacity: number - linkWidth: number - nodeRel: number - nodeOpacity: number - nodeResolution: number - labels: number - labelScale: number - highlight: boolean - highlightNodeSize: number - highlightLinkSize: number - highlightAnim: boolean - animationSpeed: number - algorithms: typeof algorithms - algorithmOptions: typeof options - algorithmName: string - linkColorScheme: string - nodeColorScheme: string[] - nodeHighlight: string - linkHighlight: string + backgroundColor: 'white', } diff --git a/components/tweaks.tsx b/components/tweaks.tsx index 9da387b..709cbf5 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -4,6 +4,8 @@ import { ChevronDownIcon, SettingsIcon, InfoOutlineIcon, + RepeatIcon, + ArrowRightIcon, } from '@chakra-ui/icons' import { Accordion, @@ -48,7 +50,7 @@ export interface TweakProps { setThreeDim: (newValue: boolean) => void filter: typeof initialFilter setFilter: any - visuals: Visuals + visuals: typeof initialVisuals setVisuals: any } @@ -58,6 +60,7 @@ export const Tweaks = (props: TweakProps) => { const [showTweaks, setShowTweaks] = useState(true) const { highlightColor, setHighlightColor } = useContext(ThemeContext) const colorList = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'pink', 'purple', 'gray'] + const grays = ['100', '200', '300', '400', '500', '600', '700', '800', '900'] return ( <> { Visual - } - align="stretch" - paddingLeft={7} - color="gray.800" - > - + + @@ -314,6 +310,39 @@ export const Tweaks = (props: TweakProps) => { Nodes + + } + variant="ghost" + onClick={() => { + const arr = visuals.nodeColorScheme ?? [] + setVisuals({ + ...visuals, + //shuffle that guy + //definitely thought of this myself + nodeColorScheme: arr + .map((x) => [Math.random(), x]) + .sort(([a], [b]) => a - b) + .map(([_, x]) => x), + }) + }} + /> + + + } + size="sm" + variant="ghost" + onClick={() => { + const arr = visuals.nodeColorScheme ?? [] + setVisuals({ + ...visuals, + nodeColorScheme: [...arr.slice(1, arr.length), arr[0]], + }) + }} + /> + { Links - + } > - - {visuals.linkColorScheme[0]!.toUpperCase() + - visuals.linkColorScheme!.slice(1)} - + + {visuals.linkColorScheme ? ( + + ) : ( + + {visuals.nodeColorScheme.map((color) => ( + + ))} + + )} + - - setPhysics({ ...physics, labels: 1 })}> - Match Nodes - - setPhysics({ ...physics, labels: 2 })}> - Gray + + + setVisuals({ ...visuals, linkColorScheme: '' }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + Match nodes + + {visuals.nodeColorScheme.map((color) => ( + + ))} + + {grays.map((color) => ( + + setVisuals({ + ...visuals, + linkColorScheme: color, + }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + {color[0]!.toUpperCase() + color!.slice(1)} + + + ))} @@ -537,172 +629,228 @@ export const Tweaks = (props: TweakProps) => { + + Background + + } + > + { + + } + + + {grays.map((color) => ( + + setVisuals({ ...visuals, backgroundColor: color }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + {color[0]!.toUpperCase() + color!.slice(1)} + + + ))} + + + - setPhysics({ ...physics, nodeRel: value })} - /> - {threeDim && ( - <> - setPhysics({ ...physics, nodeOpacity: value })} - /> - setPhysics({ ...physics, nodeResolution: value })} - /> - - )} - setPhysics({ ...physics, linkWidth: value })} - /> - {threeDim && ( + } + align="stretch" + paddingLeft={7} + color="gray.800" + > setPhysics({ ...physics, linkOpacity: value })} + label="Node size" + value={physics.nodeRel} + onChange={(value) => setPhysics({ ...physics, nodeRel: value })} /> - )} - - - Labels - - } - > - {!physics.labels - ? 'Never' - : physics.labels < 2 - ? 'On Highlight' - : 'Always'} - - - setPhysics({ ...physics, labels: 0 })}> - Never - - setPhysics({ ...physics, labels: 1 })}> - On Highlight - - setPhysics({ ...physics, labels: 2 })}> - Always - - - - - 1} animateOpacity> - + {threeDim && ( + <> setPhysics({ ...physics, labelScale: value / 5 })} + label="Node opacity" + value={physics.nodeOpacity} + min={0} + max={1} + onChange={(value) => setPhysics({ ...physics, nodeOpacity: value })} /> - - - - setPhysics({ ...physics, particles: !physics.particles })} - > - setPhysics({ ...physics, particlesNumber: value })} - /> + setPhysics({ ...physics, nodeResolution: value })} + /> + + )} setPhysics({ ...physics, particlesWidth: value })} + label="Link width" + value={physics.linkWidth} + onChange={(value) => setPhysics({ ...physics, linkWidth: value })} /> - - setPhysics({ ...physics, highlight: !physics.highlight })} - value={physics.highlight} - > - } - align="stretch" - paddingLeft={0} + {threeDim && ( + setPhysics({ ...physics, linkOpacity: value })} + /> + )} + + + Labels + + } + > + {!physics.labels + ? 'Never' + : physics.labels < 2 + ? 'On Highlight' + : 'Always'} + + + setPhysics({ ...physics, labels: 0 })}> + Never + + setPhysics({ ...physics, labels: 1 })}> + On Highlight + + setPhysics({ ...physics, labels: 2 })}> + Always + + + + + 1} animateOpacity> + + + setPhysics({ ...physics, labelScale: value / 5 }) + } + /> + + + + setPhysics({ ...physics, particles: !physics.particles })} > setPhysics({ ...physics, highlightLinkSize: value })} + label="Particle Number" + value={physics.particlesNumber} + max={5} + step={1} + onChange={(value) => setPhysics({ ...physics, particlesNumber: value })} /> setPhysics({ ...physics, highlightNodeSize: value })} + label="Particle Size" + value={physics.particlesWidth} + onChange={(value) => setPhysics({ ...physics, particlesWidth: value })} /> - {/* + + setPhysics({ ...physics, highlight: !physics.highlight })} + value={physics.highlight} + > + } + align="stretch" + paddingLeft={0} + > + + setPhysics({ ...physics, highlightLinkSize: value }) + } + /> + + setPhysics({ ...physics, highlightNodeSize: value }) + } + /> + {/* Highlight node color Highlight link color */} - { - setPhysics({ ...physics, highlightAnim: !physics.highlightAnim }) - }} - value={physics.highlightAnim} - > - setPhysics({ ...physics, animationSpeed: v })} - value={physics.animationSpeed} - infoText="Slower speed has a chance of being buggy" - min={50} - max={1000} - step={10} - /> - - {/* setPhysics({ ...physics, animationSpeed: v })} + value={physics.animationSpeed} + infoText="Slower speed has a chance of being buggy" + min={50} + max={1000} + step={10} + /> + + {/* setPhysics({ ...physics, algorithmName: { option } }), )} /> */} - - - + + + + -- cgit v1.2.3