Merge pull request #11 from sourcemeta-research/feature/registry-health-bundle-rdf-stats-locations

Integrate registry health, bundling, RDF, stats, and locations endpoints

Author: itvi-1234

src/api/one.ts

@@ -4,8 +4,10 @@ import type {
   EvaluationResult,
   HealthReport,
   ProblemDetails,
+  SchemaLocations,
   SchemaMetadata,
   SchemaPositions,
+  SchemaStats,
   SearchResult,
   TraceResult,
 } from "../types/one";
@@ -38,6 +40,19 @@ const request = async <T>(
   return response.json() as Promise<T>;
 };
 
+// GET /self/v1/health has an empty body and only exists to be pinged, so it
+// resolves to a bool rather than parsing a response.
+export const checkRegistryHealth = async (
+  registryUrl: string
+): Promise<boolean> => {
+  try {
+    const response = await fetch(`${normaliseBase(registryUrl)}/self/v1/health`);
+    return response.ok;
+  } catch {
+    return false;
+  }
+};
+
 export const listDirectory = (
   registryUrl: string,
   path = ""
@@ -61,17 +76,21 @@ export const getSchemaMetadata = (
 
 export const getSchemaContent = async (
   registryUrl: string,
-  schemaPath: string
+  schemaPath: string,
+  options?: { bundle?: boolean }
 ): Promise<string> => {
-  const response = await fetch(`${normaliseBase(registryUrl)}${schemaPath}.json`);
+  const query = options?.bundle ? "?bundle=1" : "";
+  const response = await fetch(
+    `${normaliseBase(registryUrl)}${schemaPath}.json${query}`
+  );
   if (!response.ok) {
     throw new Error(`Request failed with status ${response.status}`);
   }
   // Return the server's exact original text rather than re-serializing via
   // JSON.parse/stringify: /schemas/positions is computed against that exact
-  // text, and reformatting (e.g. reflowing inline arrays to multiple lines)
-  // shifts every line number after the first difference, breaking every
-  // trace highlight that follows.
+  // text (for the unbundled case), and reformatting (e.g. reflowing inline
+  // arrays to multiple lines) shifts every line number after the first
+  // difference, breaking every trace highlight that follows.
   return response.text();
 };
 
@@ -110,6 +129,36 @@ export const getSchemaPositions = (
 ): Promise<SchemaPositions> =>
   request(registryUrl, `/self/v1/api/schemas/positions${schemaPath}`);
 
+export const getSchemaStats = (
+  registryUrl: string,
+  schemaPath: string
+): Promise<SchemaStats> =>
+  request(registryUrl, `/self/v1/api/schemas/stats${schemaPath}`);
+
+export const getSchemaLocations = (
+  registryUrl: string,
+  schemaPath: string
+): Promise<SchemaLocations> =>
+  request(registryUrl, `/self/v1/api/schemas/locations${schemaPath}`);
+
+// Unlike evaluate/trace, the request body wraps the instance in an object
+// alongside optional JSON-LD flattening/compaction options.
+export const promoteToRdf = (
+  registryUrl: string,
+  schemaPath: string,
+  instance: unknown,
+  options?: { flatten?: boolean; context?: object }
+): Promise<unknown> =>
+  request(registryUrl, `/self/v1/api/schemas/rdf${schemaPath}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      instance,
+      flatten: options?.flatten,
+      context: options?.context,
+    }),
+  });
+
 export const traceSchema = (
   registryUrl: string,
   schemaPath: string,

src/components/DetailPanel.tsx

@@ -36,12 +36,33 @@ const TabButton = ({
 };
 
 const DetailPanel = () => {
-  const { detailTab, dependencies, dependents, healthReport, detailLoading } =
-    useContext(AppContext);
+  const {
+    detailTab,
+    dependencies,
+    dependents,
+    healthReport,
+    schemaStats,
+    schemaLocations,
+    detailLoading,
+  } = useContext(AppContext);
+
+  const statsRows = Object.entries(schemaStats ?? {}).flatMap(
+    ([vocabulary, keywords]) =>
+      Object.entries(keywords).map(([keyword, count]) => ({
+        vocabulary,
+        keyword,
+        count,
+      }))
+  );
+  statsRows.sort((a, b) => b.count - a.count);
+  const maxCount = Math.max(1, ...statsRows.map((row) => row.count));
+
+  const staticLocations = Object.entries(schemaLocations?.static ?? {});
+  const dynamicLocations = Object.entries(schemaLocations?.dynamic ?? {});
 
   return (
     <div className="flex flex-col">
-      <div className="flex border-b border-[var(--border)]">
+      <div className="flex border-b border-[var(--border)] overflow-x-auto">
         <TabButton
           tab="dependencies"
           label="Dependencies"
@@ -57,6 +78,12 @@ const DetailPanel = () => {
           label="Lint"
           count={healthReport?.errors.length ?? 0}
         />
+        <TabButton tab="stats" label="Stats" count={statsRows.length} />
+        <TabButton
+          tab="locations"
+          label="Locations"
+          count={staticLocations.length + dynamicLocations.length}
+        />
       </div>
 
       <div className="p-2 h-48 min-h-32 max-h-128 resize-y overflow-y-auto">
@@ -153,6 +180,105 @@ const DetailPanel = () => {
             ))}
           </div>
         )}
+
+        {!detailLoading && detailTab === "stats" && (
+          <div className="flex flex-col gap-1.5">
+            {statsRows.length === 0 && (
+              <p className="text-xs text-[var(--text-secondary)] opacity-60">
+                No keyword usage recorded
+              </p>
+            )}
+            {statsRows.map((row, i) => (
+              <div key={i} className="text-xs">
+                <div className="flex items-center justify-between gap-2">
+                  <span className="font-mono text-[var(--text-nav)] truncate">
+                    {row.keyword}
+                  </span>
+                  <span className="text-[var(--text-secondary)] shrink-0">
+                    {row.count}
+                  </span>
+                </div>
+                <div className="h-1 mt-0.5 rounded-full bg-[var(--bg-inset)] overflow-hidden">
+                  <div
+                    className="h-full bg-[var(--info)]"
+                    style={{ width: `${(row.count / maxCount) * 100}%` }}
+                  />
+                </div>
+                <div
+                  className="text-[10px] text-[var(--text-secondary)] opacity-60 truncate mt-0.5"
+                  title={row.vocabulary}
+                >
+                  {row.vocabulary}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {!detailLoading && detailTab === "locations" && (
+          <div className="flex flex-col gap-3">
+            {staticLocations.length === 0 && dynamicLocations.length === 0 && (
+              <p className="text-xs text-[var(--text-secondary)] opacity-60">
+                No locations found
+              </p>
+            )}
+            {staticLocations.length > 0 && (
+              <div>
+                <div className="text-xs text-[var(--text-secondary)] opacity-70 mb-1">
+                  Static ({staticLocations.length})
+                </div>
+                <div className="flex flex-col gap-1">
+                  {staticLocations.map(([uri, entry]) => (
+                    <div
+                      key={uri}
+                      className="text-xs border border-[var(--border)] rounded-[var(--radius-sm)] px-2 py-1 bg-[var(--bg-inset)]/50"
+                      title={uri}
+                    >
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="font-mono text-[var(--text-nav)] truncate">
+                          {entry.pointer || "/"}
+                        </span>
+                        <span className="text-[var(--text-secondary)] shrink-0">
+                          {entry.type}
+                        </span>
+                      </div>
+                      {entry.orphan && (
+                        <div className="text-[10px] text-[var(--warning)] mt-0.5">
+                          orphan (never referenced)
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+            {dynamicLocations.length > 0 && (
+              <div>
+                <div className="text-xs text-[var(--text-secondary)] opacity-70 mb-1">
+                  Dynamic ({dynamicLocations.length})
+                </div>
+                <div className="flex flex-col gap-1">
+                  {dynamicLocations.map(([uri, entry]) => (
+                    <div
+                      key={uri}
+                      className="text-xs border border-[var(--border)] rounded-[var(--radius-sm)] px-2 py-1 bg-[var(--bg-inset)]/50"
+                      title={uri}
+                    >
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="font-mono text-[var(--text-nav)] truncate">
+                          {entry.pointer || "/"}
+                        </span>
+                        <span className="text-[var(--text-secondary)] shrink-0">
+                          {entry.type}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );

src/components/InstanceEditor.tsx

@@ -1,13 +1,15 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import Editor from "@monaco-editor/react";
 import { AppContext } from "../contexts/AppContext";
 import MetadataTable from "./MetadataTable";
 import DetailPanel from "./DetailPanel";
 import { defineMonacoTheme, ONE_UI_EDITOR_FONT_OPTIONS, ONE_UI_MONACO_THEME } from "../utils/monacoTheme";
 import IdleState from "./IdleState";
+import { getSchemaContent } from "../api/one";
 
 const InstanceEditor = () => {
   const {
+    registryUrl,
     selectedSchemaPath,
     schemaMetadata,
     metadataLoading,
@@ -21,9 +23,47 @@ const InstanceEditor = () => {
     setInstanceText,
     runEvaluate,
     runTrace,
+    runRdf,
     resultLoading,
   } = useContext(AppContext);
 
+  // Bundled view is fetched separately from the plain schemaContent used
+  // elsewhere (e.g. the Trace Debugger's highlighting, which relies on
+  // /positions being computed against the unbundled text) so toggling it
+  // here can't desync anything else that reads schemaContent.
+  const [bundled, setBundled] = useState(false);
+  const [bundledContent, setBundledContent] = useState<string | null>(null);
+  const [bundledLoading, setBundledLoading] = useState(false);
+  const [bundledError, setBundledError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setBundled(false);
+    setBundledContent(null);
+    setBundledError(null);
+  }, [selectedSchemaPath]);
+
+  useEffect(() => {
+    if (!bundled || !selectedSchemaPath) return;
+    let cancelled = false;
+    setBundledLoading(true);
+    setBundledError(null);
+    getSchemaContent(registryUrl, selectedSchemaPath, { bundle: true })
+      .then((content) => {
+        if (!cancelled) setBundledContent(content);
+      })
+      .catch((error: unknown) => {
+        if (!cancelled) {
+          setBundledError(error instanceof Error ? error.message : String(error));
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setBundledLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [bundled, registryUrl, selectedSchemaPath]);
+
   if (!selectedSchemaPath) {
     return <IdleState />;
   }
@@ -66,12 +106,19 @@ const InstanceEditor = () => {
           >
             Trace
           </button>
+          <button
+            onClick={runRdf}
+            disabled={resultLoading}
+            className="h-8 px-3 text-sm rounded-[var(--radius-sm)] border border-[var(--info)]/50 bg-[var(--info)]/12 text-[var(--info)] hover:bg-[var(--info)]/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            RDF
+          </button>
         </div>
       </div>
 
       <MetadataTable />
 
-      <div className="flex border-b border-[var(--border)]">
+      <div className="flex items-center border-b border-[var(--border)]">
         <button
           onClick={() => setActiveTab("schema")}
           className={`px-3 py-1.5 text-xs border-r border-[var(--border)] ${
@@ -92,10 +139,30 @@ const InstanceEditor = () => {
         >
           Instance
         </button>
+        {activeTab === "schema" && (
+          <label
+            title="Show the schema with $ref keywords inlined via JSON Schema Bundling"
+            className="ml-auto mr-2 flex items-center gap-1.5 text-xs text-[var(--text-secondary)] cursor-pointer select-none"
+          >
+            <input
+              type="checkbox"
+              checked={bundled}
+              onChange={(e) => setBundled(e.target.checked)}
+              className="accent-[var(--accent)]"
+            />
+            Bundled
+          </label>
+        )}
       </div>
 
       <div className="h-72 shrink-0 border-b border-[var(--border)]">
-        {activeTab === "schema" && schemaContentLoading ? (
+        {activeTab === "schema" && bundled && bundledLoading ? (
+          <p className="text-sm text-[var(--text-secondary)] p-3">
+            Bundling schema…
+          </p>
+        ) : activeTab === "schema" && bundled && bundledError ? (
+          <p className="text-sm text-[var(--danger)] p-3">{bundledError}</p>
+        ) : activeTab === "schema" && schemaContentLoading ? (
           <p className="text-sm text-[var(--text-secondary)] p-3">
             Loading schema…
           </p>
@@ -105,11 +172,17 @@ const InstanceEditor = () => {
           </p>
         ) : (
           <Editor
-            key={activeTab}
+            key={activeTab === "schema" && bundled ? "schema-bundled" : activeTab}
             language="json"
             theme={ONE_UI_MONACO_THEME}
             beforeMount={defineMonacoTheme}
-            value={activeTab === "schema" ? schemaContent ?? "" : instanceText}
+            value={
+              activeTab === "schema"
+                ? bundled
+                  ? bundledContent ?? ""
+                  : schemaContent ?? ""
+                : instanceText
+            }
             onChange={
               activeTab === "instance"
                 ? (value) => setInstanceText(value ?? "")