Merge 1bfad5f0d028862cab06bb259e83eed6d1f9395e into fbc45548f7ee80715ec74d8c249c662a26f7feae

Backlink calculation is quadratic, similar to breadcrumbs before the
fix.

Apply a similar fix here.

Also added alias resolution, so this depends on `file.data.aliases`
from #1681, but that can be commented out easily if needed.

docs/features/graph view.md

@@ -36,6 +36,7 @@ Component.Graph({
     opacityScale: 1, // how quickly do we fade out the labels when zooming out?
     removeTags: [], // what tags to remove from the graph
     showTags: true, // whether to show tags in the graph
+    enableRadial: false, // whether to constrain the graph, similar to Obsidian
   },
   globalGraph: {
     drag: true,
@@ -49,6 +50,7 @@ Component.Graph({
     opacityScale: 1,
     removeTags: [], // what tags to remove from the graph
     showTags: true, // whether to show tags in the graph
+    enableRadial: true, // whether to constrain the graph, similar to Obsidian
   },
 })
 ```

quartz/components/Backlinks.tsx

@@ -1,6 +1,6 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
-import { resolveRelative, simplifySlug } from "../util/path"
+import { FullSlug, resolveRelative, SimpleSlug, simplifySlug } from "../util/path"
 import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
@@ -15,14 +15,44 @@ const defaultOptions: BacklinksOptions = {
 export default ((opts?: Partial<BacklinksOptions>) => {
   const options: BacklinksOptions = { ...defaultOptions, ...opts }
 
+  let backlinks: Map<SimpleSlug, Array<{ slug: FullSlug; title: string }>> | undefined
+
   const Backlinks: QuartzComponent = ({
     fileData,
     allFiles,
     displayClass,
     cfg,
   }: QuartzComponentProps) => {
-    const slug = simplifySlug(fileData.slug!)
+    if (!backlinks) {
-    const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
+      backlinks = new Map()
+
+      const aliasMap = new Map<SimpleSlug, SimpleSlug>()
+      for (const file of allFiles) {
+        for (const alias of file.aliases ?? []) {
+          aliasMap.set(simplifySlug(alias), simplifySlug(file.slug!))
+        }
+      }
+
+      for (const file of allFiles) {
+        const seen = new Set<SimpleSlug>()
+        for (let link of file.links ?? []) {
+          link = aliasMap.get(link) ?? link
+          // avoid aliased duplicates
+          if (seen.has(link)) {
+            continue
+          }
+          seen.add(link)
+          let ref = backlinks.get(link)
+          if (!ref) {
+            backlinks.set(link, (ref = []))
+          }
+          ref.push({ slug: file.slug!, title: file.frontmatter?.title! })
+        }
+      }
+    }
+
+    const backlinkFiles = backlinks.get(simplifySlug(fileData.slug!)) ?? []
+
     if (options.hideWhenEmpty && backlinkFiles.length == 0) {
       return null
     }
@@ -33,8 +63,8 @@ export default ((opts?: Partial<BacklinksOptions>) => {
           {backlinkFiles.length > 0 ? (
             backlinkFiles.map((f) => (
               <li>
-                <a href={resolveRelative(fileData.slug!, f.slug!)} class="internal">
+                <a href={resolveRelative(fileData.slug!, f.slug)} class="internal">
-                  {f.frontmatter?.title}
+                  {f.title}
                 </a>
               </li>
             ))

quartz/components/Graph.tsx

@@ -18,6 +18,7 @@ export interface D3Config {
   removeTags: string[]
   showTags: boolean
   focusOnHover?: boolean
+  enableRadial?: boolean
 }
 
 interface GraphOptions {
@@ -39,6 +40,7 @@ const defaultOptions: GraphOptions = {
     showTags: true,
     removeTags: [],
     focusOnHover: false,
+    enableRadial: false,
   },
   globalGraph: {
     drag: true,
@@ -53,10 +55,11 @@ const defaultOptions: GraphOptions = {
     showTags: true,
     removeTags: [],
     focusOnHover: true,
+    enableRadial: true,
   },
 }
 
-export default ((opts?: GraphOptions) => {
+export default ((opts?: Partial<GraphOptions>) => {
   const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
     const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }

quartz/components/scripts/graph.inline.ts

@@ -8,6 +8,7 @@ import {
   forceCenter,
   forceLink,
   forceCollide,
+  forceRadial,
   zoomIdentity,
   select,
   drag,
@@ -87,6 +88,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
     removeTags,
     showTags,
     focusOnHover,
+    enableRadial,
   } = JSON.parse(graph.dataset["cfg"]!) as D3Config
 
   const data: Map<SimpleSlug, ContentDetails> = new Map(
@@ -161,15 +163,20 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
       })),
   }
 
+  const width = graph.offsetWidth
+  const height = Math.max(graph.offsetHeight, 250)
+
   // we virtualize the simulation and use pixi to actually render it
+  // Calculate the radius of the container circle
+  const radius = Math.min(width, height) / 2 - 40 // 40px padding
   const simulation: Simulation<NodeData, LinkData> = forceSimulation<NodeData>(graphData.nodes)
     .force("charge", forceManyBody().strength(-100 * repelForce))
     .force("center", forceCenter().strength(centerForce))
     .force("link", forceLink(graphData.links).distance(linkDistance))
     .force("collide", forceCollide<NodeData>((n) => nodeRadius(n)).iterations(3))
 
-  const width = graph.offsetWidth
+  if (enableRadial)
-  const height = Math.max(graph.offsetHeight, 250)
+    simulation.force("radial", forceRadial(radius * 0.8, width / 2, height / 2).strength(0.3))
 
   // precompute style prop strings as pixi doesn't support css variables
   const cssVars = [