diff options
| -rw-r--r-- | components/config.ts | 23 | ||||
| -rw-r--r-- | components/tweaks.tsx | 725 | ||||
| -rw-r--r-- | org-roam-ui.el | 22 | ||||
| -rw-r--r-- | pages/_app.tsx | 3 | ||||
| -rw-r--r-- | pages/index.tsx | 41 | ||||
| -rw-r--r-- | styles/globals.css | 6 |
6 files changed, 488 insertions, 332 deletions
diff --git a/components/config.ts b/components/config.ts index 41d5345..e7a51e2 100644 --- a/components/config.ts +++ b/components/config.ts @@ -13,7 +13,7 @@ export const initialPhysics = { linkOpacity: 0.4, linkWidth: 1, nodeRel: 4, - labels: true, + labels: 2, labelScale: 1.5, alphaDecay: 0.02, alphaTarget: 0, @@ -49,6 +49,27 @@ export const initialFilter = { date: [], } +export const initialMouse = { + hover: { + highlight: true, + select: false, + follow: false, + local: false, + }, + click: { + highlight: true, + select: false, + follow: true, + local: true, + }, + doubleClick: { + highlight: true, + select: false, + follow: false, + local: false, + }, +} + function getAlgos(option?: boolean) { const options: string[] = [] const algorithms: { [name: string]: (percent: number) => number } = {} diff --git a/components/tweaks.tsx b/components/tweaks.tsx index d337b59..61eecf4 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -1,4 +1,10 @@ -import { RepeatClockIcon, ChevronDownIcon, SettingsIcon, InfoOutlineIcon } from '@chakra-ui/icons' +import { + CloseIcon, + RepeatClockIcon, + ChevronDownIcon, + SettingsIcon, + InfoOutlineIcon, +} from '@chakra-ui/icons' import { Accordion, AccordionButton, @@ -6,6 +12,7 @@ import { AccordionItem, AccordionPanel, Box, + BoxProps, Button, CloseButton, Flex, @@ -24,8 +31,12 @@ import { Text, Tooltip, VStack, + useDisclosure, + Heading, + SlideFade, + Collapse, } from '@chakra-ui/react' -import { useState } from 'react' +import React, { useState } from 'react' import Scrollbars from 'react-custom-scrollbars-2' import { initialPhysics, initialFilter } from './config' @@ -42,346 +53,414 @@ export const Tweaks = (props: TweakProps) => { const { physics, setPhysics, threeDim, filter, setFilter } = props const [showTweaks, setShowTweaks] = useState(true) - if (!showTweaks) { - return ( - <Box position="absolute" zIndex="overlay" marginTop="2%" marginLeft="2%"> + return ( + <> + <Box + position="absolute" + zIndex="overlay" + marginTop="2%" + marginLeft="2%" + display={showTweaks ? 'none' : 'block'} + > <IconButton aria-label="Settings" icon={<SettingsIcon />} onClick={() => setShowTweaks(true)} /> </Box> - ) - } - - return ( - <Box - zIndex="overlay" - position="absolute" - bg="alt.100" - w="xs" - marginTop="2%" - marginLeft="2%" - borderRadius="md" - maxH={650} - paddingBottom={5} - > - <Box display="flex" justifyContent="flex-end"> - <Tooltip label="Reset settings to defaults"> - <IconButton - aria-label="Reset Defaults" - icon={<RepeatClockIcon />} - onClick={() => setPhysics(initialPhysics)} - colorScheme="purple" - /> - </Tooltip> - <CloseButton onClick={() => setShowTweaks(false)} /> - </Box> - <Scrollbars - autoHeight - autoHeightMax={600} - autoHide - renderThumbVertical={({ style, ...props }) => ( - <Box - {...props} - style={{ - ...style, - borderRadius: 10, - }} - bg="purple.500" - /> - )} - > - <Accordion allowMultiple allowToggle> - <AccordionItem> - <AccordionButton> - <AccordionIcon /> - <Text>Filter</Text> - </AccordionButton> - <AccordionPanel> - <Flex justifyContent="space-between"> - <Text>Orphans</Text> - <Switch - colorScheme="purple" - onChange={() => { - setFilter({ ...filter, orphans: !filter.orphans }) - }} - isChecked={filter.orphans} - ></Switch> - </Flex> - <Flex justifyContent="space-between"> - <Text>Link nodes with parent file</Text> - <Switch - colorScheme="purple" - onChange={() => { - setFilter({ ...filter, parents: !filter.parents }) - }} - isChecked={filter.parents} - ></Switch> - </Flex> - </AccordionPanel> - </AccordionItem> - <AccordionItem> - <AccordionButton display="flex" justifyContent="space-between"> - <Box display="flex"> - <AccordionIcon /> - <Text>Physics</Text> - </Box> - <Switch - id="physicsOn" - onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })} - isChecked={physics.enabled} + <Collapse in={showTweaks} animateOpacity> + <Box + bg="alt.100" + w="xs" + marginTop="2%" + marginLeft="2%" + borderRadius="xl" + maxH={650} + paddingBottom={5} + zIndex="overlay" + position="absolute" + boxShadow="xl" + > + <Box display="flex" justifyContent="flex-end" alignItems="center"> + <Tooltip label="Reset settings to defaults"> + <IconButton + aria-label="Reset Defaults" + icon={<RepeatClockIcon />} + onClick={() => setPhysics(initialPhysics)} colorScheme="purple" + variant="none" + size="sm" /> - </AccordionButton> - <AccordionPanel> - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.200" />} - align="stretch" - > - <EnableSection - label="Gravity" - value={physics.gravityOn} - onChange={() => setPhysics({ ...physics, gravityOn: !physics.gravityOn })} - > - <SliderWithInfo - label="Strength" - value={physics.gravity * 10} - onChange={(v) => setPhysics({ ...physics, gravity: v / 10 })} - /> - </EnableSection> - <SliderWithInfo - value={-physics.charge / 100} - onChange={(value) => setPhysics({ ...physics, charge: -100 * value })} - 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 * 10} - onChange={(value) => setPhysics({ ...physics, collisionStrength: value / 10 })} - label="Strength" + </Tooltip> + <IconButton + size="sm" + colorScheme="purple" + icon={<CloseIcon />} + aria-label="Close Tweak Panel" + variant="ghost" + onClick={() => setShowTweaks(false)} + /> + </Box> + <Scrollbars + autoHeight + autoHeightMax={600} + autoHide + renderThumbVertical={({ style, ...props }) => ( + <Box + {...props} + style={{ + ...style, + borderRadius: 10, + }} + bg="purple.500" + /> + )} + > + <Accordion allowMultiple allowToggle color="black" paddingRight={2}> + <AccordionItem> + <AccordionButton> + <AccordionIcon marginRight={2} /> + <Heading size="sm">Filter</Heading> + </AccordionButton> + <AccordionPanel> + <VStack + spacing={2} + justifyContent="flex-start" + divider={<StackDivider borderColor="gray.500" />} + align="stretch" + paddingLeft={7} + color="gray.800" + > + <Flex justifyContent="space-between"> + <Text>Orphans</Text> + <Switch + colorScheme="purple" + onChange={() => { + setFilter({ ...filter, orphans: !filter.orphans }) + }} + isChecked={filter.orphans} + ></Switch> + </Flex> + <Flex justifyContent="space-between"> + <Text>Link nodes with parent file</Text> + <Switch + colorScheme="purple" + onChange={() => { + setFilter({ ...filter, parents: !filter.parents }) + }} + isChecked={filter.parents} + ></Switch> + </Flex> + </VStack> + </AccordionPanel> + </AccordionItem> + <AccordionItem> + <AccordionButton display="flex" justifyContent="space-between"> + <Box display="flex"> + <AccordionIcon marginRight={2} /> + <Heading size="sm">Physics</Heading> + </Box> + <Switch + id="physicsOn" + onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })} + isChecked={physics.enabled} + colorScheme="purple" /> - </EnableSection> - <SliderWithInfo - value={physics.linkStrength * 5} - onChange={(value) => setPhysics({ ...physics, linkStrength: value / 5 })} - label="Link Force" - /> - <SliderWithInfo - label="Link Iterations" - value={physics.linkIts} - onChange={(value) => setPhysics({ ...physics, linkIts: value })} - 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={(value) => setPhysics({ ...physics, velocityDecay: value / 10 })} - /> - </VStack> - <Box> - <Accordion allowToggle> - <AccordionItem> - <AccordionButton> - <Text>Advanced</Text> - <AccordionIcon /> - </AccordionButton> - <AccordionPanel> + </AccordionButton> + <AccordionPanel> + <VStack + spacing={2} + justifyContent="flex-start" + divider={<StackDivider borderColor="gray.500" />} + align="stretch" + paddingLeft={7} + color="gray.800" + > + <EnableSection + label="Gravity" + value={physics.gravityOn} + onChange={() => setPhysics({ ...physics, gravityOn: !physics.gravityOn })} + > + <SliderWithInfo + label="Strength" + value={physics.gravity * 10} + onChange={(v) => setPhysics({ ...physics, gravity: v / 10 })} + /> + </EnableSection> + <SliderWithInfo + value={-physics.charge / 100} + onChange={(value) => setPhysics({ ...physics, charge: -100 * value })} + 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 * 10} + onChange={(value) => + setPhysics({ ...physics, collisionStrength: value / 10 }) + } + label="Strength" + /> + </EnableSection> + <SliderWithInfo + value={physics.linkStrength * 5} + onChange={(value) => setPhysics({ ...physics, linkStrength: value / 5 })} + label="Link Force" + /> + <SliderWithInfo + label="Link Iterations" + value={physics.linkIts} + onChange={(value) => setPhysics({ ...physics, linkIts: value })} + 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={(value) => setPhysics({ ...physics, velocityDecay: value / 10 })} + /> + </VStack> + <Box> + <Accordion allowToggle> + <AccordionItem> + <AccordionButton> + <Text>Advanced</Text> + <AccordionIcon marginRight={2} /> + </AccordionButton> + <AccordionPanel> + <VStack + spacing={2} + justifyContent="flex-start" + divider={<StackDivider borderColor="gray.500" />} + align="stretch" + paddingLeft={3} + color="gray.800" + > + <SliderWithInfo + label="Iterations per tick" + min={1} + max={10} + step={1} + value={physics.iterations} + onChange={(v) => setPhysics({ ...physics, iterations: v })} + infoText="Number of times the physics simulation iterates per simulation step" + /> + <SliderWithInfo + label="Stabilization rate" + value={physics.alphaDecay * 50} + onChange={(value) => + setPhysics({ ...physics, alphaDecay: value / 50 }) + } + /> + </VStack> + </AccordionPanel> + </AccordionItem> + </Accordion> + </Box> + {/* </VStack> */} + </AccordionPanel> + </AccordionItem> + <AccordionItem> + <AccordionButton> + <AccordionIcon marginRight={2} /> + <Heading size="sm">Visual</Heading> + </AccordionButton> + <AccordionPanel> + <VStack + spacing={2} + justifyContent="flex-start" + divider={<StackDivider borderColor="gray.500" />} + align="stretch" + paddingLeft={7} + color="gray.800" + > + <EnableSection + label="Colors" + onChange={() => setPhysics({ ...physics, colorful: !physics.colorful })} + value={physics.colorful} + > + <Text>Child</Text> + </EnableSection> + <SliderWithInfo + label="Node size" + value={physics.nodeRel} + onChange={(value) => setPhysics({ ...physics, nodeRel: value })} + /> + <SliderWithInfo + label="Link width" + value={physics.linkWidth} + onChange={(value) => setPhysics({ ...physics, linkWidth: value })} + /> + <Box> + <Flex alignItems="center" justifyContent="space-between"> + <Text>Labels</Text> + <Menu> + <MenuButton as={Button} rightIcon={<ChevronDownIcon />}> + {!physics.labels + ? 'Never' + : physics.labels < 2 + ? 'On Highlight' + : 'Always'} + </MenuButton> + <MenuList bgColor="gray.200"> + <MenuItem onClick={() => setPhysics({ ...physics, labels: 0 })}> + Never + </MenuItem> + <MenuItem onClick={() => setPhysics({ ...physics, labels: 1 })}> + On Highlight + </MenuItem> + <MenuItem onClick={() => setPhysics({ ...physics, labels: 2 })}> + Always + </MenuItem> + </MenuList> + </Menu> + </Flex> + <Collapse in={physics.labels > 1} animateOpactiy> + <Box paddingLeft={4} paddingTop={2}> + <SliderWithInfo + label="Label Appearance Scale" + value={physics.labelScale * 5} + onChange={(value) => setPhysics({ ...physics, labelScale: value / 5 })} + /> + </Box> + </Collapse> + </Box> + <EnableSection + label="Directional Particles" + value={physics.particles} + onChange={() => setPhysics({ ...physics, particles: !physics.particles })} + > + <SliderWithInfo + label="Particle Number" + value={physics.particlesNumber} + max={5} + step={1} + onChange={(value) => setPhysics({ ...physics, particlesNumber: value })} + /> + <SliderWithInfo + label="Particle Size" + value={physics.particlesWidth} + onChange={(value) => setPhysics({ ...physics, particlesWidth: value })} + /> + </EnableSection> + <EnableSection + label="Highlight" + onChange={() => setPhysics({ ...physics, highlight: !physics.highlight })} + value={physics.highlight} + > <VStack - spacing={2} + spacing={1} justifyContent="flex-start" - divider={<StackDivider borderColor="gray.200" />} + divider={<StackDivider borderColor="gray.400" />} align="stretch" + paddingLeft={0} > <SliderWithInfo - label="Iterations per tick" - min={1} - max={10} - step={1} - value={physics.iterations} - onChange={(v) => setPhysics({ ...physics, iterations: v })} - infoText="Number of times the physics simulation iterates per simulation step" + label="Highlight Link Thickness" + value={physics.highlightLinkSize} + onChange={(value) => setPhysics({ ...physics, highlightLinkSize: value })} /> <SliderWithInfo - label="Stabilization rate" - value={physics.alphaDecay * 50} - onChange={(value) => setPhysics({ ...physics, alphaDecay: value / 50 })} + label="Highlight Node Size" + value={physics.highlightNodeSize} + onChange={(value) => setPhysics({ ...physics, highlightNodeSize: value })} /> - </VStack> - </AccordionPanel> - </AccordionItem> - </Accordion> - </Box> - {/* </VStack> */} - </AccordionPanel> - </AccordionItem> - <AccordionItem> - <AccordionButton> - <AccordionIcon /> - Visual - </AccordionButton> - <AccordionPanel> - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.200" />} - align="stretch" - > - <EnableSection - label="Colors" - onChange={() => setPhysics({ ...physics, colorful: !physics.colorful })} - value={physics.colorful} - > - <Text>Child</Text> - </EnableSection> - <SliderWithInfo - label="Node size" - value={physics.nodeRel} - onChange={(value) => setPhysics({ ...physics, nodeRel: value })} - /> - <SliderWithInfo - label="Link width" - value={physics.linkWidth} - onChange={(value) => setPhysics({ ...physics, linkWidth: value })} - /> - <EnableSection - label="Labels" - value={physics.labels} - onChange={() => setPhysics({ ...physics, labels: !physics.labels })} - > - <SliderWithInfo - label="Label Appearance Scale" - value={physics.labelScale * 5} - onChange={(value) => setPhysics({ ...physics, labelScale: value / 5 })} - /> - </EnableSection> - <EnableSection - label="Directional Particles" - value={physics.particles} - onChange={() => setPhysics({ ...physics, particles: !physics.particles })} - > - <SliderWithInfo - label="Particle Number" - value={physics.particlesNumber} - max={5} - step={1} - onChange={(value) => setPhysics({ ...physics, particlesNumber: value })} - /> - <SliderWithInfo - label="Particle Size" - value={physics.particlesWidth} - onChange={(value) => setPhysics({ ...physics, particlesWidth: value })} - /> - </EnableSection> - <EnableSection - label="Highlight Animation" - onChange={() => { - setPhysics({ ...physics, highlightAnim: !physics.highlightAnim }) - }} - value={physics.highlightAnim} - > - <SliderWithInfo - label="Animation speed" - onChange={(v) => setPhysics({ ...physics, animationSpeed: v })} - value={physics.animationSpeed} - infoText="Slower speed has a chance of being buggy" - min={50} - max={1000} - step={10} - /> - <Select - placeholder={physics.algorithmName} - onChange={(v) => { - setPhysics({ ...physics, algorithmName: v.target.value }) - }} - > - {physics.algorithmOptions.map((opt, i) => ( - <option key={i} value={opt}> - {opt} - </option> - ))} - </Select> - {/* <DropDownMenu + {/*<Flex justifyContent="space-between"> + <Text> Highlight node color </Text> + </Flex> + <Flex justifyContent="space-between"> + <Text> Highlight link color </Text> + </Flex>*/} + <EnableSection + label="Highlight Animation" + onChange={() => { + setPhysics({ ...physics, highlightAnim: !physics.highlightAnim }) + }} + value={physics.highlightAnim} + > + <SliderWithInfo + label="Animation speed" + onChange={(v) => setPhysics({ ...physics, animationSpeed: v })} + value={physics.animationSpeed} + infoText="Slower speed has a chance of being buggy" + min={50} + max={1000} + step={10} + /> + <Select + placeholder={physics.algorithmName} + onChange={(v) => { + setPhysics({ ...physics, algorithmName: v.target.value }) + }} + > + {physics.algorithmOptions.map((opt, i) => ( + <option key={i} value={opt}> + {opt} + </option> + ))} + </Select> + {/* <DropDownMenu displayValue={physics.algorithmName} textArray={physics.algorithmOptions} onClickArray={physics.algorithmOptions.map((option) => setPhysics({ ...physics, algorithmName: { option } }), )} /> */} - </EnableSection> - <EnableSection - label="Highlight" - onChange={() => setPhysics({ ...physics, highlight: !physics.highlight })} - value={physics.highlight} - > - <SliderWithInfo - label="Highlight Link Thickness Multiplier" - value={physics.highlightLinkSize} - onChange={(value) => setPhysics({ ...physics, highlightLinkSize: value })} - /> - <SliderWithInfo - label="Highlight Node Size Multiplier" - value={physics.highlightNodeSize} - onChange={(value) => setPhysics({ ...physics, highlightNodeSize: value })} - /> - <Flex justifyContent="space-between"> - <Text> Highlight node color </Text> - </Flex> - <Flex justifyContent="space-between"> - <Text> Highlight link color </Text> - </Flex> - </EnableSection> - </VStack> - </AccordionPanel> - </AccordionItem> - <AccordionItem> - <AccordionButton> - <AccordionIcon /> - Behavior - </AccordionButton> - <AccordionPanel> - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.200" />} - align="stretch" - > - <Box display="flex" justifyContent="space-between" alignItems="center"> - <Text>Hover Higlight</Text> - <Menu> - <MenuButton as={Button} rightIcon={<ChevronDownIcon />}> - {physics.hover} - </MenuButton> - <MenuList> - <MenuItem>Off</MenuItem> - <MenuItem>On</MenuItem> - </MenuList> - </Menu> - </Box> - <Box display="flex" justifyContent="space-between"> - <Text>Click</Text> - </Box> - <Box display="flex" justifyContent="space-between"> - <Text>Double-click</Text> - </Box> - </VStack> - </AccordionPanel> - </AccordionItem> - </Accordion> - </Scrollbars> - </Box> + </EnableSection> + </VStack> + </EnableSection> + </VStack> + </AccordionPanel> + </AccordionItem> + <AccordionItem> + <AccordionButton> + <AccordionIcon marginRight={2} /> + <Heading size="sm">Behavior</Heading> + </AccordionButton> + <AccordionPanel> + <VStack + spacing={2} + justifyContent="flex-start" + divider={<StackDivider borderColor="gray.500" />} + align="stretch" + paddingLeft={7} + color="gray.800" + > + <Box display="flex" justifyContent="space-between" alignItems="center"> + <Text>Hover Higlight</Text> + <Menu> + <MenuButton as={Button} rightIcon={<ChevronDownIcon />}> + {physics.hover} + </MenuButton> + <MenuList> + <MenuItem>Off</MenuItem> + <MenuItem>On</MenuItem> + </MenuList> + </Menu> + </Box> + <Box display="flex" justifyContent="space-between"> + <Text>Click</Text> + </Box> + <Box display="flex" justifyContent="space-between"> + <Text>Double-click</Text> + </Box> + </VStack> + </AccordionPanel> + </AccordionItem> + </Accordion> + </Scrollbars> + </Box> + </Collapse> + </> ) } + export interface InfoTooltipProps { infoText?: string | boolean } @@ -429,8 +508,8 @@ export const SliderWithInfo = ({ <SliderTrack> <SliderFilledTrack /> </SliderTrack> - <Tooltip label={value.toFixed(1)}> - <SliderThumb /> + <Tooltip bg="purple.500" label={value.toFixed(1)}> + <SliderThumb bg="white" /> </Tooltip> </Slider> </Box> @@ -456,14 +535,18 @@ export const EnableSection = (props: EnableSectionProps) => { </Box> <Switch isChecked={!!value} onChange={onChange} colorScheme="purple" /> </Box> - {value && children} + <Collapse in={!!value} animateOpacity> + <Box paddingLeft={4} paddingTop={2}> + {children} + </Box> + </Collapse> </Box> ) } export interface DropDownMenuProps { textArray: string[] - onClickArray: any + onClickArray: (() => void)[] displayValue: string } diff --git a/org-roam-ui.el b/org-roam-ui.el index 0b4646e..83476e9 100644 --- a/org-roam-ui.el +++ b/org-roam-ui.el @@ -36,6 +36,8 @@ (require 'json) (require 'simple-httpd) (require 'org-roam) +(require 'org-ref) +(require 'org-id) (defgroup org-roam-ui nil "UI in Org-roam." @@ -98,11 +100,27 @@ ROWS is the sql result, while COLUMN-NAMES is the columns to use." (let ((node (org-roam-populate (org-roam-node-create :id id))) html-string) (org-roam-with-temp-buffer (org-roam-node-file node) + (progn (setq-local org-export-with-toc nil) (setq-local org-export-with-broken-links t) (setq-local org-export-with-sub-superscripts nil) - (setq html-string (org-export-as 'html))) - (insert html-string))) + (replace-string "[[id:" "[[./") + (let* ((file-string (buffer-string)) + (matches (s-match-strings-all "\\[\\[\\(file:\\|\\.\\/\\)\\(.*\\.\\(png\\|jpg\\|jpeg\\|gif\\|svg\\)\\)\\]\\(\\[.*\\]\\)?\\]" file-string))) + (dolist (match matches) + (let ((path (elt match 2)) + (link (elt match 0))) + (unless (file-name-absolute-p path) + (setq path (concat (file-name-directory (org-roam-node-file-node)) path))) + (setq path (f-full path)) + (if (file-exists-p path) + (setq file-string + (s-replace link (format "[[image:%s]]" path) file-string))))) + (erase-buffer) + (insert file-string)) + (setq html-string (org-export-as 'html)))) + (insert html-string) + (httpd-send-header t "text/html" 200 :Access-Control-Allow-Origin "*"))) (defservlet* current-node-id text/event-stream () (insert (format "data: %s\n\n" diff --git a/pages/_app.tsx b/pages/_app.tsx index 9a11798..3804c64 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -48,7 +48,8 @@ function MyApp({ Component, pageProps }: AppProps) { white: emacsTheme.bg, black: emacsTheme.fg, gray: { - 200: emacsTheme.base1, + 100: emacsTheme.base1, + 200: d3int.interpolate(emacsTheme.base1, emacsTheme.base3)(0.3), 300: emacsTheme.base2, 400: emacsTheme.base3, 500: emacsTheme.base4, diff --git a/pages/index.tsx b/pages/index.tsx index 8c97a79..4451a44 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,14 +9,17 @@ import type { import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api' import { GraphData, NodeObject } from 'force-graph' +import Head from 'next/head' + import { useWindowSize } from '@react-hook/window-size' import { useAnimation } from '@lilib/hooks' -import { Button, Box, IconButton, useTheme } from '@chakra-ui/react' +import { Button, Box, IconButton, useTheme, useDisclosure } from '@chakra-ui/react' import { SettingsIcon } from '@chakra-ui/icons' import { initialPhysics, initialFilter } from '../components/config' import { Tweaks } from '../components/tweaks' +import { Sidebar } from '../components/sidebar' // react-force-graph fails on import when server-rendered // https://github.com/vasturiano/react-force-graph/issues/155 @@ -54,6 +57,7 @@ export function GraphPage() { const [filter, setFilter] = usePersistantState('filter', initialFilter) const [graphData, setGraphData] = useState<GraphData | null>(null) const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null) + const { isOpen, onOpen, onClose } = useDisclosure() const nodeByIdRef = useRef<NodeById>({}) const linksByNodeIdRef = useRef<LinksByNodeId>({}) @@ -135,7 +139,32 @@ export function GraphPage() { } return ( - <Box display="flex" justifyContent="space-between"> + <Box display="flex"> + <Head> + <title> Org Roam UI </title> + <script + async + src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML" + ></script> + </Head> + <Button + position="absolute" + marginTop="6%" + zIndex="overlay" + marginRight="5" + colorScheme="purple" + onClick={onOpen} + > + Open Drawer + </Button> + <Sidebar + nodeById={nodeByIdRef.current} + {...{ + isOpen, + onClose, + emacsNodeId, + }} + /> <Tweaks {...{ physics, @@ -600,10 +629,16 @@ export const Graph = function (props: GraphProps) { }, } + const bg = theme.colors.alt[100] return ( <div> {threeDim ? ( - <ForceGraph3D ref={graph3dRef} {...graphCommonProps} nodeThreeObjectExtend={true} /> + <ForceGraph3D + ref={graph3dRef} + {...graphCommonProps} + nodeThreeObjectExtend={true} + backgroundColor={theme.colors.alt[100]} + /> ) : ( <ForceGraph2D ref={graph2dRef} {...graphCommonProps} /> )} diff --git a/styles/globals.css b/styles/globals.css index 713c742..6e5a179 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -5,10 +5,8 @@ body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } - -a { - color: inherit; - text-decoration: none; +h1 { + font-weight: bold; } * { |