From eef204000abc79c9a83f3ce268f051dcfff6bf7d Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Mon, 26 Jul 2021 01:42:10 +0200 Subject: file viewer, prettier things --- components/config.ts | 23 +- components/tweaks.tsx | 725 ++++++++++++++++++++++++++++---------------------- org-roam-ui.el | 22 +- pages/_app.tsx | 3 +- pages/index.tsx | 41 ++- 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 ( - + return ( + <> + } onClick={() => setShowTweaks(true)} /> - ) - } - - return ( - - - - } - onClick={() => setPhysics(initialPhysics)} - colorScheme="purple" - /> - - setShowTweaks(false)} /> - - ( - - )} - > - - - - - Filter - - - - Orphans - { - setFilter({ ...filter, orphans: !filter.orphans }) - }} - isChecked={filter.orphans} - > - - - Link nodes with parent file - { - setFilter({ ...filter, parents: !filter.parents }) - }} - isChecked={filter.parents} - > - - - - - - - - Physics - - setPhysics({ ...physics, enabled: !physics.enabled })} - isChecked={physics.enabled} + + + + + } + onClick={() => setPhysics(initialPhysics)} colorScheme="purple" + variant="none" + size="sm" /> - - - } - align="stretch" - > - setPhysics({ ...physics, gravityOn: !physics.gravityOn })} - > - setPhysics({ ...physics, gravity: v / 10 })} - /> - - setPhysics({ ...physics, charge: -100 * value })} - label="Repulsive Force" - /> - setPhysics({ ...physics, collision: !physics.collision })} - > - setPhysics({ ...physics, collisionStrength: value / 10 })} - label="Strength" + + } + aria-label="Close Tweak Panel" + variant="ghost" + onClick={() => setShowTweaks(false)} + /> + + ( + + )} + > + + + + + Filter + + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + + Orphans + { + setFilter({ ...filter, orphans: !filter.orphans }) + }} + isChecked={filter.orphans} + > + + + Link nodes with parent file + { + setFilter({ ...filter, parents: !filter.parents }) + }} + isChecked={filter.parents} + > + + + + + + + + + Physics + + setPhysics({ ...physics, enabled: !physics.enabled })} + isChecked={physics.enabled} + colorScheme="purple" /> - - setPhysics({ ...physics, linkStrength: value / 5 })} - label="Link Force" - /> - 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)" - /> - setPhysics({ ...physics, velocityDecay: value / 10 })} - /> - - - - - - Advanced - - - + + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + setPhysics({ ...physics, gravityOn: !physics.gravityOn })} + > + setPhysics({ ...physics, gravity: v / 10 })} + /> + + setPhysics({ ...physics, charge: -100 * value })} + label="Repulsive Force" + /> + setPhysics({ ...physics, collision: !physics.collision })} + > + + setPhysics({ ...physics, collisionStrength: value / 10 }) + } + label="Strength" + /> + + setPhysics({ ...physics, linkStrength: value / 5 })} + label="Link Force" + /> + 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)" + /> + setPhysics({ ...physics, velocityDecay: value / 10 })} + /> + + + + + + Advanced + + + + } + align="stretch" + paddingLeft={3} + color="gray.800" + > + setPhysics({ ...physics, iterations: v })} + infoText="Number of times the physics simulation iterates per simulation step" + /> + + setPhysics({ ...physics, alphaDecay: value / 50 }) + } + /> + + + + + + {/* */} + + + + + + Visual + + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + setPhysics({ ...physics, colorful: !physics.colorful })} + value={physics.colorful} + > + Child + + setPhysics({ ...physics, nodeRel: value })} + /> + setPhysics({ ...physics, linkWidth: 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} animateOpactiy> + + setPhysics({ ...physics, labelScale: value / 5 })} + /> + + + + setPhysics({ ...physics, particles: !physics.particles })} + > + setPhysics({ ...physics, particlesNumber: value })} + /> + setPhysics({ ...physics, particlesWidth: value })} + /> + + setPhysics({ ...physics, highlight: !physics.highlight })} + value={physics.highlight} + > } + divider={} align="stretch" + paddingLeft={0} > 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 })} /> setPhysics({ ...physics, alphaDecay: value / 50 })} + label="Highlight Node Size" + value={physics.highlightNodeSize} + onChange={(value) => setPhysics({ ...physics, highlightNodeSize: value })} /> - - - - - - {/* */} - - - - - - Visual - - - } - align="stretch" - > - setPhysics({ ...physics, colorful: !physics.colorful })} - value={physics.colorful} - > - Child - - setPhysics({ ...physics, nodeRel: value })} - /> - setPhysics({ ...physics, linkWidth: value })} - /> - setPhysics({ ...physics, labels: !physics.labels })} - > - setPhysics({ ...physics, labelScale: value / 5 })} - /> - - setPhysics({ ...physics, particles: !physics.particles })} - > - setPhysics({ ...physics, particlesNumber: value })} - /> - setPhysics({ ...physics, particlesWidth: value })} - /> - - { - 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} - /> - - {/* + 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, algorithmName: { option } }), )} /> */} - - setPhysics({ ...physics, highlight: !physics.highlight })} - value={physics.highlight} - > - setPhysics({ ...physics, highlightLinkSize: value })} - /> - setPhysics({ ...physics, highlightNodeSize: value })} - /> - - Highlight node color - - - Highlight link color - - - - - - - - - Behavior - - - } - align="stretch" - > - - Hover Higlight - - }> - {physics.hover} - - - Off - On - - - - - Click - - - Double-click - - - - - - - + + + + + + + + + + Behavior + + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + + Hover Higlight + + }> + {physics.hover} + + + Off + On + + + + + Click + + + Double-click + + + + + + + + + ) } + export interface InfoTooltipProps { infoText?: string | boolean } @@ -429,8 +508,8 @@ export const SliderWithInfo = ({ - - + + @@ -456,14 +535,18 @@ export const EnableSection = (props: EnableSectionProps) => { - {value && children} + + + {children} + + ) } 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(null) const [emacsNodeId, setEmacsNodeId] = useState(null) + const { isOpen, onOpen, onClose } = useDisclosure() const nodeByIdRef = useRef({}) const linksByNodeIdRef = useRef({}) @@ -135,7 +139,32 @@ export function GraphPage() { } return ( - + + + Org Roam UI + + + + {threeDim ? ( - + ) : ( )} 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; } * { -- cgit v1.2.3