Merge pull request #190 from Tauffer-Consulting/feature/workflows_gal…

…lery

Feature/external workflows gallery

frontend/src/features/workflowEditor/api/workflowsExample/getWorkflowExamples.ts

@@ -0,0 +1,59 @@
+import axios from "axios";
+import { type IWorkflowPieceData } from "features/workflowEditor/context/types";
+import { type Edge, type Node } from "reactflow";
+import useSWR from "swr";
+
+const REPO_URL =
+  "https://raw.githubusercontent.com/Tauffer-Consulting/domino_pieces_gallery/main/workflows_gallery";
+
+const getWorkflowsExampleUrl = `${REPO_URL}/index.json`;
+
+type GithubReposContent = Array<{
+  title: string;
+  description: string;
+  jsonFile: string;
+  levelTag: "Advanced" | "Beginner" | "Intermediate";
+}>;
+
+interface JSONFile {
+  workflowPieces: Record<string, Piece>;
+  workflowPiecesData: IWorkflowPieceData;
+  workflowNodes: Node[];
+  workflowEdges: Edge[];
+}
+
+export type WorkflowsGalleryExamples = Array<{
+  title: string;
+  description: string;
+  jsonFile: JSONFile;
+  levelTag: "Advanced" | "Beginner" | "Intermediate";
+}>;
+
+const getWorkflowsExample: () => Promise<WorkflowsGalleryExamples> =
+  async () => {
+    const { data } = await axios.get<GithubReposContent>(
+      getWorkflowsExampleUrl,
+    );
+    const jsons: WorkflowsGalleryExamples = [];
+    for (const value of data) {
+      const { data: json } = await axios.get<JSONFile>(
+        `${REPO_URL}/${value.jsonFile}`,
+      );
+      jsons.push({ ...value, jsonFile: json });
+    }
+
+    return jsons;
+  };
+
+export const useAuthenticatedGetWorkflowsExamples = (fetch: boolean) => {
+  const fetcher = async () => await getWorkflowsExample().then((data) => data);
+
+  return useSWR(
+    fetch ? getWorkflowsExampleUrl : null,
+    async () => await fetcher(),
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    },
+  );
+};

frontend/src/features/workflowEditor/api/workflowsExample/index.ts

@@ -0,0 +1 @@
+export * from "./getWorkflowExamples";

frontend/src/features/workflowEditor/components/WorkflowExamplesGalleryModal/index.tsx

@@ -8,8 +8,12 @@ import {
   Chip,
 } from "@mui/material";
 import { Modal, type ModalRef } from "components/Modal";
+import {
+  type WorkflowsGalleryExamples,
+  useAuthenticatedGetWorkflowsExamples,
+} from "features/workflowEditor/api/workflowsExample";
 import theme from "providers/theme.config";
-import { forwardRef, type ForwardedRef, useState } from "react";
+import { forwardRef, type ForwardedRef, useState, useMemo } from "react";
 
 import CloudSegmentationWorkflow from "../../utils/workflows/cloud_segmentation_workflow.json";
 import DimensionalityReductionWorkflow from "../../utils/workflows/dimensionality_reduction.json";
@@ -24,55 +28,67 @@ interface WorkflowGalleryModalProps {
   confirmFn: (json: any) => void;
 }
 
+const USE_LOCAL_CARDS = true;
+
+const localCardsContents = [
+  {
+    title: "Youtube Summarizer",
+    description:
+      "Sends the summary of the last BBCNews youtube channel video to an emails list. You must configure Secrets and Local storage to use it.",
+    jsonFile: YoutubeSummarizerWorkflow,
+    levelTag: "Advanced",
+  },
+  {
+    title: "Image Filter Workflow",
+    description: "A simple workflow that applies a filter to an image.",
+    jsonFile: ImageFilterWorkflow,
+    levelTag: "Beginner",
+  },
+  {
+    title: "NASA Image Workflow",
+    description: "A simple workflow that gets an image from NASA API.",
+    jsonFile: NasaImageWorkflow,
+    levelTag: "Beginner",
+  },
+  {
+    title: "Dimensionality Reduction",
+    description:
+      "A workflow that applies dimensionality reduction to a dataset. To use it, you must use Shared Storage.",
+    jsonFile: DimensionalityReductionWorkflow,
+    levelTag: "Intermediate",
+  },
+  {
+    title: "Random Forest Classifier",
+    description:
+      "A machine learning workflow to train a random forest and use it to predict a new data. To use it, you must use Shared Storage",
+    jsonFile: RandomForestClassifierWorkflow,
+    levelTag: "Intermediate",
+  },
+  {
+    title: "Cloud Segmentation Workflow",
+    description:
+      "A workflow that uses OpenCV to create a cloud segmentation over a NASA earth image. To use it, you must use Shared Storage",
+    jsonFile: CloudSegmentationWorkflow,
+    levelTag: "Intermediate",
+  },
+] as unknown as WorkflowsGalleryExamples;
+
 const WorkflowExamplesGalleryModal = forwardRef(
   (
     props: WorkflowGalleryModalProps,
     ref: ForwardedRef<WorkflowGalleryModalRef>,
   ) => {
     const [selected, setSelected] = useState<number | null>(null);
+    // only make requests if USE_LOCAL_CARDS=false
+    const { data } = useAuthenticatedGetWorkflowsExamples(!USE_LOCAL_CARDS);
 
-    const cardsContents = [
-      {
-        title: "Youtube Summarizer",
-        description:
-          "Sends the summary of the last BBCNews youtube channel video to an emails list. You must configure Secrets and Local storage to use it.",
-        jsonFile: YoutubeSummarizerWorkflow,
-        levelTag: "Advanced",
-      },
-      {
-        title: "Image Filter Workflow",
-        description: "A simple workflow that applies a filter to an image.",
-        jsonFile: ImageFilterWorkflow,
-        levelTag: "Beginner",
-      },
-      {
-        title: "NASA Image Workflow",
-        description: "A simple workflow that gets an image from NASA API.",
-        jsonFile: NasaImageWorkflow,
-        levelTag: "Beginner",
-      },
-      {
-        title: "Dimensionality Reduction",
-        description:
-          "A workflow that applies dimensionality reduction to a dataset. To use it, you must use Shared Storage.",
-        jsonFile: DimensionalityReductionWorkflow,
-        levelTag: "Intermediate",
-      },
-      {
-        title: "Random Forest Classifier",
-        description:
-          "A machine learning workflow to train a random forest and use it to predict a new data. To use it, you must use Shared Storage",
-        jsonFile: RandomForestClassifierWorkflow,
-        levelTag: "Intermediate",
-      },
-      {
-        title: "Cloud Segmentation Workflow",
-        description:
-          "A workflow that uses OpenCV to create a cloud segmentation over a NASA earth image. To use it, you must use Shared Storage",
-        jsonFile: CloudSegmentationWorkflow,
-        levelTag: "Intermediate",
-      },
-    ];
+    const cardsContents = useMemo<WorkflowsGalleryExamples>(() => {
+      if (USE_LOCAL_CARDS) {
+        return localCardsContents;
+      } else {
+        return data ?? [];
+      }
+    }, [data, localCardsContents, USE_LOCAL_CARDS]);
 
     const levelTagMap: any = {
       Beginner: {