chore(preview): merge branches

2 files changed, 65 insertions, 65 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 17554b1..ac03907 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -6,43 +6,21 @@ import * as d3int from 'd3-interpolate'
 
 import { ThemeContext } from '../util/themecontext'
 import { usePersistantState } from '../util/persistant-state'
+import { themes } from '../components/themes'
 
 function MyApp({ Component, pageProps }: AppProps) {
-  const initialTheme = {
-    base1: '#1c1f24',
-    base2: '#21272d',
-    base3: '#23272e',
-    base4: '#484854',
-    base5: '#62686E',
-    base6: '#757B80',
-    base7: '#9ca0a4',
-    base8: '#DFDFDF',
-    bg: '#242730',
-    'bg-alt': '#2a2e38',
-    blue: '#51afef',
-    cyan: '#5cEfFF',
-    'dark-blue': '#1f5582',
-    'dark-cyan': '#6A8FBF',
-    fg: '#bbc2cf',
-    'fg-alt': '#5D656B',
-    green: '#7bc275',
-    grey: '#484854',
-    magenta: '#C57BDB',
-    orange: '#e69055',
-    red: '#ff665c',
-    teal: '#4db5bd',
-    violet: '#a991f1',
-    yellow: '#FCCE7B',
-  }
+  type Theme = [string, { [color: string]: string }]
+  const initialTheme: Theme = ['one-vibrant', themes['one-vibrant']]
   const [isInitialized, setIsInitialized] = useState(false)
 
-  const [emacsTheme, setEmacsTheme] = useState(initialTheme)
+  const [emacsTheme, setEmacsTheme] = useState<Theme>(initialTheme)
   const [highlightColor, setHighlightColor] = useState('purple.500')
 
   useEffect(() => {
     if (isInitialized) {
-      localStorage.setItem('theme', JSON.stringify(emacsTheme))
+      localStorage.setItem('colorTheme', JSON.stringify(emacsTheme))
     }
+    console.log(emacsTheme)
   }, [emacsTheme])
 
   useEffect(() => {
@@ -53,7 +31,8 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   useEffect(() => {
     setEmacsTheme(
-      JSON.parse(localStorage.getItem('theme') ?? JSON.stringify(initialTheme)) ?? initialTheme,
+      JSON.parse(localStorage.getItem('colorTheme') ?? JSON.stringify(initialTheme)) ??
+        initialTheme,
     )
     setHighlightColor(
       JSON.parse(localStorage.getItem('highlightColor') ?? JSON.stringify(highlightColor)) ??
@@ -80,81 +59,83 @@ function MyApp({ Component, pageProps }: AppProps) {
 function SubApp(props: any) {
   const { children } = props
   const { highlightColor, emacsTheme } = useContext(ThemeContext)
+  type Theme = { [color: string]: string }
+  const themeColors: Theme = emacsTheme[1] as Theme
   // yeah it's annoying, should put this someplace more sensible
   const getBorderColor = () => {
     if (highlightColor === 'purple.500') {
-      return emacsTheme.violet + 'aa'
+      return `${themeColors['violet']}aa`
     }
     if (highlightColor === 'pink.500') {
-      return emacsTheme.magenta + 'aa'
+      return `${themeColors['magenta']}aa`
     }
     if (highlightColor === 'blue.500') {
-      return emacsTheme.blue + 'aa'
+      return `${themeColors['blue']}aa`
     }
     if (highlightColor === 'cyan.500') {
-      return emacsTheme.cyan + 'aa'
+      return `${themeColors['cyan']}aa`
     }
     if (highlightColor === 'green.500') {
-      return emacsTheme.green + 'aa'
+      return `${themeColors['green']}aa`
     }
     if (highlightColor === 'yellow.500') {
-      return emacsTheme.yellow + 'aa'
+      return `${themeColors['yellow']}aa`
     }
     if (highlightColor === 'orange.500') {
-      return emacsTheme.orange + 'aa'
+      return `${themeColors['orange']}aa`
     }
     if (highlightColor === 'red.500') {
-      return emacsTheme.red + 'aa'
+      return `${themeColors['red']}aa`
     }
   }
-  const missingColor = d3int.interpolate(emacsTheme.base1, emacsTheme.base2)(0.2)
+  const missingColor = d3int.interpolate(themeColors['base1'], themeColors['base2'])(0.2)
   const borderColor = getBorderColor()
   const theme = useMemo(() => {
     return {
       colors: {
-        white: emacsTheme.bg,
-        black: emacsTheme.fg,
+        white: themeColors['bg'],
+        black: themeColors['fg'],
         gray: {
-          100: emacsTheme.base1,
+          100: themeColors['base1'],
           200: missingColor,
-          300: emacsTheme.base2,
-          400: emacsTheme.base3,
-          500: emacsTheme.base4,
-          600: emacsTheme.base5,
-          700: emacsTheme.base6,
-          800: emacsTheme.base7,
-          900: emacsTheme.base8,
+          300: themeColors['base2'],
+          400: themeColors['base3'],
+          500: themeColors['base4'],
+          600: themeColors['base5'],
+          700: themeColors['base6'],
+          800: themeColors['base7'],
+          900: themeColors['base8'],
         },
         blue: {
-          500: emacsTheme.blue,
+          500: themeColors['blue'],
         },
         teal: {
-          500: emacsTheme.blue,
+          500: themeColors['blue'],
         },
         yellow: {
-          500: emacsTheme.yellow,
+          500: themeColors['yellow'],
         },
         orange: {
-          500: emacsTheme.orange,
+          500: themeColors['orange'],
         },
         red: {
-          500: emacsTheme.red,
+          500: themeColors['red'],
         },
         green: {
-          500: emacsTheme.green,
+          500: themeColors['green'],
         },
         purple: {
-          500: emacsTheme.violet,
+          500: themeColors['violet'],
         },
         pink: {
-          500: emacsTheme.magenta,
+          500: themeColors['magenta'],
         },
         cyan: {
-          500: emacsTheme.cyan,
+          500: themeColors['cyan'],
         },
         alt: {
-          100: emacsTheme['bg-alt'],
-          900: emacsTheme['fg-alt'],
+          100: themeColors['bg-alt'],
+          900: themeColors['fg-alt'],
         },
       },
       shadows: {
diff --git a/pages/index.tsx b/pages/index.tsx
index 5b07039..8bc42a0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -129,6 +129,7 @@ export function GraphPage() {
   const nodeByCiteRef = useRef<NodeByCite>({})
   const tagsRef = useRef<Tags>([])
   const graphRef = useRef<any>(null)
+  const variablesRef = useRef<{ [variable: string]: string }>({})
 
   const currentGraphDataRef = useRef<GraphData>({ nodes: [], links: [] })
 
@@ -414,8 +415,11 @@ export function GraphPage() {
       switch (message.type) {
         case 'graphdata':
           return updateGraphData(message.data)
+        case 'variables':
+          variablesRef.current = message.data
+          return
         case 'theme':
-          return setEmacsTheme(message.data)
+          return setEmacsTheme(['custom', message.data])
         case 'command':
           switch (message.data.commandName) {
             case 'local':
@@ -553,6 +557,7 @@ export function GraphPage() {
           nodeById={nodeByIdRef.current!}
           linksByNodeId={linksByNodeIdRef.current!}
           webSocket={WebSocketRef.current}
+          variables={variablesRef.current}
           {...{
             physics,
             graphData,
@@ -687,6 +692,7 @@ export interface GraphProps {
   handleLocal: any
   mainWindowWidth: number
   setMainWindowWidth: any
+  variables: { [variable: string]: string }
 }
 
 export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
@@ -713,8 +719,15 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     openContextMenu,
     contextMenu,
     handleLocal,
+    variables,
   } = props
 
+  const { dailyDir, roamDir } = variables
+  // react-force-graph does not track window size
+  // https://github.com/vasturiano/react-force-graph/issues/233
+  // does not work below a certain width
+  const [windowWidth, windowHeight] = useWindowSize()
+
   const [hoverNode, setHoverNode] = useState<NodeObject | null>(null)
 
   const theme = useTheme()
@@ -788,19 +801,19 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
         const node = nodeArg as OrgRoamNode
         if (
           filter.tagsBlacklist.length &&
-          filter.tagsBlacklist.some((tag) => node.tags.indexOf(tag) > -1)
+          filter.tagsBlacklist.some((tag) => node?.tags?.indexOf(tag) > -1)
         ) {
           hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node }
           return false
         }
         if (
           filter.tagsWhitelist.length > 0 &&
-          !filter.tagsWhitelist.some((tag) => node.tags.indexOf(tag) > -1)
+          !filter.tagsWhitelist.some((tag) => node?.tags?.indexOf(tag) > -1)
         ) {
           hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node }
           return false
         }
-        if (filter.filelessCites && node.properties.FILELESS) {
+        if (filter.filelessCites && node?.properties?.FILELESS) {
           hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node }
           return false
         }
@@ -808,6 +821,11 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
           hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node }
           return false
         }
+
+        if (filter.dailies && dailyDir && node.file?.includes(dailyDir)) {
+          hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node }
+          return false
+        }
         return true
       })
       .filter((node) => {
@@ -881,7 +899,8 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
           }
           const links = filteredLinksByNodeIdRef.current[node.id as string] ?? []
           return links.some((link) => {
-            return scope.nodeIds.includes(link.source) || scope.nodeIds.includes(link.target)
+            const [source, target] = normalizeLinkEnds(link)
+            return scope.nodeIds.includes(source) || scope.nodeIds.includes(target)
           })
         }
         return neighbs.includes(node.id as string)
@@ -919,7 +938,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     const scopedLinks = [...oldScopedLinks, ...newScopedLinks]
 
     setScopedGraphData({ nodes: scopedNodes, links: scopedLinks })
-  }, [filter, scope, graphData])
+  }, [filter, scope, JSON.stringify(graphData), filteredGraphData.links, filteredGraphData.nodes])
 
   useEffect(() => {
     ;(async () => {