1 files changed, 32 insertions, 9 deletions

diff --git a/pages/index.tsx b/pages/index.tsx
index 02be883..c829fef 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -70,6 +70,14 @@ export default function Home() {
   return <GraphPage />
 }
 
+function normalizeLinkEnds(link: OrgRoamLink | LinkObject): [string, string] {
+  // we need to cover both because force-graph modifies the original data
+  // but if we supply the original data on each render, the graph will re-render sporadically
+  const sourceId = typeof link.source === 'object' ? (link.source.id! as string) : (link.source as string)
+  const targetId = typeof link.target === 'object' ? (link.target.id! as string) : (link.target as string)
+  return [sourceId, targetId]
+}
+
 export function GraphPage() {
   const [physics, setPhysics] = usePersistantState('physics', initialPhysics)
   const [filter, setFilter] = usePersistantState('filter', initialFilter)
@@ -429,6 +437,10 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
           hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node }
           return false
         }
+        if (filter.fileless_cites && node.properties.FILELESS) {
+          hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node }
+          return false
+      }
         return true
       })
       .filter((nodeArg) => {
@@ -456,9 +468,8 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
 
     const filteredNodeIds = filteredNodes.map((node) => node.id as string)
     const filteredLinks = graphData.links.filter((link) => {
-      if (filter.tagsBlacklist.length || filter.tagsWhitelist.length) {
-        const sourceId = typeof link.source === 'object' ? link.source.id! : (link.source as string)
-        const targetId = typeof link.target === 'object' ? link.target.id! : (link.target as string)
+      const [sourceId, targetId] = normalizeLinkEnds(link)
+      if (filter.tagsBlacklist.length || filter.tagsWhitelist.length){
         return (
           filteredNodeIds.includes(sourceId as string) &&
           filteredNodeIds.includes(targetId as string)
@@ -486,8 +497,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     const scopedLinks = filteredGraphData.filteredLinks.filter((link) => {
       // we need to cover both because force-graph modifies the original data
       // but if we supply the original data on each render, the graph will re-render sporadically
-      const sourceId = typeof link.source === 'object' ? link.source.id! : (link.source as string)
-      const targetId = typeof link.target === 'object' ? link.target.id! : (link.target as string)
+      const [sourceId, targetId] = normalizeLinkEnds(link)
       return (
         scopedNodeIds.includes(sourceId as string) && scopedNodeIds.includes(targetId as string)
       )
@@ -674,9 +684,12 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       const tagColor = tagColors[node.tags.filter((tag) => tagColors[tag])[0]]
       return getThemeColor(tagColor)
     }
-    if (visuals.citeNodeColor && node.properties.ROAM_REFS) {
+    if (visuals.citeNodeColor && node.properties.ROAM_REFS && node.properties.FILELESS) {
       return getThemeColor(visuals.citeNodeColor)
     }
+    if (visuals.refNodeColor && node.properties.ROAM_REFS) {
+      return getThemeColor(visuals.refNodeColor)
+    }
     if (!needsHighlighting) {
       return getThemeColor(getNodeColorById(node.id as string))
     }
@@ -806,6 +819,13 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       const linkWasHighlighted = isLinkRelatedToNode(link, lastHoverNode.current)
       const needsHighlighting = linkIsHighlighted || linkWasHighlighted
       const roamLink = link as OrgRoamLink
+      if (visuals.refLinkColor && roamLink.type === 'ref') {
+        return needsHighlighting && (visuals.refLinkHighlightColor || visuals.linkHighlight)
+          ? highlightColors[visuals.refLinkColor][
+              visuals.refLinkHighlightColor || visuals.linkHighlight
+            ](opacity)
+          : getThemeColor(visuals.refLinkColor)
+      }
       if (visuals.citeLinkColor && roamLink.type === 'cite') {
         return needsHighlighting && (visuals.citeLinkHighlightColor || visuals.linkHighlight)
           ? highlightColors[visuals.citeLinkColor][
@@ -897,10 +917,13 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
           {...graphCommonProps}
           linkLineDash={(link) => {
             const linkArg = link as OrgRoamLink
-            if (!visuals.citeDashes || linkArg.type !== 'cite') {
-              return null
+            if (visuals.citeDashes && linkArg.type === 'cite') {
+              return [visuals.citeDashLength, visuals.citeGapLength]
+            }
+            if (visuals.refDashes && linkArg.type == 'ref') {
+              return [visuals.refDashLength, visuals.refGapLength]
             }
-            return [visuals.citeDashLength, visuals.citeGapLength]
+            return null
           }}
         />
       )}