summaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
Diffstat (limited to 'pages')
-rw-r--r--pages/index.tsx334
1 files changed, 184 insertions, 150 deletions
diff --git a/pages/index.tsx b/pages/index.tsx
index 15d6f2f..9b21f7b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -56,6 +56,7 @@ import { usePersistantState } from '../util/persistant-state'
import { ThemeContext, ThemeContextProps } from '../util/themecontext'
import { openNodeInEmacs } from '../util/webSocketFunctions'
import { drawLabels } from '../components/Graph/drawLabels'
+import { VariablesContext } from '../util/variablesContext'
const d3promise = import('d3-force-3d')
@@ -73,6 +74,13 @@ export type NodeById = { [nodeId: string]: OrgRoamNode | undefined }
export type LinksByNodeId = { [nodeId: string]: OrgRoamLink[] | undefined }
export type NodesByFile = { [file: string]: OrgRoamNode[] | undefined }
export type NodeByCite = { [key: string]: OrgRoamNode | undefined }
+export interface EmacsVariables {
+ roamDir?: string
+ dailyDir?: string
+ katexMacros?: { [key: string]: string }
+ attachDir?: string
+ subDirs: string[]
+}
export type Tags = string[]
export type Scope = {
nodeIds: string[]
@@ -138,7 +146,7 @@ export function GraphPage() {
const nodeByCiteRef = useRef<NodeByCite>({})
const tagsRef = useRef<Tags>([])
const graphRef = useRef<any>(null)
- const variablesRef = useRef<{ [variable: string]: string }>({})
+ const [emacsVariables, setEmacsVariables] = useState<EmacsVariables>({} as EmacsVariables)
const clusterRef = useRef<{ [id: string]: number }>({})
const currentGraphDataRef = useRef<GraphData>({ nodes: [], links: [] })
@@ -155,6 +163,8 @@ export function GraphPage() {
}
}, {})
+ // generate links between level 2 nodes and the level 1 node above it
+ // org-roam does not generate such links, so we have to put them in ourselves
const headingLinks: OrgRoamLink[] = Object.keys(nodesByFile).flatMap((file) => {
const nodesInFile = nodesByFile[file] ?? []
// "file node" as opposed to "heading node"
@@ -169,8 +179,7 @@ export function GraphPage() {
if (
node.level >= headingNode.level ||
node.pos >= headingNode.pos ||
- !headingNode.olp?.includes(node.title) //||
- // node.level >= headingNode.level - headingNode.olp.reverse().indexOf(node.title)
+ !headingNode.olp?.includes((node.title as string)?.replace(/ *\[\d*\/\d*\] */g, ''))
) {
return false
}
@@ -426,8 +435,8 @@ export function GraphPage() {
case 'graphdata':
return updateGraphData(message.data)
case 'variables':
- console.log(message.data)
- variablesRef.current = message.data
+ setEmacsVariables(message.data)
+ console.log(message)
return
case 'theme':
return setEmacsTheme(['custom', message.data])
@@ -538,158 +547,169 @@ export function GraphPage() {
windowWidth,
)
+ console.log(emacsVariables)
return (
- <Box display="flex" alignItems="flex-start" flexDirection="row" height="100vh" overflow="clip">
- <Tweaks
- {...{
- physics,
- setPhysics,
- threeDim,
- setThreeDim,
- filter,
- setFilter,
- visuals,
- setVisuals,
- mouse,
- setMouse,
- behavior,
- setBehavior,
- tagColors,
- setTagColors,
- coloring,
- setColoring,
- local,
- setLocal,
- }}
- tags={tagsRef.current}
- />
- <Box position="absolute">
- {graphData && (
- <Graph
- //ref={graphRef}
- nodeById={nodeByIdRef.current!}
- linksByNodeId={linksByNodeIdRef.current!}
- webSocket={WebSocketRef.current}
- variables={variablesRef.current}
- {...{
- physics,
- graphData,
- threeDim,
- emacsNodeId,
- filter,
- visuals,
- behavior,
- mouse,
- scope,
- setScope,
- tagColors,
- setPreviewNode,
- sidebarHighlightedNode,
- windowWidth,
- windowHeight,
- openContextMenu,
- contextMenu,
- handleLocal,
- mainWindowWidth,
- setMainWindowWidth,
- setContextMenuTarget,
- graphRef,
- clusterRef,
- coloring,
- local,
- }}
- />
- )}
- </Box>
- <Box position="relative" zIndex={4} width="100%">
- <Flex className="headerBar" h={10} flexDir="column">
- <Flex alignItems="center" h={10} justifyContent="flex-end">
- {/* <Flex flexDir="row" alignItems="center">
- * <Box color="blue.500" bgColor="alt.100" h="100%" p={3} mr={4}>
- * {mainItem.icon}
- * </Box>
- * <Heading size="sm">{mainItem.title}</Heading>
- * </Flex> */}
- <Flex height="100%" flexDirection="row">
- {scope.nodeIds.length > 0 && (
- <Tooltip label="Return to main graph">
+ <VariablesContext.Provider value={{ ...emacsVariables }}>
+ <Box
+ display="flex"
+ alignItems="flex-start"
+ flexDirection="row"
+ height="100vh"
+ overflow="clip"
+ >
+ <Tweaks
+ {...{
+ physics,
+ setPhysics,
+ threeDim,
+ setThreeDim,
+ filter,
+ setFilter,
+ visuals,
+ setVisuals,
+ mouse,
+ setMouse,
+ behavior,
+ setBehavior,
+ tagColors,
+ setTagColors,
+ coloring,
+ setColoring,
+ local,
+ setLocal,
+ }}
+ tags={tagsRef.current}
+ />
+ <Box position="absolute">
+ {graphData && (
+ <Graph
+ //ref={graphRef}
+ nodeById={nodeByIdRef.current!}
+ linksByNodeId={linksByNodeIdRef.current!}
+ webSocket={WebSocketRef.current}
+ variables={emacsVariables}
+ {...{
+ physics,
+ graphData,
+ threeDim,
+ emacsNodeId,
+ filter,
+ visuals,
+ behavior,
+ mouse,
+ scope,
+ setScope,
+ tagColors,
+ setPreviewNode,
+ sidebarHighlightedNode,
+ windowWidth,
+ windowHeight,
+ openContextMenu,
+ contextMenu,
+ handleLocal,
+ mainWindowWidth,
+ setMainWindowWidth,
+ setContextMenuTarget,
+ graphRef,
+ clusterRef,
+ coloring,
+ local,
+ }}
+ />
+ )}
+ </Box>
+ <Box position="relative" zIndex={4} width="100%">
+ <Flex className="headerBar" h={10} flexDir="column">
+ <Flex alignItems="center" h={10} justifyContent="flex-end">
+ {/* <Flex flexDir="row" alignItems="center">
+ * <Box color="blue.500" bgColor="alt.100" h="100%" p={3} mr={4}>
+ * {mainItem.icon}
+ * </Box>
+ * <Heading size="sm">{mainItem.title}</Heading>
+ * </Flex> */}
+ <Flex height="100%" flexDirection="row">
+ {scope.nodeIds.length > 0 && (
+ <Tooltip label="Return to main graph">
+ <IconButton
+ m={1}
+ icon={<BiNetworkChart />}
+ aria-label="Exit local mode"
+ onClick={() =>
+ setScope((currentScope: Scope) => ({
+ ...currentScope,
+ nodeIds: [],
+ }))
+ }
+ variant="subtle"
+ />
+ </Tooltip>
+ )}
+ <Tooltip label={isOpen ? 'Close sidebar' : 'Open sidebar'}>
<IconButton
m={1}
- icon={<BiNetworkChart />}
- aria-label="Exit local mode"
- onClick={() =>
- setScope((currentScope: Scope) => ({
- ...currentScope,
- nodeIds: [],
- }))
- }
+ // eslint-disable-next-line react/jsx-no-undef
+ icon={<BsReverseLayoutSidebarInsetReverse />}
+ aria-label="Close file-viewer"
variant="subtle"
+ onClick={isOpen ? onClose : onOpen}
/>
</Tooltip>
- )}
- <Tooltip label={isOpen ? 'Close sidebar' : 'Open sidebar'}>
- <IconButton
- m={1}
- // eslint-disable-next-line react/jsx-no-undef
- icon={<BsReverseLayoutSidebarInsetReverse />}
- aria-label="Close file-viewer"
- variant="subtle"
- onClick={isOpen ? onClose : onOpen}
- />
- </Tooltip>
+ </Flex>
</Flex>
</Flex>
- </Flex>
- </Box>
+ </Box>
- <Box position="relative" zIndex={4}>
- <Sidebar
- {...{
- isOpen,
- onOpen,
- onClose,
- previewNode,
- setPreviewNode,
- canUndo,
- canRedo,
- previousPreviewNode,
- nextPreviewNode,
- resetPreviewNode,
- setSidebarHighlightedNode,
- openContextMenu,
- scope,
- setScope,
- windowWidth,
- tagColors,
- setTagColors,
- filter,
- setFilter,
- }}
- nodeById={nodeByIdRef.current!}
- linksByNodeId={linksByNodeIdRef.current!}
- nodeByCite={nodeByCiteRef.current!}
- />
- </Box>
- {contextMenu.isOpen && (
- <div ref={contextMenuRef}>
- <ContextMenu
- //contextMenuRef={contextMenuRef}
- scope={scope}
- target={contextMenuTarget}
- background={false}
- coordinates={contextPos}
- handleLocal={handleLocal}
- menuClose={contextMenu.onClose.bind(contextMenu)}
- webSocket={WebSocketRef.current}
- setPreviewNode={setPreviewNode}
- setFilter={setFilter}
- filter={filter}
- setTagColors={setTagColors}
- tagColors={tagColors}
+ <Box position="relative" zIndex={4}>
+ <Sidebar
+ {...{
+ isOpen,
+ onOpen,
+ onClose,
+ previewNode,
+ setPreviewNode,
+ canUndo,
+ canRedo,
+ previousPreviewNode,
+ nextPreviewNode,
+ resetPreviewNode,
+ setSidebarHighlightedNode,
+ openContextMenu,
+ scope,
+ setScope,
+ windowWidth,
+ tagColors,
+ setTagColors,
+ filter,
+ setFilter,
+ }}
+ macros={emacsVariables.katexMacros}
+ attachDir={emacsVariables.attachDir || ''}
+ nodeById={nodeByIdRef.current!}
+ linksByNodeId={linksByNodeIdRef.current!}
+ nodeByCite={nodeByCiteRef.current!}
/>
- </div>
- )}
- </Box>
+ </Box>
+ {contextMenu.isOpen && (
+ <div ref={contextMenuRef}>
+ <ContextMenu
+ //contextMenuRef={contextMenuRef}
+ scope={scope}
+ target={contextMenuTarget}
+ background={false}
+ coordinates={contextPos}
+ handleLocal={handleLocal}
+ menuClose={contextMenu.onClose.bind(contextMenu)}
+ webSocket={WebSocketRef.current}
+ setPreviewNode={setPreviewNode}
+ setFilter={setFilter}
+ filter={filter}
+ setTagColors={setTagColors}
+ tagColors={tagColors}
+ />
+ </div>
+ )}
+ </Box>
+ </VariablesContext.Provider>
)
}
@@ -719,7 +739,7 @@ export interface GraphProps {
handleLocal: any
mainWindowWidth: number
setMainWindowWidth: any
- variables: { [variable: string]: string }
+ variables: EmacsVariables
graphRef: any
clusterRef: any
coloring: typeof initialColoring
@@ -833,6 +853,22 @@ export const Graph = function (props: GraphProps) {
const filteredNodes = graphData?.nodes
?.filter((nodeArg) => {
const node = nodeArg as OrgRoamNode
+ //dirs
+ if (
+ filter.dirsBlocklist.length &&
+ filter.dirsBlocklist.some((dir) => node?.file?.includes(dir))
+ ) {
+ hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node }
+ return false
+ }
+ if (
+ filter.dirsAllowlist.length > 0 &&
+ !filter.dirsAllowlist.some((dir) => node?.file?.includes(dir))
+ ) {
+ hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node }
+ return false
+ }
+
if (
filter.tagsBlacklist.length &&
filter.tagsBlacklist.some((tag) => node?.tags?.indexOf(tag) > -1)
@@ -1254,9 +1290,7 @@ export const Graph = function (props: GraphProps) {
height: windowHeight,
backgroundColor: getThemeColor(visuals.backgroundColor, theme),
warmupTicks: scope.nodeIds.length === 1 ? 100 : scope.nodeIds.length > 1 ? 20 : 0,
- //onZoom: ({ k, x, y }) => setZoom(k),
onZoom: ({ k, x, y }) => (scaleRef.current = k),
- //nodeLabel: (node) => ,
nodeColor: (node) => {
return getNodeColor(node as OrgRoamNode, theme)
},
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-25 01:47:12 +0000