fix: graph view error.

Author: PttCodingMan

backend/app/routers/pages.py

@@ -209,19 +209,40 @@ async def page_graph(user=Depends(get_current_user)):
     readable = await list_readable_page_ids(db, user)
     id_clause, id_params = _build_id_clause(readable)
     pages = await db.execute_fetchall(
-        f"SELECT id, slug, title FROM pages WHERE deleted_at IS NULL AND {id_clause}",
+        f"SELECT id, slug, title, parent_id FROM pages WHERE deleted_at IS NULL AND {id_clause}",
         id_params,
     )
-    nodes = [{"id": p["id"], "slug": p["slug"], "title": p["title"]} for p in pages]
-
-    # Only show links between pages the user can see.
     visible_ids = {p["id"] for p in pages}
+
+    # A page is a "star" if any visible page lists it as parent. Stars get
+    # special rendering on the frontend (galaxy mode).
+    star_ids = {
+        p["parent_id"] for p in pages if p["parent_id"] is not None and p["parent_id"] in visible_ids
+    }
+    nodes = [
+        {
+            "id": p["id"],
+            "slug": p["slug"],
+            "title": p["title"],
+            "parent_id": p["parent_id"] if p["parent_id"] in visible_ids else None,
+            "is_star": p["id"] in star_ids,
+        }
+        for p in pages
+    ]
+
     backlinks = await db.execute_fetchall("SELECT source_page_id, target_page_id FROM backlinks")
     links = [
-        {"source": b["source_page_id"], "target": b["target_page_id"]}
+        {"source": b["source_page_id"], "target": b["target_page_id"], "type": "wikilink"}
         for b in backlinks
         if b["source_page_id"] in visible_ids and b["target_page_id"] in visible_ids
     ]
+    # Hierarchy edges (parent → child) so the graph reflects nesting, not just
+    # explicit wikilinks. Frontend renders these differently from wikilinks.
+    for p in pages:
+        if p["parent_id"] is not None and p["parent_id"] in visible_ids:
+            links.append(
+                {"source": p["parent_id"], "target": p["id"], "type": "hierarchy"}
+            )
 
     return {"nodes": nodes, "links": links}
 

frontend/src/lib/galaxy.js

@@ -0,0 +1,67 @@
+import * as THREE from 'three'
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'
+
+// Distant starfield rendered as a single THREE.Points cloud. One draw call,
+// no per-frame work; we place it in the scene once and let it sit far enough
+// out that the force-graph nodes never collide with it.
+export function buildStarfield({ count = 4000, radius = 4500 } = {}) {
+  const positions = new Float32Array(count * 3)
+  const colors = new Float32Array(count * 3)
+  for (let i = 0; i < count; i++) {
+    // Uniform sample on a sphere, then push out to a thick shell so the
+    // background reads as a dome instead of a flat plane.
+    const u = Math.random()
+    const v = Math.random()
+    const theta = 2 * Math.PI * u
+    const phi = Math.acos(2 * v - 1)
+    const r = radius * (0.7 + Math.random() * 0.3)
+    positions[i * 3 + 0] = r * Math.sin(phi) * Math.cos(theta)
+    positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta)
+    positions[i * 3 + 2] = r * Math.cos(phi)
+    // Most stars near-white, a few tinted blue/orange — much more believable
+    // than uniform white.
+    const tint = Math.random()
+    if (tint < 0.1) {
+      colors[i * 3 + 0] = 1.0
+      colors[i * 3 + 1] = 0.75
+      colors[i * 3 + 2] = 0.55
+    } else if (tint < 0.2) {
+      colors[i * 3 + 0] = 0.7
+      colors[i * 3 + 1] = 0.85
+      colors[i * 3 + 2] = 1.0
+    } else {
+      const b = 0.85 + Math.random() * 0.15
+      colors[i * 3 + 0] = b
+      colors[i * 3 + 1] = b
+      colors[i * 3 + 2] = b
+    }
+  }
+  const geom = new THREE.BufferGeometry()
+  geom.setAttribute('position', new THREE.BufferAttribute(positions, 3))
+  geom.setAttribute('color', new THREE.BufferAttribute(colors, 3))
+  const mat = new THREE.PointsMaterial({
+    size: 2.2,
+    sizeAttenuation: true,
+    vertexColors: true,
+    transparent: true,
+    opacity: 0.9,
+    depthWrite: false,
+  })
+  const points = new THREE.Points(geom, mat)
+  // Don't let frustum culling drop the field when the camera moves; this
+  // shell is large enough that we always want it drawn.
+  points.frustumCulled = false
+  return points
+}
+
+export function disposeStarfield(points) {
+  if (!points) return
+  if (points.geometry) points.geometry.dispose()
+  if (points.material) points.material.dispose()
+}
+
+export function makeBloomPass(width, height) {
+  // strength, radius, threshold. Threshold > 0 keeps planet surfaces from
+  // bleeding; only stars / glowing edges bloom.
+  return new UnrealBloomPass(new THREE.Vector2(width, height), 1.1, 0.6, 0.55)
+}

frontend/src/lib/planet.js

@@ -178,6 +178,73 @@ function hslToColor(h, s, l) {
   return c
 }
 
+const STAR_FRAGMENT = /* glsl */ `
+${SIMPLEX_GLSL}
+uniform float uTime;
+uniform vec3 uCore;
+uniform vec3 uFlare;
+varying vec3 vObjPos;
+varying vec3 vNormal;
+varying vec3 vViewDir;
+
+void main() {
+  vec3 unit = normalize(vObjPos);
+  // Rolling plasma surface: two noise samples at different scales/speeds.
+  float n1 = snoise(unit * 2.5 + vec3(uTime * 0.6));
+  float n2 = snoise(unit * 5.0 - vec3(uTime * 0.9));
+  float heat = 0.5 + 0.5 * (n1 * 0.6 + n2 * 0.4);
+  vec3 col = mix(uCore, uFlare, smoothstep(0.3, 0.95, heat));
+  // Strong fresnel halo so bloom can latch onto the rim.
+  float rim = pow(1.0 - max(dot(normalize(vNormal), normalize(vViewDir)), 0.0), 2.0);
+  col += uFlare * rim * 1.4;
+  gl_FragColor = vec4(col, 1.0);
+}
+`
+
+// A glowing star — used for pages that have children. Bright, emissive-feeling
+// material that interacts well with UnrealBloomPass. No light/shading: stars
+// emit, they don't receive.
+export function buildStarObject(node) {
+  const params = planetParams(node)
+  const group = new THREE.Group()
+  // Stars read bigger than planets so they anchor the system visually.
+  const baseR = 5.5 * params.radius
+
+  const geometry = new THREE.SphereGeometry(baseR, 48, 32)
+  // Star colour: warm yellow-orange biased by the page's hue, so it still
+  // varies per page but reads as a star, not a random planet.
+  const coreHue = (params.hue * 0.2 + 0.08) % 1.0
+  const flareHue = (coreHue + 0.04) % 1.0
+  const material = new THREE.ShaderMaterial({
+    vertexShader: VERTEX_SHADER,
+    fragmentShader: STAR_FRAGMENT,
+    uniforms: {
+      uTime: { value: 0 },
+      uCore: { value: hslToColor(coreHue, 0.85, 0.7) },
+      uFlare: { value: hslToColor(flareHue, 1.0, 0.85) },
+    },
+  })
+  const sphere = new THREE.Mesh(geometry, material)
+  sphere.onBeforeRender = () => {
+    material.uniforms.uTime.value = performance.now() * 0.001
+  }
+  group.add(sphere)
+
+  // Soft corona — additive sprite-like shell that fakes glow even without bloom,
+  // and gives bloom something extra to latch onto when it's enabled.
+  const coronaGeom = new THREE.SphereGeometry(baseR * 1.6, 32, 24)
+  const coronaMat = new THREE.MeshBasicMaterial({
+    color: hslToColor(flareHue, 1.0, 0.7),
+    transparent: true,
+    opacity: 0.18,
+    blending: THREE.AdditiveBlending,
+    depthWrite: false,
+  })
+  group.add(new THREE.Mesh(coronaGeom, coronaMat))
+
+  return group
+}
+
 // Build a procedural planet mesh. Each node gets its own ShaderMaterial
 // instance (uniforms differ) but three.js dedups the program compile
 // because the shader source is identical across all planets.