@izumisy-tailor/tailor-data-viewer 0.1.0

package/src/component/hooks/use-column-state.ts

@@ -0,0 +1,281 @@
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import type {
+  FieldMetadata,
+  RelationMetadata,
+  ExpandedRelationFields,
+} from "../../types/table-metadata";
+
+export interface ColumnState {
+  selectedFields: string[];
+  toggleField: (fieldName: string) => void;
+  selectAll: () => void;
+  deselectAll: () => void;
+  isSelected: (fieldName: string) => boolean;
+  resetToDefaults: () => void;
+  /** Selected relation field names */
+  selectedRelations: string[];
+  toggleRelation: (fieldName: string) => void;
+  selectAllRelations: () => void;
+  deselectAllRelations: () => void;
+  isRelationSelected: (fieldName: string) => boolean;
+  /** Set fields and relations from external source (e.g., saved view) */
+  setColumns: (fields: string[], relations: string[]) => void;
+  /** Expanded relation fields (manyToOne relations with selected child fields) */
+  expandedRelationFields: ExpandedRelationFields;
+  /** Toggle expansion of a relation (show/hide child field selection) */
+  toggleRelationExpansion: (relationFieldName: string) => void;
+  /** Check if a relation is expanded for field selection */
+  isRelationExpanded: (relationFieldName: string) => boolean;
+  /** Toggle a specific field within an expanded relation */
+  toggleExpandedRelationField: (
+    relationFieldName: string,
+    fieldName: string,
+  ) => void;
+  /** Check if a field is selected within an expanded relation */
+  isExpandedRelationFieldSelected: (
+    relationFieldName: string,
+    fieldName: string,
+  ) => boolean;
+  /** Select all fields in an expanded relation */
+  selectAllExpandedRelationFields: (
+    relationFieldName: string,
+    availableFields: string[],
+  ) => void;
+  /** Deselect all fields in an expanded relation */
+  deselectAllExpandedRelationFields: (relationFieldName: string) => void;
+  /** Set expanded relation fields from external source */
+  setExpandedRelationFields: (fields: ExpandedRelationFields) => void;
+}
+
+/**
+ * Manage column visibility state (fields and relations)
+ */
+export function useColumnState(
+  fields: FieldMetadata[],
+  relations?: RelationMetadata[],
+  defaultFields?: string[],
+  defaultRelations?: string[],
+  defaultExpandedRelationFields?: ExpandedRelationFields,
+): ColumnState {
+  const defaultSelection = useMemo(() => {
+    if (defaultFields && defaultFields.length > 0) return defaultFields;
+    // By default, select all non-nested, non-array fields, excluding id fields
+    return fields
+      .filter(
+        (field) =>
+          field.type !== "nested" &&
+          field.name !== "id" &&
+          !field.name.endsWith("Id"),
+      )
+      .map((field) => field.name);
+  }, [fields, defaultFields]);
+
+  // By default, all relations are selected (unless defaultRelations is explicitly provided)
+  const defaultRelationSelection = useMemo(() => {
+    // If defaultRelations is explicitly provided (even as empty array), use it
+    if (defaultRelations !== undefined) return defaultRelations;
+    return (relations ?? []).map((r) => r.fieldName);
+  }, [relations, defaultRelations]);
+
+  const [selectedFields, setSelectedFields] =
+    useState<string[]>(defaultSelection);
+
+  const [selectedRelations, setSelectedRelations] = useState<string[]>(
+    defaultRelationSelection,
+  );
+
+  // Track initial mount to avoid overwriting defaults on first render
+  const hasMountedRef = useRef(false);
+
+  useEffect(() => {
+    hasMountedRef.current = true;
+  }, []);
+
+  // Reset selected fields when fields change (e.g., when table changes)
+  useEffect(() => {
+    if (!hasMountedRef.current) return;
+    setSelectedFields(defaultSelection);
+  }, [defaultSelection]);
+
+  // Reset selected relations when relations change
+  useEffect(() => {
+    if (!hasMountedRef.current) return;
+    setSelectedRelations(defaultRelationSelection);
+  }, [defaultRelationSelection]);
+
+  const toggleField = useCallback((fieldName: string) => {
+    setSelectedFields((prev) =>
+      prev.includes(fieldName)
+        ? prev.filter((f) => f !== fieldName)
+        : [...prev, fieldName],
+    );
+  }, []);
+
+  const selectAll = useCallback(() => {
+    setSelectedFields(
+      fields
+        .filter((field) => field.type !== "nested")
+        .map((field) => field.name),
+    );
+  }, [fields]);
+
+  const deselectAll = useCallback(() => {
+    setSelectedFields([]);
+  }, []);
+
+  const isSelected = useCallback(
+    (fieldName: string) => selectedFields.includes(fieldName),
+    [selectedFields],
+  );
+
+  const resetToDefaults = useCallback(() => {
+    setSelectedFields(defaultSelection);
+    setSelectedRelations(defaultRelationSelection);
+  }, [defaultSelection, defaultRelationSelection]);
+
+  // Relation selection handlers
+  const toggleRelation = useCallback((fieldName: string) => {
+    setSelectedRelations((prev) =>
+      prev.includes(fieldName)
+        ? prev.filter((f) => f !== fieldName)
+        : [...prev, fieldName],
+    );
+  }, []);
+
+  const selectAllRelations = useCallback(() => {
+    setSelectedRelations((relations ?? []).map((r) => r.fieldName));
+  }, [relations]);
+
+  const deselectAllRelations = useCallback(() => {
+    setSelectedRelations([]);
+  }, []);
+
+  const isRelationSelected = useCallback(
+    (fieldName: string) => selectedRelations.includes(fieldName),
+    [selectedRelations],
+  );
+
+  const setColumns = useCallback((fields: string[], relations: string[]) => {
+    setSelectedFields(fields);
+    setSelectedRelations(relations);
+  }, []);
+
+  // ============== Expanded Relation Fields (for manyToOne inline display) ==============
+
+  // Track which relations are expanded for field selection in the UI
+  const [expandedRelationsUI, setExpandedRelationsUI] = useState<Set<string>>(
+    () => new Set(),
+  );
+
+  // Track selected fields for each expanded relation
+  const [expandedRelationFields, setExpandedRelationFieldsState] =
+    useState<ExpandedRelationFields>(() => defaultExpandedRelationFields ?? {});
+
+  // Reset expanded relation fields when relations change
+  useEffect(() => {
+    if (!hasMountedRef.current) return;
+    setExpandedRelationFieldsState(defaultExpandedRelationFields ?? {});
+    setExpandedRelationsUI(new Set());
+  }, [relations, defaultExpandedRelationFields]);
+
+  const toggleRelationExpansion = useCallback((relationFieldName: string) => {
+    setExpandedRelationsUI((prev) => {
+      const next = new Set(prev);
+      if (next.has(relationFieldName)) {
+        next.delete(relationFieldName);
+      } else {
+        next.add(relationFieldName);
+      }
+      return next;
+    });
+  }, []);
+
+  const isRelationExpanded = useCallback(
+    (relationFieldName: string) => expandedRelationsUI.has(relationFieldName),
+    [expandedRelationsUI],
+  );
+
+  const toggleExpandedRelationField = useCallback(
+    (relationFieldName: string, fieldName: string) => {
+      setExpandedRelationFieldsState((prev) => {
+        const currentFields = prev[relationFieldName] ?? [];
+        const newFields = currentFields.includes(fieldName)
+          ? currentFields.filter((f) => f !== fieldName)
+          : [...currentFields, fieldName];
+
+        // If no fields are selected, remove the relation from expanded fields
+        if (newFields.length === 0) {
+          const { [relationFieldName]: _removed, ...rest } = prev;
+          void _removed;
+          return rest;
+        }
+
+        return {
+          ...prev,
+          [relationFieldName]: newFields,
+        };
+      });
+    },
+    [],
+  );
+
+  const isExpandedRelationFieldSelected = useCallback(
+    (relationFieldName: string, fieldName: string) => {
+      return (
+        expandedRelationFields[relationFieldName]?.includes(fieldName) ?? false
+      );
+    },
+    [expandedRelationFields],
+  );
+
+  const selectAllExpandedRelationFields = useCallback(
+    (relationFieldName: string, availableFields: string[]) => {
+      setExpandedRelationFieldsState((prev) => ({
+        ...prev,
+        [relationFieldName]: availableFields,
+      }));
+    },
+    [],
+  );
+
+  const deselectAllExpandedRelationFields = useCallback(
+    (relationFieldName: string) => {
+      setExpandedRelationFieldsState((prev) => {
+        const { [relationFieldName]: _removed, ...rest } = prev;
+        void _removed;
+        return rest;
+      });
+    },
+    [],
+  );
+
+  const setExpandedRelationFields = useCallback(
+    (fields: ExpandedRelationFields) => {
+      setExpandedRelationFieldsState(fields);
+    },
+    [],
+  );
+
+  return {
+    selectedFields,
+    toggleField,
+    selectAll,
+    deselectAll,
+    isSelected,
+    resetToDefaults,
+    selectedRelations,
+    toggleRelation,
+    selectAllRelations,
+    deselectAllRelations,
+    isRelationSelected,
+    setColumns,
+    expandedRelationFields,
+    toggleRelationExpansion,
+    isRelationExpanded,
+    toggleExpandedRelationField,
+    isExpandedRelationFieldSelected,
+    selectAllExpandedRelationFields,
+    deselectAllExpandedRelationFields,
+    setExpandedRelationFields,
+  };
+}

package/src/component/hooks/use-relation-data.ts

@@ -0,0 +1,387 @@
+import { useState, useCallback, useMemo } from "react";
+import type {
+  TableMetadata,
+  RelationMetadata,
+  TableMetadataMap,
+} from "../../types/table-metadata";
+import {
+  createGraphQLClient,
+  executeQuery,
+} from "../../providers/graphql-client";
+
+/**
+ * Cache entry for relation data
+ */
+interface CacheEntry {
+  data: Record<string, unknown>[] | Record<string, unknown> | null;
+  hasNextPage?: boolean;
+  endCursor?: string | null;
+  loading: boolean;
+  error: Error | null;
+}
+
+/**
+ * Cache key format: `${rowId}-${relationFieldName}`
+ */
+type CacheKey = string;
+
+/**
+ * Cache state type
+ */
+type CacheState = Record<CacheKey, CacheEntry>;
+
+/**
+ * Result of fetching relation data
+ */
+export interface RelationDataResult {
+  data: Record<string, unknown>[] | Record<string, unknown> | null;
+  loading: boolean;
+  error: Error | null;
+  hasNextPage?: boolean;
+  fetchMore?: () => Promise<void>;
+}
+
+/**
+ * Convert camelCase to PascalCase
+ */
+function toPascalCase(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * Build a GraphQL query for fetching a single record (manyToOne)
+ */
+function buildSingleRecordQuery(
+  tableName: string,
+  selectedFields: string[],
+): string {
+  const typeName = toPascalCase(tableName);
+  const fieldsStr = selectedFields.join("\n        ");
+
+  return `
+    query ${typeName}Single($id: ID!) {
+      ${tableName}(id: $id) {
+        ${fieldsStr}
+      }
+    }
+  `.trim();
+}
+
+/**
+ * Build a GraphQL query for fetching a list of records (oneToMany)
+ */
+function buildConnectionQuery(
+  targetTableName: string,
+  targetPluralForm: string,
+  foreignKeyField: string,
+  selectedFields: string[],
+  first = 10,
+  after?: string,
+): string {
+  const typeName = toPascalCase(targetTableName);
+  const fieldsStr = selectedFields.join("\n            ");
+  const afterArg = after ? `, after: "${after}"` : "";
+
+  return `
+    query ${typeName}List($parentId: ID!) {
+      ${targetPluralForm}(query: { ${foreignKeyField}: { eq: $parentId } }, first: ${first}${afterArg}) {
+        edges {
+          node {
+            ${fieldsStr}
+          }
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  `.trim();
+}
+
+/**
+ * Get default fields for a table (excluding nested types and foreign keys)
+ */
+function getDefaultFieldsForTable(table: TableMetadata): string[] {
+  return table.fields
+    .filter(
+      (field) =>
+        field.type !== "nested" &&
+        field.type !== "array" &&
+        (field.name === "id" || !field.name.endsWith("Id")),
+    )
+    .map((field) => field.name);
+}
+
+type GraphQLSingleResponse = Record<string, Record<string, unknown> | null>;
+
+type GraphQLListResponse = Record<
+  string,
+  {
+    edges: { node: Record<string, unknown> }[];
+    pageInfo: {
+      hasNextPage: boolean;
+      endCursor: string | null;
+    };
+  }
+>;
+
+const PAGE_SIZE = 10;
+
+/**
+ * Hook for fetching relation data with state-based caching
+ */
+export function useRelationData(
+  appUri: string,
+  tableMetadataMap: TableMetadataMap,
+) {
+  const client = useMemo(() => createGraphQLClient(appUri), [appUri]);
+  const [cache, setCache] = useState<CacheState>({});
+
+  /**
+   * Get cache key for a relation
+   */
+  const getCacheKey = useCallback(
+    (rowId: string, relationFieldName: string): CacheKey => {
+      return `${rowId}-${relationFieldName}`;
+    },
+    [],
+  );
+
+  /**
+   * Update cache entry
+   */
+  const updateCache = useCallback((cacheKey: CacheKey, entry: CacheEntry) => {
+    setCache((prev) => ({ ...prev, [cacheKey]: entry }));
+  }, []);
+
+  /**
+   * Fetch manyToOne relation data (single record)
+   */
+  const fetchManyToOneData = useCallback(
+    async (
+      targetTableName: string,
+      relatedId: string,
+      cacheKey: CacheKey,
+    ): Promise<void> => {
+      const targetTable = tableMetadataMap[targetTableName];
+      if (!targetTable) {
+        updateCache(cacheKey, {
+          data: null,
+          loading: false,
+          error: new Error(`Table ${targetTableName} not found in metadata`),
+        });
+        return;
+      }
+
+      try {
+        const selectedFields = getDefaultFieldsForTable(targetTable);
+        const query = buildSingleRecordQuery(targetTableName, selectedFields);
+        const result = await executeQuery<GraphQLSingleResponse>(
+          client,
+          query,
+          {
+            id: relatedId,
+          },
+        );
+
+        updateCache(cacheKey, {
+          data: result[targetTableName],
+          loading: false,
+          error: null,
+        });
+      } catch (err) {
+        updateCache(cacheKey, {
+          data: null,
+          loading: false,
+          error: err instanceof Error ? err : new Error("Failed to fetch data"),
+        });
+      }
+    },
+    [client, tableMetadataMap, updateCache],
+  );
+
+  /**
+   * Fetch oneToMany relation data (list of records)
+   */
+  const fetchOneToManyData = useCallback(
+    async (
+      relation: RelationMetadata,
+      parentId: string,
+      cacheKey: CacheKey,
+      existingEntry?: CacheEntry,
+      append = false,
+    ): Promise<void> => {
+      const targetTable = tableMetadataMap[relation.targetTable];
+      if (!targetTable) {
+        updateCache(cacheKey, {
+          data: [],
+          loading: false,
+          error: new Error(
+            `Table ${relation.targetTable} not found in metadata`,
+          ),
+        });
+        return;
+      }
+
+      try {
+        const selectedFields = getDefaultFieldsForTable(targetTable);
+        const afterCursor = append ? existingEntry?.endCursor : undefined;
+
+        const query = buildConnectionQuery(
+          relation.targetTable,
+          targetTable.pluralForm,
+          relation.foreignKeyField,
+          selectedFields,
+          PAGE_SIZE,
+          afterCursor ?? undefined,
+        );
+
+        const result = await executeQuery<GraphQLListResponse>(client, query, {
+          parentId,
+        });
+
+        const responseData = result[targetTable.pluralForm];
+        if (responseData) {
+          const newData = responseData.edges.map((edge) => edge.node);
+          const existingData =
+            append && Array.isArray(existingEntry?.data)
+              ? existingEntry.data
+              : [];
+
+          updateCache(cacheKey, {
+            data: [...existingData, ...newData],
+            loading: false,
+            error: null,
+            hasNextPage: responseData.pageInfo.hasNextPage,
+            endCursor: responseData.pageInfo.endCursor,
+          });
+        } else {
+          updateCache(cacheKey, {
+            data: [],
+            loading: false,
+            error: null,
+            hasNextPage: false,
+            endCursor: null,
+          });
+        }
+      } catch (err) {
+        updateCache(cacheKey, {
+          data: append ? (existingEntry?.data ?? []) : [],
+          loading: false,
+          error: err instanceof Error ? err : new Error("Failed to fetch data"),
+          hasNextPage: existingEntry?.hasNextPage,
+          endCursor: existingEntry?.endCursor,
+        });
+      }
+    },
+    [client, tableMetadataMap, updateCache],
+  );
+
+  /**
+   * Get relation data from cache (does NOT trigger fetch)
+   */
+  const getRelationData = useCallback(
+    (
+      relation: RelationMetadata,
+      rowId: string,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      _rowData: Record<string, unknown>,
+    ): RelationDataResult => {
+      const cacheKey = getCacheKey(rowId, relation.fieldName);
+      const cached = cache[cacheKey];
+
+      if (cached) {
+        return {
+          data: cached.data,
+          loading: cached.loading,
+          error: cached.error,
+          hasNextPage: cached.hasNextPage,
+          fetchMore:
+            relation.relationType === "oneToMany" && cached.hasNextPage
+              ? () =>
+                  fetchOneToManyData(relation, rowId, cacheKey, cached, true)
+              : undefined,
+        };
+      }
+
+      // No cached data yet - return empty state (fetch must be triggered explicitly)
+      return {
+        data: null,
+        loading: false,
+        error: null,
+      };
+    },
+    [cache, getCacheKey, fetchOneToManyData],
+  );
+
+  /**
+   * Explicitly trigger fetch for a relation (called when expanding a cell)
+   */
+  const triggerFetch = useCallback(
+    (
+      relation: RelationMetadata,
+      rowId: string,
+      rowData: Record<string, unknown>,
+    ): void => {
+      const cacheKey = getCacheKey(rowId, relation.fieldName);
+      const cached = cache[cacheKey];
+
+      // Skip if already loaded or loading
+      if (cached && (cached.data !== null || cached.loading)) {
+        return;
+      }
+
+      // Set loading state immediately
+      updateCache(cacheKey, {
+        data: null,
+        loading: true,
+        error: null,
+      });
+
+      // Trigger fetch based on relation type
+      if (relation.relationType === "manyToOne") {
+        const relatedId = rowData[relation.foreignKeyField];
+        if (typeof relatedId === "string" && relatedId) {
+          fetchManyToOneData(relation.targetTable, relatedId, cacheKey);
+        } else {
+          // No related ID - set empty result
+          updateCache(cacheKey, {
+            data: null,
+            loading: false,
+            error: null,
+          });
+        }
+      } else if (relation.relationType === "oneToMany") {
+        fetchOneToManyData(relation, rowId, cacheKey);
+      }
+    },
+    [cache, getCacheKey, updateCache, fetchManyToOneData, fetchOneToManyData],
+  );
+
+  /**
+   * Clear cache for a specific row or all cache
+   */
+  const clearCache = useCallback((rowId?: string) => {
+    if (rowId) {
+      // Clear all entries for this row
+      setCache((prev) => {
+        const next = { ...prev };
+        for (const key of Object.keys(next)) {
+          if (key.startsWith(`${rowId}-`)) {
+            delete next[key];
+          }
+        }
+        return next;
+      });
+    } else {
+      setCache({});
+    }
+  }, []);
+
+  return {
+    getRelationData,
+    triggerFetch,
+    clearCache,
+  };
+}