summaryrefslogtreecommitdiff
path: root/components/Tweaks
diff options
context:
space:
mode:
Diffstat (limited to 'components/Tweaks')
-rw-r--r--components/Tweaks/LabelsPanel.tsx217
-rw-r--r--components/Tweaks/NodesNLinksPanel.tsx2
-rw-r--r--components/Tweaks/PhysicsPanel.tsx56
-rw-r--r--components/Tweaks/SliderWithInfo.tsx2
-rw-r--r--components/Tweaks/TagColorPanel.tsx8
-rw-r--r--components/Tweaks/TagPanel.tsx22
-rw-r--r--components/Tweaks/VisualsPanel.tsx3
7 files changed, 171 insertions, 139 deletions
diff --git a/components/Tweaks/LabelsPanel.tsx b/components/Tweaks/LabelsPanel.tsx
index 013409e..c40b689 100644
--- a/components/Tweaks/LabelsPanel.tsx
+++ b/components/Tweaks/LabelsPanel.tsx
@@ -28,112 +28,135 @@ export const LabelsPanel = (props: LabelsPanelProps) => {
<VStack
spacing={2}
justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
+ divider={<StackDivider borderColor="gray.400" />}
align="stretch"
color="gray.800"
>
- <Box>
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Show labels</Text>
- <Menu isLazy placement="right">
- <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
- {!visuals.labels ? 'Never' : visuals.labels < 2 ? 'On Highlight' : 'Always'}
- </MenuButton>
- <Portal>
- {' '}
- <MenuList zIndex="popover" bgColor="gray.200">
- <MenuItem onClick={() => setVisuals({ ...visuals, labels: 0 })}>Never</MenuItem>
- <MenuItem onClick={() => setVisuals({ ...visuals, labels: 1 })}>
- On Highlight
- </MenuItem>
- <MenuItem onClick={() => setVisuals({ ...visuals, labels: 2 })}>Always</MenuItem>
- <MenuItem onClick={() => setVisuals({ ...visuals, labels: 3 })}>
- Always (even in 3D)
- </MenuItem>
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- <VStack
- spacing={1}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.400" />}
- align="stretch"
- paddingLeft={2}
- color="gray.800"
- >
- <SliderWithInfo
- label="Label font size"
- value={visuals.labelFontSize}
- min={5}
- max={20}
- step={0.5}
- onChange={(value) => setVisuals({ ...visuals, labelFontSize: value })}
- />
- <SliderWithInfo
- label="Max. label characters"
- value={visuals.labelLength}
- min={10}
- max={100}
- step={1}
- onChange={(value) => setVisuals({ ...visuals, labelLength: value })}
- />
+ <Flex alignItems="center" justifyContent="space-between">
+ <Text>Show labels</Text>
+ <Menu isLazy placement="right">
+ <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
+ {!visuals.labels ? 'Never' : visuals.labels < 2 ? 'On Highlight' : 'Always'}
+ </MenuButton>
+ <Portal>
+ {' '}
+ <MenuList zIndex="popover" bgColor="gray.200">
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 0 })}>Never</MenuItem>
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 1 })}>
+ On Highlight
+ </MenuItem>
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 2 })}>Always</MenuItem>
+ <MenuItem onClick={() => setVisuals({ ...visuals, labels: 3 })}>
+ Always (even in 3D)
+ </MenuItem>
+ </MenuList>
+ </Portal>
+ </Menu>
+ </Flex>
+ <Collapse in={visuals.labels > 1} animateOpacity>
+ <Box paddingTop={2}>
<SliderWithInfo
- label="Max. label line length"
- value={visuals.labelWordWrap}
- min={10}
- max={100}
- step={1}
- onChange={(value) => setVisuals({ ...visuals, labelWordWrap: value })}
+ label="Label Appearance Scale"
+ value={visuals.labelScale * 2}
+ onChange={(value) => setVisuals({ ...visuals, labelScale: value / 2 })}
/>
+ </Box>
+ <Box paddingTop={2}>
<SliderWithInfo
- label="Space between label lines"
- value={visuals.labelLineSpace}
- min={0.2}
- max={3}
- step={0.1}
- onChange={(value) => setVisuals({ ...visuals, labelLineSpace: value })}
+ label="Label dynamicity"
+ infoText="By default, labels of nodes with more links will appear earlier than those with fewer. This slider changes the strength of this effect, put it at zero to disable it."
+ value={visuals.labelDynamicStrength}
+ min={0}
+ max={1}
+ step={0.05}
+ onChange={(value) =>
+ setVisuals((curr: typeof initialVisuals) => ({
+ ...curr,
+ labelDynamicStrength: value,
+ }))
+ }
/>
- <ColorMenu
- colorList={colorList}
- label="Text"
- setVisuals={setVisuals}
- value="labelTextColor"
- visValue={visuals.labelTextColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Background"
- setVisuals={setVisuals}
- value="labelBackgroundColor"
- visValue={visuals.labelBackgroundColor}
- />
- <Collapse in={!!visuals.labelBackgroundColor} animateOpacity>
- <Box paddingTop={2}>
- <SliderWithInfo
- label="Background opacity"
- value={visuals.labelBackgroundOpacity}
- onChange={(value) => {
- console.log(visuals.labelBackgroundOpacity)
- setVisuals({ ...visuals, labelBackgroundOpacity: value })
- }}
- min={0}
- max={1}
- step={0.01}
- />
- </Box>
+ <Collapse in={visuals.labelDynamicStrength > 0}>
+ <SliderWithInfo
+ label="Dynamic zoom degree cap"
+ infoText="By default, labels of nodes with more links will appear earlier than those with fewer. This slider changes the strength of this effect, put it at zero to disable it."
+ value={visuals.labelDynamicDegree}
+ min={1}
+ max={15}
+ step={1}
+ onChange={(value) =>
+ setVisuals((curr: typeof initialVisuals) => ({
+ ...curr,
+ labelDynamicDegree: value,
+ }))
+ }
+ />
</Collapse>
- <Collapse in={visuals.labels > 1} animateOpacity>
- <Box paddingTop={2}>
- <SliderWithInfo
- label="Label Appearance Scale"
- value={visuals.labelScale * 5}
- onChange={(value) => setVisuals({ ...visuals, labelScale: value / 5 })}
- />
- </Box>
- </Collapse>
- </VStack>
+ </Box>
+ </Collapse>
+ <ColorMenu
+ colorList={colorList}
+ label="Text"
+ setVisuals={setVisuals}
+ value="labelTextColor"
+ visValue={visuals.labelTextColor}
+ />
+ <Box>
+ <ColorMenu
+ colorList={colorList}
+ label="Background"
+ setVisuals={setVisuals}
+ value="labelBackgroundColor"
+ visValue={visuals.labelBackgroundColor}
+ />
+ <Collapse in={!!visuals.labelBackgroundColor} animateOpacity>
+ <Box paddingTop={2}>
+ <SliderWithInfo
+ label="Background opacity"
+ value={visuals.labelBackgroundOpacity}
+ onChange={(value) => {
+ console.log(visuals.labelBackgroundOpacity)
+ setVisuals({ ...visuals, labelBackgroundOpacity: value })
+ }}
+ min={0}
+ max={1}
+ step={0.01}
+ />
+ </Box>
+ </Collapse>
</Box>
+ <SliderWithInfo
+ label="Label font size"
+ value={visuals.labelFontSize}
+ min={5}
+ max={20}
+ step={0.5}
+ onChange={(value) => setVisuals({ ...visuals, labelFontSize: value })}
+ />
+ <SliderWithInfo
+ label="Max. label characters"
+ value={visuals.labelLength}
+ min={10}
+ max={100}
+ step={1}
+ onChange={(value) => setVisuals({ ...visuals, labelLength: value })}
+ />
+ <SliderWithInfo
+ label="Max. label line length"
+ value={visuals.labelWordWrap}
+ min={10}
+ max={100}
+ step={1}
+ onChange={(value) => setVisuals({ ...visuals, labelWordWrap: value })}
+ />
+ <SliderWithInfo
+ label="Space between label lines"
+ value={visuals.labelLineSpace}
+ min={0.2}
+ max={3}
+ step={0.1}
+ onChange={(value) => setVisuals({ ...visuals, labelLineSpace: value })}
+ />
</VStack>
)
}
diff --git a/components/Tweaks/NodesNLinksPanel.tsx b/components/Tweaks/NodesNLinksPanel.tsx
index dba927c..3321ae3 100644
--- a/components/Tweaks/NodesNLinksPanel.tsx
+++ b/components/Tweaks/NodesNLinksPanel.tsx
@@ -28,7 +28,7 @@ export const NodesNLinksPanel = (props: NodesNLinksPanelProps) => {
onChange={(value) => setVisuals({ ...visuals, nodeRel: value })}
/>
<SliderWithInfo
- label="Node connections size scale"
+ label="Node degree size multiplier"
value={visuals.nodeSizeLinks}
min={0}
max={2}
diff --git a/components/Tweaks/PhysicsPanel.tsx b/components/Tweaks/PhysicsPanel.tsx
index 05fdba8..cd18f03 100644
--- a/components/Tweaks/PhysicsPanel.tsx
+++ b/components/Tweaks/PhysicsPanel.tsx
@@ -65,37 +65,15 @@ export const PhysicsPanel = (props: PhysicsPanelProps) => {
onChange={(v) => setPhysicsCallback(v, 'charge', -1 / 100)}
label="Repulsive Force"
/>
- <EnableSection
- label="Collision"
- infoText="Perfomance sap, disable if slow"
- value={physics.collision}
- onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
- >
- <SliderWithInfo
- value={physics.collisionStrength / 5}
- onChange={(v) => setPhysicsCallback(v, 'collisionStrength', 1 / 5)}
- label="Collision Radius"
- infoText="Easy with this one, high values can lead to a real jiggly mess"
- />
- </EnableSection>
<SliderWithInfo
value={physics.linkStrength * 5}
onChange={(v) => setPhysicsCallback(v, 'linkStrength', 5)}
label="Link Force"
/>
<SliderWithInfo
- label="Link Iterations"
- value={physics.linkIts}
- onChange={(v) => setPhysicsCallback(v, 'linkIts', 1)}
- min={0}
- max={6}
- step={1}
- infoText="How many links down the line the physics of a single node affects (Slow)"
- />
- <SliderWithInfo
- label="Viscosity"
- value={physics.velocityDecay * 10}
- onChange={(v) => setPhysicsCallback(v, 'velocityDecay', 10)}
+ label="Stabilization rate"
+ value={physics.alphaDecay * 50}
+ onChange={(v) => setPhysicsCallback(v, 'alphaDecay', 50)}
/>
</VStack>
<Box>
@@ -114,10 +92,32 @@ export const PhysicsPanel = (props: PhysicsPanelProps) => {
paddingLeft={3}
color="gray.800"
>
+ <EnableSection
+ label="Collision"
+ infoText="Perfomance sap, disable if slow"
+ value={physics.collision}
+ onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
+ >
+ <SliderWithInfo
+ value={physics.collisionStrength / 5}
+ onChange={(v) => setPhysicsCallback(v, 'collisionStrength', 1 / 5)}
+ label="Collision Radius"
+ infoText="Easy with this one, high values can lead to a real jiggly mess"
+ />
+ </EnableSection>
+ <SliderWithInfo
+ label="Link iterations"
+ value={physics.linkIts}
+ onChange={(v) => setPhysicsCallback(v, 'linkIts', 1)}
+ min={0}
+ max={6}
+ step={1}
+ infoText="How many links down the line the physics of a single node affects (Slow)"
+ />
<SliderWithInfo
- label="Stabilization rate"
- value={physics.alphaDecay * 50}
- onChange={(v) => setPhysicsCallback(v, 'alphaDecay', 50)}
+ label="Viscosity"
+ value={physics.velocityDecay * 10}
+ onChange={(v) => setPhysicsCallback(v, 'velocityDecay', 10)}
/>
<EnableSection
label="Center nodes"
diff --git a/components/Tweaks/SliderWithInfo.tsx b/components/Tweaks/SliderWithInfo.tsx
index 9d6903a..7984711 100644
--- a/components/Tweaks/SliderWithInfo.tsx
+++ b/components/Tweaks/SliderWithInfo.tsx
@@ -31,7 +31,7 @@ export const SliderWithInfo = ({
const { highlightColor } = useContext(ThemeContext)
return (
<Box key={label} pt={1} pb={2}>
- <Box display="flex" alignItems="flex-end">
+ <Box display="flex" alignItems="flex-end" mb={2}>
<Text>{label}</Text>
{infoText && <InfoTooltip infoText={infoText} />}
</Box>
diff --git a/components/Tweaks/TagColorPanel.tsx b/components/Tweaks/TagColorPanel.tsx
index 0a595e8..d20b540 100644
--- a/components/Tweaks/TagColorPanel.tsx
+++ b/components/Tweaks/TagColorPanel.tsx
@@ -40,7 +40,8 @@ export const TagColorPanel = (props: TagColorPanelProps) => {
<Box>
<CUIAutoComplete
items={tagArray}
- label="Add tag to filter"
+ labelStyleProps={{ fontWeight: 300, fontSize: 14 }}
+ label="Add tag to color"
placeholder=" "
disableCreateItem={true}
selectedItems={selectedItems}
@@ -60,9 +61,10 @@ export const TagColorPanel = (props: TagColorPanelProps) => {
highlightItemBg="gray.400"
toggleButtonStyleProps={{ variant: 'outline' }}
inputStyleProps={{
+ height: 8,
focusBorderColor: highlightColor,
color: 'gray.800',
- borderColor: 'gray.600',
+ borderColor: 'gray.500',
}}
tagStyleProps={{
display: 'none',
@@ -86,7 +88,7 @@ export const TagColorPanel = (props: TagColorPanelProps) => {
return (
<Flex key={tag} alignItems="center" justifyContent="space-between" width="100%" pl={2}>
<Box width="100%">
- <Text fontWeight="bold">{tag}</Text>
+ <Text>{tag}</Text>
</Box>
<Menu isLazy placement="right">
<MenuButton as={Button} colorScheme="" color="black">
diff --git a/components/Tweaks/TagPanel.tsx b/components/Tweaks/TagPanel.tsx
index 4d2e355..8d63c6f 100644
--- a/components/Tweaks/TagPanel.tsx
+++ b/components/Tweaks/TagPanel.tsx
@@ -25,6 +25,7 @@ export const TagPanel = (props: TagPanelProps) => {
return (
<CUIAutoComplete
+ labelStyleProps={{ fontWeight: 300, fontSize: 14 }}
items={tagArray}
label={'Add tag to ' + mode}
placeholder=" "
@@ -41,16 +42,25 @@ export const TagPanel = (props: TagPanelProps) => {
highlightItemBg="gray.400"
toggleButtonStyleProps={{ variant: 'outline' }}
inputStyleProps={{
+ mt: 2,
+ height: 8,
focusBorderColor: highlightColor,
color: 'gray.800',
- borderColor: 'gray.600',
+ borderColor: 'gray.500',
}}
tagStyleProps={{
- rounded: 'full',
- bg: highlightColor,
- height: 8,
- paddingLeft: 4,
- fontWeight: 'bold',
+ justifyContent: 'flex-start',
+ //variant: 'subtle',
+ fontSize: 10,
+ borderColor: highlightColor,
+ borderWidth: 1,
+ borderRadius: 'md',
+ color: highlightColor,
+ bg: '',
+ height: 4,
+ mb: 2,
+ //paddingLeft: 4,
+ //fontWeight: 'bold',
}}
hideToggleButton
itemRenderer={(selected) => selected.label}
diff --git a/components/Tweaks/VisualsPanel.tsx b/components/Tweaks/VisualsPanel.tsx
index d3c8415..23ba41f 100644
--- a/components/Tweaks/VisualsPanel.tsx
+++ b/components/Tweaks/VisualsPanel.tsx
@@ -108,6 +108,3 @@ export const VisualsPanel = (props: VisualsPanelProps) => {
</VStack>
)
}
-function clickCallback(color: string): void {
- throw new Error('Function not implemented.')
-}
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 11:57:54 +0000