feat(sdf): add basic support for sdf without a schema

Author: OliverDudgeon

src/features/SDFViewer/ConfigEditor.tsx

@@ -6,12 +6,12 @@ import { Alert, Box, Button, Checkbox, MenuItem, TextField, Typography } from "@
 import { type SDFViewerConfig } from "../../utils/api/sdfViewer";
 import { type JSON_SCHEMA_TYPE, JSON_SCHEMA_TYPES } from "../../utils/app/jsonSchema";
 
-type Field = {
+export type Field = {
   type: JSON_SCHEMA_TYPE;
   description: string;
 };
 
-interface Schema {
+export interface Schema {
   $schema: string;
   $id: string;
   title: string;

src/features/SDFViewer/SDFViewer.tsx

@@ -1,59 +1,25 @@
 import { type PropsWithChildren, useState } from "react";
 
-import { useGetProjectFile } from "@squonk/data-manager-client/project";
-
 import { Button, Typography } from "@mui/material";
 
 import { CenterLoader } from "../../components/CenterLoader";
 import { type SDFViewerConfig } from "../../utils/api/sdfViewer";
 import { ConfigEditor } from "./ConfigEditor";
 import { SDFViewerData } from "./SDFViewerData";
+import { useGetSDFSchema } from "./useGetSDFSchema";
 
 export interface SDFViewerProps {
   project: string;
   path: string;
   file: string;
 }
 
-const getSchemaFileNameFromSDFFileName = (fname: string) => fname.slice(0, -4) + ".schema.json";
-
 export const SDFViewer = ({ project, path, file }: SDFViewerProps) => {
-  const schemaFilename = getSchemaFileNameFromSDFFileName(file);
-  const {
-    data: schema,
-    error,
-    isLoading,
-  } = useGetProjectFile<any>(
-    project,
-    {
-      path,
-      file: schemaFilename,
-    },
-    {
-      query: {
-        retry: 0,
-      },
-    },
-  );
+  const { schema, isLoading } = useGetSDFSchema(project, path, file);
 
   const [isEditingConfig, setIsEditingConfig] = useState(true);
   const [config, setConfig] = useState<SDFViewerConfig | undefined>(undefined);
 
-  if (error) {
-    // handle error
-    // SDF schema might not exist
-    if (error.status === 404) {
-      return (
-        <Header title={file}>
-          <Typography color="error" variant="body1">
-            No schema found for this SDF
-          </Typography>
-        </Header>
-      );
-    }
-    return null;
-  }
-
   if (isLoading) {
     // TODO: add loading page
     return (

src/features/SDFViewer/useGetSDFSchema.ts

@@ -0,0 +1,92 @@
+import { useGetProjectFile } from "@squonk/data-manager-client/project";
+import { createSDFTransformer } from "@squonk/sdf-parser";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { API_ROUTES } from "../../utils/app/routes";
+import { type Field, type Schema } from "./ConfigEditor";
+
+const getSchemaFileNameFromSDFFileName = (fname: string) => fname.slice(0, -4) + ".schema.json";
+
+const getSDFFields = async (project: string, path: string, file: string) => {
+  const response = await fetch(API_ROUTES.projectFile(project, path, file, "/api/dm-api"));
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch SDF file: ${response.statusText}`);
+  }
+
+  const properties = new Set<string>();
+  await response.body
+    ?.pipeThrough(new TextDecoderStream())
+    .pipeThrough(createSDFTransformer())
+    .pipeTo(
+      new WritableStream({
+        write(record) {
+          // Get all field keys from the record and add to Set
+          Object.keys(record.properties).forEach((key) => properties.add(key));
+        },
+      }),
+    );
+
+  const fields = [...properties].reduce<Record<string, Field>>((acc, property) => {
+    acc[property] = {
+      type: "string",
+      description: "",
+    };
+    return acc;
+  }, {});
+
+  return fields;
+};
+
+const stubSchema = (fields: Record<string, Field> | undefined): Schema | undefined => {
+  if (fields) {
+    return {
+      $schema: "",
+      $id: "",
+      title: "",
+      description: "",
+      version: 0,
+      type: "object",
+      fields,
+      required: [],
+      labels: {},
+    };
+  }
+};
+
+const useGetSDFSchema = (project: string, path: string, file: string) => {
+  const schemaFilename = getSchemaFileNameFromSDFFileName(file);
+  const {
+    data: schemaFile,
+    error,
+    isLoading,
+  } = useGetProjectFile<any>(
+    project,
+    { path, file: schemaFilename },
+    {
+      query: { retry: 0, enabled: true, refetchOnWindowFocus: false },
+    },
+  );
+
+  const {
+    data: fields,
+    isLoading: isSdfLoading,
+    error: sdfError,
+  } = useQuery({
+    queryKey: ["sdf-fields", project, path, file],
+    queryFn: () => getSDFFields(project, path, file),
+    enabled: error?.status === 404,
+    refetchOnWindowFocus: false,
+  });
+
+  const fallbackSchema = stubSchema(fields);
+
+  return {
+    schema: schemaFile ?? fallbackSchema,
+    isLoading: isLoading || isSdfLoading,
+    error: error ?? sdfError,
+  };
+};
+
+export { useGetSDFSchema };

src/pages/viewer/sdf.tsx

@@ -16,7 +16,7 @@ const SDF = () => {
   const { project, path, file } = query;
 
   if (typeof project !== "string" || typeof path !== "string" || typeof file !== "string") {
-    return <Error statusCode={404} title="File not found" />;
+    return <Error statusCode={404} title="URL is Malformed" />;
   }
 
   return (