@izumisy-tailor/tailor-data-viewer 0.1.20 → 0.1.22

package/src/component/single-record-tab-content.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { RefreshCw, Loader2, ChevronDown, ExternalLink } from "lucide-react";
+import { Loader2, ChevronDown, ExternalLink, RefreshCw } from "lucide-react";
 import { Alert, AlertDescription } from "./ui/alert";
 import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
@@ -18,7 +18,8 @@ import type {
 import { createGraphQLClient } from "../graphql/graphql-client";
 import { formatFieldValue } from "../graphql/query-builder";
 import { ColumnSelector } from "./column-selector";
-import { useColumnState } from "./hooks/use-column-state";
+import { DataViewerProvider, useDataViewer } from "./contexts";
+import { ToolbarProvider } from "./contexts";
 import {
   useSingleRecordData,
   getDisplayFields,
@@ -30,8 +31,8 @@ import { createGraphQLFetcher } from "../graphql/graphql-fetcher";
 interface SingleRecordTabContentProps {
   /** Target table metadata */
   tableMetadata: TableMetadata;
-  /** All table metadata for relation lookup */
-  tableMetadataMap: TableMetadataMap;
+  /** All table metadata (generated from TailorDB schema) */
+  metadata: TableMetadataMap;
   /** App URI for GraphQL requests */
   appUri: string;
   /** Record ID to fetch */
@@ -57,13 +58,61 @@ interface SingleRecordTabContentProps {
  */
 export function SingleRecordTabContent({
   tableMetadata,
-  tableMetadataMap,
+  metadata,
   appUri,
   recordId,
   onOpenAsSheet,
   onOpenSingleRecordAsSheet,
   fetcher: customFetcher,
 }: SingleRecordTabContentProps) {
+  return (
+    <DataViewerProvider
+      appUri={appUri}
+      tableName={tableMetadata.name}
+      metadata={metadata}
+    >
+      <SingleRecordTabContentInner
+        tableMetadata={tableMetadata}
+        metadata={metadata}
+        appUri={appUri}
+        recordId={recordId}
+        onOpenAsSheet={onOpenAsSheet}
+        onOpenSingleRecordAsSheet={onOpenSingleRecordAsSheet}
+        customFetcher={customFetcher}
+      />
+    </DataViewerProvider>
+  );
+}
+
+interface SingleRecordTabContentInnerProps {
+  tableMetadata: TableMetadata;
+  metadata: TableMetadataMap;
+  appUri: string;
+  recordId: string;
+  onOpenAsSheet?: (
+    targetTableName: string,
+    filterField: string,
+    filterValue: string,
+  ) => void;
+  onOpenSingleRecordAsSheet?: (
+    targetTableName: string,
+    recordId: string,
+  ) => void;
+  customFetcher?: SingleRecordDataFetcher;
+}
+
+function SingleRecordTabContentInner({
+  tableMetadata,
+  metadata,
+  appUri,
+  recordId,
+  onOpenAsSheet,
+  onOpenSingleRecordAsSheet,
+  customFetcher,
+}: SingleRecordTabContentInnerProps) {
+  // Get column state from context
+  const { selectedFields, selectedRelations } = useDataViewer();
+
   // Create default fetcher from GraphQL client if not provided
   const defaultFetcher = useMemo(() => {
     const client = createGraphQLClient(appUri);
@@ -72,12 +121,11 @@ export function SingleRecordTabContent({
 
   const fetcher = customFetcher ?? defaultFetcher;
 
-  // Column state for field selection
+  // All display fields for this table
   const allDisplayFields = useMemo(
     () => getDisplayFields(tableMetadata),
     [tableMetadata],
   );
-  const columnState = useColumnState(allDisplayFields, tableMetadata.relations);
 
   // Use the custom hook for data fetching
   const {
@@ -89,7 +137,7 @@ export function SingleRecordTabContent({
     refetch,
   } = useSingleRecordData({
     tableMetadata,
-    tableMetadataMap,
+    tableMetadataMap: metadata,
     recordId,
     fetcher,
   });
@@ -122,10 +170,10 @@ export function SingleRecordTabContent({
   }
 
   const displayFields = allDisplayFields.filter((f) =>
-    columnState.selectedFields.includes(f.name),
+    selectedFields.includes(f.name),
   );
   const relations = (tableMetadata.relations ?? []).filter((r) =>
-    columnState.selectedRelations.includes(r.fieldName),
+    selectedRelations.includes(r.fieldName),
   );
 
   return (
@@ -145,16 +193,9 @@ export function SingleRecordTabContent({
             ID: {recordId.substring(0, 8)}...
           </Badge>
 
-          <ColumnSelector
-            fields={allDisplayFields}
-            selectedFields={columnState.selectedFields}
-            onToggle={columnState.toggleField}
-            onSelectAll={columnState.selectAll}
-            onDeselectAll={columnState.deselectAll}
-            relations={tableMetadata.relations}
-            selectedRelations={columnState.selectedRelations}
-            onToggleRelation={columnState.toggleRelation}
-          />
+          <ToolbarProvider>
+            <ColumnSelector />
+          </ToolbarProvider>
 
           <div className="flex-1" />
           <Button
@@ -192,7 +233,7 @@ export function SingleRecordTabContent({
       {relations.length > 0 && (
         <div className="space-y-6">
           {relations.map((relation) => {
-            const targetTable = tableMetadataMap[relation.targetTable];
+            const targetTable = metadata[relation.targetTable];
             const relationData = relationDataMap[relation.fieldName];
             const displayFieldsForRelation = targetTable
               ? relation.relationType === "manyToOne"

package/src/component/view-save-load.tsx

@@ -11,29 +11,25 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "./ui/dialog";
-import type { ExpandedRelationFields } from "../generator/metadata-generator";
 import { useSavedViews, type SaveViewInput } from "./saved-view-context";
-import type { SearchFilters } from "./types";
-
-interface ViewSaveProps {
-  tableName: string;
-  filters: SearchFilters;
-  selectedFields: string[];
-  selectedRelations: string[];
-  expandedRelationFields: ExpandedRelationFields;
-}
+import { useDataViewer } from "./contexts";
 
 /**
  * View save control
  * Allows saving views (filters + column selections)
+ * Must be used within DataViewer.Root context
  */
-export function ViewSave({
-  tableName,
-  filters,
-  selectedFields,
-  selectedRelations,
-  expandedRelationFields,
-}: ViewSaveProps) {
+export function ViewSave() {
+  const {
+    tableMetadata,
+    filters,
+    selectedFields,
+    selectedRelations,
+    expandedRelationFields,
+  } = useDataViewer();
+
+  const tableName = tableMetadata?.name ?? "";
+
   const [saveDialogOpen, setSaveDialogOpen] = useState(false);
   const [viewName, setViewName] = useState("");
 

package/src/generator/metadata-generator.ts

@@ -17,56 +17,84 @@ export type FieldType =
  * Metadata for a single field
  */
 export interface FieldMetadata {
-  name: string;
-  type: FieldType;
-  required: boolean;
-  enumValues?: readonly string[];
-  arrayItemType?: FieldType;
-  description?: string;
+  readonly name: string;
+  readonly type: FieldType;
+  readonly required: boolean;
+  readonly enumValues?: readonly string[];
+  readonly arrayItemType?: FieldType;
+  readonly description?: string;
   /** manyToOne relation info (if this field is a foreign key) */
-  relation?: {
+  readonly relation?: {
     /** GraphQL field name for the related object (e.g., "task") */
-    fieldName: string;
+    readonly fieldName: string;
     /** Target table name in camelCase (e.g., "task") */
-    targetTable: string;
+    readonly targetTable: string;
   };
 }
 
 /**
- * Metadata for a relation
+ * Base properties shared by all relation types
  */
-export interface RelationMetadata {
-  /** GraphQL field name (e.g., "task" for manyToOne, "taskAssignments" for oneToMany) */
-  fieldName: string;
+interface RelationMetadataBase {
+  /** GraphQL field name (e.g., "task" for manyToOne/oneToOne, "taskAssignments" for oneToMany) */
+  readonly fieldName: string;
   /** Target table name in camelCase (e.g., "task", "taskAssignment") */
-  targetTable: string;
-  /** Relation type */
-  relationType: "manyToOne" | "oneToMany";
-  /** For manyToOne: the FK field name (e.g., "taskId"). For oneToMany: the FK field on the child table */
-  foreignKeyField: string;
-  /** For manyToOne: the backward field name on the target type (used to generate oneToMany relation) */
-  backwardFieldName?: string;
-  /** True if this is a oneToOne relation (no inverse oneToMany should be generated) */
-  isOneToOne?: boolean;
+  readonly targetTable: string;
+  /** The FK field name (e.g., "taskId") */
+  readonly foreignKeyField: string;
+}
+
+/**
+ * ManyToOne relation: this table has a FK pointing to another table
+ * Generates an inverse oneToMany relation on the target table
+ */
+export interface ManyToOneRelation extends RelationMetadataBase {
+  readonly relationType: "manyToOne";
+  /** The backward field name on the target type (used to generate oneToMany relation) */
+  readonly backwardFieldName?: string;
+}
+
+/**
+ * OneToOne relation: this table has a FK pointing to another table (1:1)
+ * Does NOT generate an inverse oneToMany relation
+ */
+export interface OneToOneRelation extends RelationMetadataBase {
+  readonly relationType: "oneToOne";
+}
+
+/**
+ * OneToMany relation: another table has a FK pointing to this table
+ * Generated automatically from manyToOne relations
+ */
+export interface OneToManyRelation extends RelationMetadataBase {
+  readonly relationType: "oneToMany";
 }
 
+/**
+ * Metadata for a relation (discriminated union)
+ */
+export type RelationMetadata =
+  | ManyToOneRelation
+  | OneToOneRelation
+  | OneToManyRelation;
+
 /**
  * Metadata for a single table
  */
 export interface TableMetadata {
-  name: string;
-  pluralForm: string;
-  description?: string;
-  readAllowedRoles: string[];
-  fields: FieldMetadata[];
-  /** Relations (manyToOne and oneToMany) */
-  relations?: RelationMetadata[];
+  readonly name: string;
+  readonly pluralForm: string;
+  readonly description?: string;
+  readonly readAllowedRoles: readonly string[];
+  readonly fields: readonly FieldMetadata[];
+  /** Relations (manyToOne, oneToOne, and oneToMany) */
+  readonly relations?: readonly RelationMetadata[];
 }
 
 /**
  * Map of all tables
  */
-export type TableMetadataMap = Record<string, TableMetadata>;
+export type TableMetadataMap = { readonly [key: string]: TableMetadata };
 
 /**
  * Expanded relation fields configuration
@@ -304,25 +332,6 @@ export function dataViewerMetadataGenerator(
           config.array,
         );
 
-        const fieldMetadata: FieldMetadata = {
-          name: fieldName,
-          type: fieldType,
-          required: config.required ?? false,
-          description: config.description,
-        };
-
-        // Add enum values if present
-        if (config.allowedValues && config.allowedValues.length > 0) {
-          fieldMetadata.enumValues = config.allowedValues.map((v) =>
-            typeof v === "string" ? v : v.value,
-          );
-        }
-
-        // Add array item type if it's an array field
-        if (arrayItemType) {
-          fieldMetadata.arrayItemType = arrayItemType;
-        }
-
         // Extract manyToOne relation info from rawRelation
         // Include: manyToOne, n-1, oneToOne, 1-1 (all are treated as manyToOne for data view purposes)
         const rawRelation = config.rawRelation;
@@ -338,28 +347,56 @@ export function dataViewerMetadataGenerator(
         const isOneToOne =
           rawRelation?.type === "oneToOne" || rawRelation?.type === "1-1";
 
+        // Build relation info for field if applicable
+        let fieldRelation: FieldMetadata["relation"] | undefined;
         if (isManyToOneRelation && rawRelation.toward) {
           const targetTableName = toCamelCase(rawRelation.toward.type);
           const relationFieldName =
             rawRelation.toward.as ?? toCamelCase(rawRelation.toward.type);
 
-          // Add relation info to the field
-          fieldMetadata.relation = {
+          fieldRelation = {
             fieldName: relationFieldName,
             targetTable: targetTableName,
           };
 
-          // Add to relations array (include backward field name for oneToMany generation)
-          relations.push({
-            fieldName: relationFieldName,
-            targetTable: targetTableName,
-            relationType: "manyToOne",
-            foreignKeyField: fieldName,
-            backwardFieldName: rawRelation.backward,
-            isOneToOne,
-          });
+          // Add to relations array
+          if (isOneToOne) {
+            relations.push({
+              fieldName: relationFieldName,
+              targetTable: targetTableName,
+              relationType: "oneToOne",
+              foreignKeyField: fieldName,
+            });
+          } else {
+            relations.push({
+              fieldName: relationFieldName,
+              targetTable: targetTableName,
+              relationType: "manyToOne",
+              foreignKeyField: fieldName,
+              backwardFieldName: rawRelation.backward,
+            });
+          }
         }
 
+        // Build enum values if present
+        const enumValues =
+          config.allowedValues && config.allowedValues.length > 0
+            ? config.allowedValues.map((v) =>
+                typeof v === "string" ? v : v.value,
+              )
+            : undefined;
+
+        // Create field metadata with all properties at once
+        const fieldMetadata: FieldMetadata = {
+          name: fieldName,
+          type: fieldType,
+          required: config.required ?? false,
+          ...(config.description && { description: config.description }),
+          ...(enumValues && { enumValues }),
+          ...(arrayItemType && { arrayItemType }),
+          ...(fieldRelation && { relation: fieldRelation }),
+        };
+
         fields.push(fieldMetadata);
       }
 
@@ -406,13 +443,9 @@ export function dataViewerMetadataGenerator(
       // Second pass: Add oneToMany relations by inverting manyToOne relations
       for (const table of allTables) {
         for (const relation of table.relations) {
+          // Only manyToOne relations generate inverse oneToMany
+          // oneToOne relations don't have a oneToMany inverse
           if (relation.relationType === "manyToOne") {
-            // Skip oneToOne relations - they don't have a oneToMany inverse
-            // (GraphQL generates a single object field, not a connection)
-            if (relation.isOneToOne) {
-              continue;
-            }
-
             // Find the target table and add the inverse oneToMany relation
             const targetTable = tableByOriginalName.get(
               // Convert camelCase back to PascalCase for lookup
@@ -442,7 +475,7 @@ export function dataViewerMetadataGenerator(
       }
 
       // Build the metadata map (excluding originalName and backwardFieldName from output)
-      const metadataMap: TableMetadataMap = {};
+      const metadataMap: Record<string, TableMetadata> = {};
       for (const table of allTables) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { originalName, ...tableWithoutOriginalName } = table;