Merge pull request #173 from Tauffer-Consulting/gallery-improvements

Gallery improvements

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

@@ -46,18 +46,18 @@ const MyWorkflowExamplesGalleryModal = forwardRef(
 
     return (
       <Modal
-        title="Example Workflows Gallery"
+        title="My Workflows Gallery"
         maxWidth={"md"}
         fullWidth={true}
         content={
           <Container>
-            <Grid container justifyContent="center">
+            <Grid container justifyContent="center" spacing={2}>
               {cardsContents.map((card, index) => (
-                <Grid item key={index} xs={12} sm={4} md={4}>
+                <Grid item key={index} xs={12} sm={12} md={12}>
                   <Card
                     elevation={4}
                     sx={{
-                      height: "200px",
+                      height: "60px",
                       backgroundColor: theme.palette.grey[100],
                     }}
                   >

frontend/src/features/workflowEditor/components/SidebarForm/PieceForm/PieceFormItem/index.tsx

@@ -4,8 +4,8 @@ import CodeEditorInput from "components/CodeEditorInput";
 import DatetimeInput from "components/DatetimeInput";
 import NumberInput from "components/NumberInput";
 import SelectInput from "components/SelectInput";
-import TextInput from "components/TextInput";
 import TextAreaInput from "components/TextAreaInput";
+import TextInput from "components/TextInput";
 import { type IWorkflowPieceData } from "features/workflowEditor/context/types";
 import React, { useMemo } from "react";
 import { type Control, useWatch } from "react-hook-form";
@@ -223,10 +223,11 @@ const PieceFormItem: React.FC<PieceFormItemProps> = ({
       />
     );
   } else if (
-    ("type" in schema &&
-      "widget" in schema &&
-      schema.type === "string" &&
-      schema.widget === "textarea")) {
+    "type" in schema &&
+    "widget" in schema &&
+    schema.type === "string" &&
+    schema.widget === "textarea"
+  ) {
     inputElement = (
       <TextAreaInput<IWorkflowPieceData>
         variant="outlined"

frontend/src/features/workflowEditor/components/SidebarForm/PieceForm/validation.ts

@@ -161,7 +161,7 @@ function getValidationValueBySchemaType(schema: any, required: boolean) {
         if (fromUpstream) {
           return yup.mixed().notRequired();
         }
-        return required ? yup.string().required() : yup.string();
+        return required ? yup.string().required() : yup.string().nullable();
       }),
     });
   } else if (schema.type === "object") {

frontend/src/features/workflowEditor/components/WorkflowEditor.tsx

@@ -250,7 +250,14 @@ export const WorkflowsEditorComponent: React.FC = () => {
             toast.error(
               "Some repositories are missing or incompatible version",
             );
-            setIncompatiblesPieces(differences);
+            const uniquePieces = new Set<string>();
+            incompatiblesPieces.forEach((item) => {
+              const pieceWithVersion = `${
+                item.split("ghcr.io/")[1].split(":")[0]
+              }:${item.split("ghcr.io/")[1].split(":")[1].split("-")[0]}`;
+              uniquePieces.add(pieceWithVersion);
+            });
+            setIncompatiblesPieces(Array.from(uniquePieces));
             incompatiblePiecesModalRef.current?.open();
           } else {
             workflowPanelRef?.current?.setNodes(json.workflowNodes);
@@ -494,18 +501,19 @@ export const WorkflowsEditorComponent: React.FC = () => {
                 <Modal
                   title="Missing or incompatibles Pieces Repositories"
                   content={
-                    <ul>
-                      {incompatiblesPieces.map((item) => (
-                        <li key={item}>
-                          {`${item.split("ghcr.io/")[1].split(":")[0]}:  ${
-                            item
-                              .split("ghcr.io/")[1]
-                              .split(":")[1]
-                              .split("-")[0]
-                          }`}
-                        </li>
-                      ))}
-                    </ul>
+                    <div>
+                      <p style={{ textAlign: "justify" }}>
+                        Some of the pieces necessary to run this workflow are
+                        not present in this workspace. In order to install the
+                        correct versions go to the workspace configuration page
+                        and install the following repositories versions:
+                      </p>
+                      <ul>
+                        {incompatiblesPieces.map((item) => (
+                          <li key={item}>{`${item}`}</li>
+                        ))}
+                      </ul>
+                    </div>
                   }
                   ref={incompatiblePiecesModalRef}
                 />

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

@@ -5,12 +5,14 @@ import {
   Card,
   CardContent,
   CardActionArea,
+  Chip,
 } from "@mui/material";
 import { Modal, type ModalRef } from "components/Modal";
 import theme from "providers/theme.config";
 import { forwardRef, type ForwardedRef, useState } from "react";
 
-import LogWorkflow from "../../utils/workflows/simple_log_workflow.json";
+import ImageFilterWorkflow from "../../utils/workflows/image_filter_workflow.json";
+import NasaImageWorkflow from "../../utils/workflows/nasa_workflow.json";
 import YoutubeSummarizerWorkflow from "../../utils/workflows/youtube_summarizer.json";
 
 interface WorkflowGalleryModalRef extends ModalRef {}
@@ -32,15 +34,47 @@ const WorkflowExamplesGalleryModal = forwardRef(
         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: "Simple Log Workflow",
-        description:
-          "A simple workflow that logs a message to the console. Useful as starting point for new users.",
-        jsonFile: LogWorkflow,
+        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",
       },
     ];
 
+    const levelTagMap: any = {
+      Beginner: {
+        color: "success",
+      },
+      Advanced: {
+        color: "error",
+      },
+      Intermediate: {
+        color: "warning",
+      },
+    };
+
+    cardsContents.sort((a, b) => {
+      const orderMap: any = {
+        Beginner: 1,
+        Intermediate: 2,
+        Advanced: 3,
+      };
+
+      const levelA = orderMap[a.levelTag];
+      const levelB = orderMap[b.levelTag];
+
+      return levelA - levelB;
+    });
+
     return (
       <Modal
         title="Example Workflows Gallery"
@@ -83,10 +117,34 @@ const WorkflowExamplesGalleryModal = forwardRef(
                         />
                       )}
 
-                      <Typography variant="h3">{card.title}</Typography>
-                      <div style={{ marginTop: "40px" }}>
+                      <Typography
+                        variant="h3"
+                        sx={{
+                          position: "absolute",
+                          top: "20px",
+                          left: "20px",
+                          zIndex: 1,
+                          fontWeight: "bold",
+                        }}
+                      >
+                        {card.title}
+                      </Typography>
+                      <div
+                        style={{
+                          position: "absolute",
+                          top: "80px",
+                          overflow: "hidden",
+                          paddingRight: "15px",
+                          textAlign: "justify",
+                        }}
+                      >
                         <Typography>{card.description}</Typography>
                       </div>
+                      <Chip
+                        style={{ position: "absolute", bottom: "10px" }}
+                        label={card.levelTag}
+                        color={levelTagMap[card.levelTag].color}
+                      />
                     </CardContent>
                   </CardActionArea>
                 </Card>

frontend/src/features/workflowEditor/utils/workflows/image_filter_workflow.json

@@ -0,0 +1 @@
+{"workflowPieces":{"694_27dd10b0-cd4b-41a5-bb11-8468b0a3c60b":{"id":694,"name":"HttpRequestPiece","description":"Makes a HTTP request to a given URL.","dependency":{"dockerfile":null,"requirements_file":"requirements_0.txt"},"source_image":"ghcr.io/tauffer-consulting/default_domino_pieces:0.7.0-group0","input_schema":{"$defs":{"MethodTypes":{"enum":["GET","POST","PUT","DELETE"],"title":"MethodTypes","type":"string"}},"properties":{"url":{"description":"URL to make a request to.","title":"Url","type":"string"},"method":{"allOf":[{"$ref":"#/$defs/MethodTypes"}],"default":"GET","description":"HTTP method to use."},"bearer_token":{"default":null,"description":"Bearer token to use for authentication.","title":"Bearer Token","type":"string"},"body_json_data":{"default":"{\n    \"key_1\": \"value_1\",\n    \"key_2\": \"value_2\"\n}\n","description":"JSON data to send in the request body.","title":"Body Json Data","type":"string","widget":"codeeditor-json"}},"required":["url"],"title":"HttpRequestPiece","type":"object"},"output_schema":{"properties":{"base64_bytes_data":{"description":"Output data as base64 encoded string.","title":"Base64 Bytes Data","type":"string"}},"required":["base64_bytes_data"],"title":"OutputModel","type":"object"},"secrets_schema":null,"style":{"module":"HttpRequestPiece","label":"HTTP Request","nodeType":"default","nodeStyle":{"backgroundColor":"#b3cde8"},"useIcon":true,"iconClassName":"material-symbols:send","iconStyle":{"cursor":"pointer"}},"source_url":"https://github.com/Tauffer-Consulting/default_domino_pieces/tree/main/pieces/HttpRequestPiece","repository_id":219},"695_7a0d7be2-528e-4149-831a-d0a4308dcb62":{"id":695,"name":"ImageFilterPiece","description":"A Piece that applies selected image filters to an image.","dependency":{"dockerfile":null,"requirements_file":"requirements_0.txt"},"source_image":"ghcr.io/tauffer-consulting/default_domino_pieces:0.7.0-group0","input_schema":{"$defs":{"OutputTypeType":{"description":"Output type for the result text","enum":["file","base64_string","both"],"title":"OutputTypeType","type":"string"}},"properties":{"input_image":{"description":"Input image. It should be either a path to a file, or a base64 encoded string.","from_upstream":"always","title":"Input Image","type":"string"},"sepia":{"default":false,"description":"Apply sepia effect.","title":"Sepia","type":"boolean"},"black_and_white":{"default":false,"description":"Apply black and white effect.","title":"Black And White","type":"boolean"},"brightness":{"default":false,"description":"Apply brightness effect.","title":"Brightness","type":"boolean"},"darkness":{"default":false,"description":"Apply darkness effect.","title":"Darkness","type":"boolean"},"contrast":{"default":false,"description":"Apply contrast effect.","title":"Contrast","type":"boolean"},"red":{"default":false,"description":"Apply red effect.","title":"Red","type":"boolean"},"green":{"default":false,"description":"Apply green effect.","title":"Green","type":"boolean"},"blue":{"default":false,"description":"Apply blue effect.","title":"Blue","type":"boolean"},"cool":{"default":false,"description":"Apply cool effect.","title":"Cool","type":"boolean"},"warm":{"default":false,"description":"Apply warm effect.","title":"Warm","type":"boolean"},"output_type":{"allOf":[{"$ref":"#/$defs/OutputTypeType"}],"default":"both","description":"Format of the output image. Options are: `file`, `base64_string`, `both`."}},"required":["input_image"],"title":"ImageFilterPiece","type":"object"},"output_schema":{"properties":{"image_base64_string":{"default":"","description":"Base64 encoded string of the output image.","title":"Image Base64 String","type":"string"},"image_file_path":{"default":"","description":"Path to the output image file.","title":"Image File Path","type":"string"}},"title":"OutputModel","type":"object"},"secrets_schema":null,"style":{"module":"ImageFilterPiece","label":"Image Filter","nodeType":"default","nodeStyle":{"backgroundColor":"#b3cde8"},"useIcon":true,"iconClassName":"ic:twotone-filter","iconStyle":{"cursor":"pointer"}},"source_url":"https://github.com/Tauffer-Consulting/default_domino_pieces/tree/main/pieces/ImageFilterPiece","repository_id":219}},"workflowPiecesData":{"694_27dd10b0-cd4b-41a5-bb11-8468b0a3c60b":{"storage":{"storageAccessMode":"Read/Write"},"containerResources":{"cpu":{"min":100,"max":100},"memory":{"min":128,"max":128},"useGpu":false},"inputs":{"url":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":"https://images.pexels.com/photos/4055758/pexels-photo-4055758.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"},"method":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":"GET"},"bearer_token":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":null},"body_json_data":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":"{\n    \"key_1\": \"value_1\",\n    \"key_2\": \"value_2\"\n}\n"}}},"695_7a0d7be2-528e-4149-831a-d0a4308dcb62":{"storage":{"storageAccessMode":"Read/Write"},"containerResources":{"cpu":{"min":100,"max":100},"memory":{"min":128,"max":128},"useGpu":false},"inputs":{"input_image":{"fromUpstream":true,"upstreamId":"HttpReques_27dd10b0cd4b41a5bb118468b0a3c60b","upstreamArgument":"base64_bytes_data","upstreamValue":"HttpRequestPiece (27dd10b0) - Base64 Bytes Data","value":""},"sepia":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":false},"black_and_white":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":true},"brightness":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":false},"darkness":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":false},"contrast":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":false},"red":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":false},"green":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":false},"blue":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":false},"cool":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":false},"warm":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":false},"output_type":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":"both"}}}},"workflowNodes":[{"id":"694_27dd10b0-cd4b-41a5-bb11-8468b0a3c60b","type":"CustomNode","position":{"x":369,"y":188.5},"data":{"name":"HttpRequestPiece","style":{"module":"HttpRequestPiece","label":"HTTP Request","nodeType":"default","nodeStyle":{"backgroundColor":"#b3cde8"},"useIcon":true,"iconClassName":"material-symbols:send","iconStyle":{"cursor":"pointer"}},"validationError":false,"orientation":"horizontal"},"width":150,"height":70,"selected":false,"dragging":false},{"id":"695_7a0d7be2-528e-4149-831a-d0a4308dcb62","type":"CustomNode","position":{"x":656,"y":161.5},"data":{"name":"ImageFilterPiece","style":{"module":"ImageFilterPiece","label":"Image Filter","nodeType":"default","nodeStyle":{"backgroundColor":"#b3cde8"},"useIcon":true,"iconClassName":"ic:twotone-filter","iconStyle":{"cursor":"pointer"}},"validationError":false,"orientation":"horizontal"},"width":150,"height":70,"selected":true,"dragging":false}],"workflowEdges":[{"source":"694_27dd10b0-cd4b-41a5-bb11-8468b0a3c60b","sourceHandle":"source-694_27dd10b0-cd4b-41a5-bb11-8468b0a3c60b","target":"695_7a0d7be2-528e-4149-831a-d0a4308dcb62","targetHandle":"target-695_7a0d7be2-528e-4149-831a-d0a4308dcb62","id":"reactflow__edge-694_27dd10b0-cd4b-41a5-bb11-8468b0a3c60bsource-694_27dd10b0-cd4b-41a5-bb11-8468b0a3c60b-695_7a0d7be2-528e-4149-831a-d0a4308dcb62target-695_7a0d7be2-528e-4149-831a-d0a4308dcb62"}]}

frontend/src/features/workflowEditor/utils/workflows/nasa_workflow.json

@@ -0,0 +1 @@
+{"workflowPieces":{"705_0018c3ba-8c2e-48a3-b79c-8300431e7d52":{"id":705,"name":"NasaEarthImagePiece","description":"This Piece uses the NASA EPIC API to get satellite images of the Earth.\nReferences: \n- https://epic.gsfc.nasa.gov/about/api \n- https://api.nasa.gov/","dependency":{"dockerfile":null,"requirements_file":"requirements.txt"},"source_image":"ghcr.io/tauffer-consulting/data_apis_domino_pieces:0.2.0-group0","input_schema":{"$defs":{"LocationTypes":{"enum":["random","America","Atlantic Ocean","Africa","Asia","Pacific Ocean"],"title":"LocationTypes","type":"string"}},"properties":{"location":{"allOf":[{"$ref":"#/$defs/LocationTypes"}],"default":"random","description":"Retrieve image centered approximately on this location."}},"title":"NasaEarthImagePiece","type":"object"},"output_schema":{"properties":{"image_url":{"default":null,"description":"URL of the image.","title":"Image Url","type":"string"},"image_base64_string":{"default":null,"description":"Output data as base64 encoded string.","title":"Image Base64 String","type":"string"},"image_file_path":{"default":null,"description":"Path to the image file.","title":"Image File Path","type":"string"}},"title":"OutputModel","type":"object"},"secrets_schema":{"properties":{"NASA_API_KEY":{"default":"DEMO_KEY","description":"API key for NASA Earth Image API.","title":"Nasa Api Key","type":"string"}},"title":"SecretsModel","type":"object"},"style":{"module":"NasaEarthImagePiece","label":"NASA Earth Image","nodeType":"default","nodeStyle":{"backgroundColor":"#ebebeb"},"useIcon":true,"iconClassName":"ion:earth-sharp","iconStyle":{"cursor":"pointer"}},"source_url":"https://github.com/Tauffer-Consulting/data_apis_domino_pieces/tree/main/pieces/NasaEarthImagePiece","repository_id":221}},"workflowPiecesData":{"705_0018c3ba-8c2e-48a3-b79c-8300431e7d52":{"storage":{"storageAccessMode":"Read/Write"},"containerResources":{"cpu":{"min":100,"max":100},"memory":{"min":128,"max":128},"useGpu":false},"inputs":{"location":{"fromUpstream":false,"upstreamId":"","upstreamArgument":"","upstreamValue":"","value":"random"}}}},"workflowNodes":[{"id":"705_0018c3ba-8c2e-48a3-b79c-8300431e7d52","type":"CustomNode","position":{"x":718,"y":212.5},"data":{"name":"NasaEarthImagePiece","style":{"module":"NasaEarthImagePiece","label":"NASA Earth Image","nodeType":"default","nodeStyle":{"backgroundColor":"#ebebeb"},"useIcon":true,"iconClassName":"ion:earth-sharp","iconStyle":{"cursor":"pointer"}},"validationError":false,"orientation":"horizontal"},"width":150,"height":70,"selected":true,"positionAbsolute":{"x":718,"y":212.5},"dragging":false}],"workflowEdges":[]}