fix: changes get started templates image, adds set color index to every starter template (#4569)

* Updated image to show entire grid

* Changed swatch index to use id

* Updated swatch index to not have negative numbers

* Updated starter examples to have the gradients already defined

* Make forked flow have the same color as the template

src/frontend/src/controllers/API/queries/flows/use-post-add-flow.ts

@@ -14,6 +14,7 @@ interface IPostAddFlow {
   folder_id: string;
   endpoint_name: string | undefined;
   icon: string | undefined;
+  gradient: string | undefined;
 }
 
 export const usePostAddFlow: useMutationFunctionType<
@@ -31,6 +32,7 @@ export const usePostAddFlow: useMutationFunctionType<
       is_component: payload.is_component,
       folder_id: payload.folder_id || null,
       icon: payload.icon || null,
+      gradient: payload.gradient || null,
       endpoint_name: payload.endpoint_name || null,
     });
 

src/frontend/src/modals/templatesModal/components/TemplateCardComponent/index.tsx

@@ -1,6 +1,6 @@
 import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name";
 import { swatchColors } from "@/utils/styleUtils";
-import { cn } from "@/utils/utils";
+import { cn, getNumberFromString } from "@/utils/utils";
 import IconComponent, {
   ForwardedIconComponent,
 } from "../../../../components/genericIconComponent";
@@ -11,9 +11,9 @@ export default function TemplateCardComponent({
   onClick,
 }: TemplateCardComponentProps) {
   const swatchIndex =
-    (example.gradient && parseInt(example.gradient)
+    (example.gradient && !isNaN(parseInt(example.gradient))
       ? parseInt(example.gradient)
-      : (example.gradient?.length ?? example.name.length)) %
+      : getNumberFromString(example.gradient ?? example.name)) %
     swatchColors.length;
 
   const handleKeyDown = (e) => {

src/frontend/src/pages/MainPage/components/grid/index.tsx

@@ -15,7 +15,7 @@ import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowType } from "@/types/flow";
 import { getInputsAndOutputs } from "@/utils/storeUtils";
 import { swatchColors } from "@/utils/styleUtils";
-import { cn } from "@/utils/utils";
+import { cn, getNumberFromString } from "@/utils/utils";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import useDescriptionModal from "../../oldComponents/componentsComponent/hooks/use-description-modal";
@@ -102,9 +102,9 @@ const GridComponent = ({ flowData }: { flowData: FlowType }) => {
   const { onDragStart } = useDragStart(flowData);
 
   const swatchIndex =
-    (flowData.gradient && parseInt(flowData.gradient)
+    (flowData.gradient && !isNaN(parseInt(flowData.gradient))
       ? parseInt(flowData.gradient)
-      : (flowData.gradient?.length ?? flowData.name.length)) %
+      : getNumberFromString(flowData.gradient ?? flowData.id)) %
     swatchColors.length;
 
   return (

src/frontend/src/pages/MainPage/components/list/index.tsx

@@ -14,7 +14,7 @@ import useAlertStore from "@/stores/alertStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowType } from "@/types/flow";
 import { swatchColors } from "@/utils/styleUtils";
-import { cn } from "@/utils/utils";
+import { cn, getNumberFromString } from "@/utils/utils";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import useDescriptionModal from "../../oldComponents/componentsComponent/hooks/use-description-modal";
@@ -99,9 +99,9 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
   const descriptionModal = useDescriptionModal([flowData?.id], "flow");
 
   const swatchIndex =
-    (flowData.gradient && parseInt(flowData.gradient)
+    (flowData.gradient && !isNaN(parseInt(flowData.gradient))
       ? parseInt(flowData.gradient)
-      : (flowData.gradient?.length ?? flowData.name.length)) %
+      : getNumberFromString(flowData.gradient ?? flowData.id)) %
     swatchColors.length;
 
   return (

src/frontend/src/utils/reactflowUtils.ts

@@ -1597,6 +1597,7 @@ export const createNewFlow = (
     data: flowData,
     id: "",
     icon: flow?.icon ?? undefined,
+    gradient: flow?.gradient ?? undefined,
     is_component: flow?.is_component ?? false,
     folder_id: folderId,
     endpoint_name: flow?.endpoint_name ?? undefined,

src/frontend/src/utils/utils.ts

@@ -115,6 +115,12 @@ export function getRandomKeyByssmm(): string {
   return seconds + milliseconds + Math.abs(Math.floor(Math.random() * 10001));
 }
 
+export function getNumberFromString(str: string): number {
+  const hash = str.split("").reduce((acc, char) => {
+    return char.charCodeAt(0) + acc;
+  }, 0);
+  return hash;
+}
 export function buildTweakObject(tweak: tweakType) {
   tweak.forEach((el) => {
     Object.keys(el).forEach((key) => {