@weirdfingers/boards 0.5.2 → 0.6.0

package/src/graphql/operations.ts

@@ -51,6 +51,51 @@ export const GENERATION_FRAGMENT = gql`
   }
 `;
 
+// Lineage fragments
+export const ARTIFACT_LINEAGE_FRAGMENT = gql`
+  fragment ArtifactLineageFragment on ArtifactLineage {
+    generationId
+    role
+    artifactType
+  }
+`;
+
+export const ANCESTRY_NODE_FRAGMENT = gql`
+  ${GENERATION_FRAGMENT}
+  fragment AncestryNodeFragment on AncestryNode {
+    depth
+    role
+    generation {
+      ...GenerationFragment
+    }
+    parents {
+      depth
+      role
+      generation {
+        ...GenerationFragment
+      }
+    }
+  }
+`;
+
+export const DESCENDANT_NODE_FRAGMENT = gql`
+  ${GENERATION_FRAGMENT}
+  fragment DescendantNodeFragment on DescendantNode {
+    depth
+    role
+    generation {
+      ...GenerationFragment
+    }
+    children {
+      depth
+      role
+      generation {
+        ...GenerationFragment
+      }
+    }
+  }
+`;
+
 // Auth queries
 export const GET_CURRENT_USER = gql`
   ${USER_FRAGMENT}
@@ -150,6 +195,40 @@ export const GET_GENERATION = gql`
   }
 `;
 
+// Lineage queries
+export const GET_ANCESTRY = gql`
+  ${ANCESTRY_NODE_FRAGMENT}
+  query GetAncestry($id: UUID!, $maxDepth: Int = 25) {
+    generation(id: $id) {
+      ancestry(maxDepth: $maxDepth) {
+        ...AncestryNodeFragment
+      }
+    }
+  }
+`;
+
+export const GET_DESCENDANTS = gql`
+  ${DESCENDANT_NODE_FRAGMENT}
+  query GetDescendants($id: UUID!, $maxDepth: Int = 25) {
+    generation(id: $id) {
+      descendants(maxDepth: $maxDepth) {
+        ...DescendantNodeFragment
+      }
+    }
+  }
+`;
+
+export const GET_INPUT_ARTIFACTS = gql`
+  ${ARTIFACT_LINEAGE_FRAGMENT}
+  query GetInputArtifacts($id: UUID!) {
+    generation(id: $id) {
+      inputArtifacts {
+        ...ArtifactLineageFragment
+      }
+    }
+  }
+`;
+
 // Board mutations
 export const CREATE_BOARD = gql`
   ${BOARD_FRAGMENT}
@@ -243,6 +322,15 @@ export const RETRY_GENERATION = gql`
   }
 `;
 
+export const UPLOAD_ARTIFACT_FROM_URL = gql`
+  ${GENERATION_FRAGMENT}
+  mutation UploadArtifactFromUrl($input: UploadArtifactInput!) {
+    uploadArtifact(input: $input) {
+      ...GenerationFragment
+    }
+  }
+`;
+
 // Input types (these should match your backend GraphQL schema)
 export interface CreateBoardInput {
   title: string;
@@ -268,6 +356,15 @@ export interface CreateGenerationInput {
   metadata?: Record<string, unknown>;
 }
 
+export interface UploadArtifactInput {
+  boardId: string;
+  artifactType: ArtifactType;
+  fileUrl?: string;
+  originalFilename?: string;
+  userDescription?: string;
+  parentGenerationId?: string;
+}
+
 // Enums (should match backend)
 export enum BoardRole {
   VIEWER = "VIEWER",
@@ -284,10 +381,10 @@ export enum GenerationStatus {
 }
 
 export enum ArtifactType {
-  IMAGE = "image",
-  VIDEO = "video",
-  AUDIO = "audio",
-  TEXT = "text",
-  LORA = "lora",
-  MODEL = "model",
+  IMAGE = "IMAGE",
+  VIDEO = "VIDEO",
+  AUDIO = "AUDIO",
+  TEXT = "TEXT",
+  LORA = "LORA",
+  MODEL = "MODEL",
 }

package/src/hooks/useLineage.ts

@@ -0,0 +1,210 @@
+/**
+ * Hook for accessing generation lineage (ancestry and descendants).
+ */
+
+import { useMemo } from "react";
+import { useQuery } from "urql";
+import {
+  GET_ANCESTRY,
+  GET_DESCENDANTS,
+  GET_INPUT_ARTIFACTS,
+} from "../graphql/operations";
+
+export interface ArtifactLineage {
+  generationId: string;
+  role: string;
+  artifactType: string;
+}
+
+export interface AncestryNode {
+  generation: {
+    id: string;
+    generatorName: string;
+    artifactType: string;
+    status: string;
+    storageUrl?: string;
+    thumbnailUrl?: string;
+    createdAt: string;
+    [key: string]: unknown;
+  };
+  depth: number;
+  role: string | null;
+  parents: AncestryNode[];
+}
+
+export interface DescendantNode {
+  generation: {
+    id: string;
+    generatorName: string;
+    artifactType: string;
+    status: string;
+    storageUrl?: string;
+    thumbnailUrl?: string;
+    createdAt: string;
+    [key: string]: unknown;
+  };
+  depth: number;
+  role: string | null;
+  children: DescendantNode[];
+}
+
+interface UseAncestryOptions {
+  maxDepth?: number;
+  pause?: boolean;
+}
+
+interface UseAncestryHook {
+  ancestry: AncestryNode | null;
+  loading: boolean;
+  error: Error | null;
+}
+
+/**
+ * Hook for fetching the ancestry tree of a generation.
+ * @param generationId - The ID of the generation to fetch ancestry for
+ * @param options - Optional configuration (maxDepth, pause)
+ */
+export function useAncestry(
+  generationId: string,
+  options: UseAncestryOptions = {}
+): UseAncestryHook {
+  const { maxDepth = 25, pause = false } = options;
+
+  const [{ data, fetching, error }] = useQuery({
+    query: GET_ANCESTRY,
+    variables: { id: generationId, maxDepth },
+    pause,
+  });
+
+  const ancestry = useMemo(
+    () => data?.generation?.ancestry || null,
+    [data?.generation?.ancestry]
+  );
+
+  return {
+    ancestry,
+    loading: fetching,
+    error: error ? new Error(error.message) : null,
+  };
+}
+
+interface UseDescendantsOptions {
+  maxDepth?: number;
+  pause?: boolean;
+}
+
+interface UseDescendantsHook {
+  descendants: DescendantNode | null;
+  loading: boolean;
+  error: Error | null;
+}
+
+/**
+ * Hook for fetching the descendants tree of a generation.
+ * @param generationId - The ID of the generation to fetch descendants for
+ * @param options - Optional configuration (maxDepth, pause)
+ */
+export function useDescendants(
+  generationId: string,
+  options: UseDescendantsOptions = {}
+): UseDescendantsHook {
+  const { maxDepth = 25, pause = false } = options;
+
+  const [{ data, fetching, error }] = useQuery({
+    query: GET_DESCENDANTS,
+    variables: { id: generationId, maxDepth },
+    pause,
+  });
+
+  const descendants = useMemo(
+    () => data?.generation?.descendants || null,
+    [data?.generation?.descendants]
+  );
+
+  return {
+    descendants,
+    loading: fetching,
+    error: error ? new Error(error.message) : null,
+  };
+}
+
+interface UseInputArtifactsOptions {
+  pause?: boolean;
+}
+
+interface UseInputArtifactsHook {
+  inputArtifacts: ArtifactLineage[];
+  loading: boolean;
+  error: Error | null;
+}
+
+/**
+ * Hook for fetching the input artifacts of a generation.
+ * @param generationId - The ID of the generation to fetch input artifacts for
+ * @param options - Optional configuration (pause)
+ */
+export function useInputArtifacts(
+  generationId: string,
+  options: UseInputArtifactsOptions = {}
+): UseInputArtifactsHook {
+  const { pause = false } = options;
+
+  const [{ data, fetching, error }] = useQuery({
+    query: GET_INPUT_ARTIFACTS,
+    variables: { id: generationId },
+    pause,
+  });
+
+  const inputArtifacts = useMemo(
+    () => data?.generation?.inputArtifacts || [],
+    [data?.generation?.inputArtifacts]
+  );
+
+  return {
+    inputArtifacts,
+    loading: fetching,
+    error: error ? new Error(error.message) : null,
+  };
+}
+
+/**
+ * Combined hook for fetching both ancestry and descendants.
+ * Useful for lineage explorer pages that show both trees.
+ */
+interface UseLineageOptions {
+  maxDepth?: number;
+  pause?: boolean;
+}
+
+interface UseLineageHook {
+  ancestry: AncestryNode | null;
+  descendants: DescendantNode | null;
+  inputArtifacts: ArtifactLineage[];
+  loading: boolean;
+  error: Error | null;
+}
+
+export function useLineage(
+  generationId: string,
+  options: UseLineageOptions = {}
+): UseLineageHook {
+  const ancestryResult = useAncestry(generationId, options);
+  const descendantsResult = useDescendants(generationId, options);
+  const inputArtifactsResult = useInputArtifacts(generationId, options);
+
+  const loading =
+    ancestryResult.loading ||
+    descendantsResult.loading ||
+    inputArtifactsResult.loading;
+
+  const error =
+    ancestryResult.error || descendantsResult.error || inputArtifactsResult.error;
+
+  return {
+    ancestry: ancestryResult.ancestry,
+    descendants: descendantsResult.descendants,
+    inputArtifacts: inputArtifactsResult.inputArtifacts,
+    loading,
+    error,
+  };
+}

package/src/hooks/useUpload.ts

@@ -0,0 +1,175 @@
+/**
+ * Hook for uploading artifacts (images, videos, audio, text).
+ */
+
+import { useCallback, useState } from "react";
+import { useMutation } from "urql";
+import { UPLOAD_ARTIFACT_FROM_URL, ArtifactType } from "../graphql/operations";
+import { useAuth } from "../auth/context";
+import { useApiConfig } from "../config/ApiConfigContext";
+
+export interface UploadRequest {
+  boardId: string;
+  artifactType: ArtifactType;
+  source: File | string; // File object or URL string
+  userDescription?: string;
+  parentGenerationId?: string;
+}
+
+export interface UploadResult {
+  id: string;
+  storageUrl: string;
+  thumbnailUrl?: string;
+  status: "completed" | "failed";
+  artifactType: ArtifactType;
+  generatorName: string;
+}
+
+export interface UploadHook {
+  upload: (request: UploadRequest) => Promise<UploadResult>;
+  isUploading: boolean;
+  progress: number; // 0-100
+  error: Error | null;
+}
+
+export function useUpload(): UploadHook {
+  const [isUploading, setIsUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<Error | null>(null);
+
+  const { apiUrl } = useApiConfig();
+  const auth = useAuth();
+
+  const [, uploadFromUrlMutation] = useMutation(UPLOAD_ARTIFACT_FROM_URL);
+
+  const upload = useCallback(
+    async (request: UploadRequest): Promise<UploadResult> => {
+      setError(null);
+      setProgress(0);
+      setIsUploading(true);
+
+      try {
+        // Handle URL upload via GraphQL
+        if (typeof request.source === "string") {
+          const result = await uploadFromUrlMutation({
+            input: {
+              boardId: request.boardId,
+              artifactType: request.artifactType,
+              fileUrl: request.source,
+              userDescription: request.userDescription,
+              parentGenerationId: request.parentGenerationId,
+            },
+          });
+
+          if (result.error) {
+            throw new Error(result.error.message);
+          }
+
+          if (!result.data?.uploadArtifact) {
+            throw new Error("Upload failed");
+          }
+
+          setProgress(100);
+          setIsUploading(false);
+
+          return {
+            id: result.data.uploadArtifact.id,
+            storageUrl: result.data.uploadArtifact.storageUrl,
+            thumbnailUrl: result.data.uploadArtifact.thumbnailUrl,
+            status: "completed",
+            artifactType: result.data.uploadArtifact.artifactType,
+            generatorName: result.data.uploadArtifact.generatorName,
+          };
+        }
+
+        // Handle file upload via REST API
+        const formData = new FormData();
+        formData.append("board_id", request.boardId);
+        formData.append("artifact_type", request.artifactType.toLowerCase());
+        formData.append("file", request.source);
+        if (request.userDescription) {
+          formData.append("user_description", request.userDescription);
+        }
+        if (request.parentGenerationId) {
+          formData.append("parent_generation_id", request.parentGenerationId);
+        }
+
+        const token = await auth.getToken();
+        const headers: Record<string, string> = {};
+        if (token) {
+          headers.Authorization = `Bearer ${token}`;
+        }
+
+        // Use XMLHttpRequest for progress tracking
+        const result = await new Promise<UploadResult>((resolve, reject) => {
+          const xhr = new XMLHttpRequest();
+
+          xhr.upload.addEventListener("progress", (e) => {
+            if (e.lengthComputable) {
+              const percentComplete = (e.loaded / e.total) * 100;
+              setProgress(percentComplete);
+            }
+          });
+
+          xhr.addEventListener("load", () => {
+            if (xhr.status === 200) {
+              try {
+                const data = JSON.parse(xhr.responseText);
+                resolve({
+                  id: data.id,
+                  storageUrl: data.storageUrl,
+                  thumbnailUrl: data.thumbnailUrl,
+                  status: "completed",
+                  artifactType: data.artifactType as ArtifactType,
+                  generatorName: data.generatorName,
+                });
+              } catch (err) {
+                reject(new Error("Failed to parse response"));
+              }
+            } else {
+              try {
+                const errorData = JSON.parse(xhr.responseText);
+                reject(new Error(errorData.detail || `Upload failed: ${xhr.statusText}`));
+              } catch {
+                reject(new Error(`Upload failed: ${xhr.statusText}`));
+              }
+            }
+          });
+
+          xhr.addEventListener("error", () => {
+            reject(new Error("Upload failed: Network error"));
+          });
+
+          xhr.addEventListener("abort", () => {
+            reject(new Error("Upload cancelled"));
+          });
+
+          xhr.open("POST", `${apiUrl}/api/uploads/artifact`);
+          Object.entries(headers).forEach(([key, value]) => {
+            xhr.setRequestHeader(key, value);
+          });
+          xhr.send(formData);
+        });
+
+        setProgress(100);
+        setIsUploading(false);
+        return result;
+      } catch (err) {
+        const uploadError =
+          err instanceof Error ? err : new Error("Upload failed");
+        setError(uploadError);
+        setIsUploading(false);
+        setProgress(0);
+        throw uploadError;
+      }
+    },
+    [uploadFromUrlMutation, apiUrl, auth]
+  );
+
+  return {
+    upload,
+    isUploading,
+    progress,
+    error,
+  };
+}

package/src/index.ts

@@ -12,8 +12,16 @@ export { useApiConfig } from "./config/ApiConfigContext";
 export type { ApiConfig } from "./config/ApiConfigContext";
 
 // Generator selection context
-export { GeneratorSelectionProvider, useGeneratorSelection } from "./config/GeneratorSelectionContext";
-export type { GeneratorInfo, GeneratorSelectionContextValue, ArtifactSlotInfo, Artifact } from "./config/GeneratorSelectionContext";
+export {
+  GeneratorSelectionProvider,
+  useGeneratorSelection,
+} from "./config/GeneratorSelectionContext";
+export type {
+  GeneratorInfo,
+  GeneratorSelectionContextValue,
+  ArtifactSlotInfo,
+  Artifact,
+} from "./config/GeneratorSelectionContext";
 
 // GraphQL exports
 export { createGraphQLClient } from "./graphql/client";
@@ -24,7 +32,24 @@ export { useBoards } from "./hooks/useBoards";
 export { useBoard } from "./hooks/useBoard";
 export { useGeneration } from "./hooks/useGeneration";
 export { useGenerators } from "./hooks/useGenerators";
+export { useUpload } from "./hooks/useUpload";
 export type { Generator, JSONSchema7 } from "./hooks/useGenerators";
+export {
+  useAncestry,
+  useDescendants,
+  useInputArtifacts,
+  useLineage,
+} from "./hooks/useLineage";
+export type {
+  ArtifactLineage,
+  AncestryNode,
+  DescendantNode,
+} from "./hooks/useLineage";
+export type {
+  UploadRequest,
+  UploadResult,
+  UploadHook,
+} from "./hooks/useUpload";
 
 // Generator schema utilities
 export * from "./types/generatorSchema";