feat(pipeline-builder): User can have cleaner canvas by introducing s…

…mooth-edge edges (#958)

Because

- improve UX

This commit

- User will have cleaner canvas by introducing smooth-edge edges

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.68.3-rc.63",
+  "version": "0.68.3-rc.67",
   "description": "Instill AI's frontend toolkit",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",

packages/toolkit/src/view/data/DataComponentForm.tsx

@@ -30,9 +30,9 @@ export const DataResourceSchema = z
 
       // Pinecone - TASK_QUERY
       namespace: z.string().nullable().optional(),
-      topK: z.string().nullable().optional(),
-      includeValues: z.boolean().nullable().optional(),
-      includeMetadata: z.boolean().nullable().optional(),
+      top_k: z.string().nullable().optional(),
+      include_values: z.boolean().nullable().optional(),
+      include_metadata: z.boolean().nullable().optional(),
       vector: z.string().nullable().optional(),
 
       // Pinecone - TASK_UPSERT
@@ -44,23 +44,23 @@ export const DataResourceSchema = z
       state.connector_definition_name === "connector-definitions/data-pinecone"
     ) {
       if (state.task === "TASK_QUERY") {
-        if (!state.input.topK) {
+        if (!state.input.top_k) {
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
-            message: "topK is required",
-            path: ["input.topK"],
+            message: "top_k is required",
+            path: ["input.top_k"],
           });
         } else {
           const result = validateIntillUpstreamTypes({
             type: "reference_and_number",
-            value: state.input.topK,
+            value: state.input.top_k,
           });
 
           if (!result.isValid) {
             ctx.addIssue({
               code: z.ZodIssueCode.custom,
               message: result.error,
-              path: ["input.topK"],
+              path: ["input.top_k"],
             });
           }
         }
@@ -485,7 +485,7 @@ export const DataComponentForm = ({
           />
           <Form.Field
             control={form.control}
-            name="input.topK"
+            name="input.top_k"
             render={({ field }) => {
               const display =
                 connectorDefinitionName ===
@@ -494,7 +494,7 @@ export const DataComponentForm = ({
 
               return (
                 <Form.Item className={display ? "" : "hidden"}>
-                  <Form.Label>topK *</Form.Label>
+                  <Form.Label>top_k *</Form.Label>
                   <Form.Control>
                     <Input.Root>
                       <Input.Core
@@ -514,7 +514,7 @@ export const DataComponentForm = ({
           />
           <Form.Field
             control={form.control}
-            name="input.includeValues"
+            name="input.include_values"
             render={({ field }) => {
               const display =
                 connectorDefinitionName ===
@@ -523,7 +523,7 @@ export const DataComponentForm = ({
 
               return (
                 <Form.Item className={display ? "" : "hidden"}>
-                  <Form.Label>includeValues</Form.Label>
+                  <Form.Label>include_values</Form.Label>
                   <Form.Control>
                     <Switch
                       checked={field.value ?? false}
@@ -541,7 +541,7 @@ export const DataComponentForm = ({
           />
           <Form.Field
             control={form.control}
-            name="input.includeMetadata"
+            name="input.include_metadata"
             render={({ field }) => {
               const display =
                 connectorDefinitionName ===
@@ -550,7 +550,7 @@ export const DataComponentForm = ({
 
               return (
                 <Form.Item className={display ? "" : "hidden"}>
-                  <Form.Label>includeMetadata</Form.Label>
+                  <Form.Label>include_metadata</Form.Label>
                   <Form.Control>
                     <Switch
                       checked={field.value ?? false}

packages/toolkit/src/view/pipeline-builder/Flow.tsx

@@ -159,6 +159,7 @@ export const Flow = forwardRef<HTMLDivElement, FlowProps>((props, ref) => {
               gap={32}
               color="#D2D6DB"
               className="!bg-semantic-bg-alt-primary"
+              size={3}
             />
           </ReactFlow>
         </div>

packages/toolkit/src/view/pipeline-builder/components/CustomEdge.tsx

@@ -1,5 +1,5 @@
 import cn from "clsx";
-import { EdgeProps, getBezierPath } from "reactflow";
+import { EdgeProps, getSmoothStepPath } from "reactflow";
 
 export const CustomEdge = ({
   id,
@@ -12,7 +12,7 @@ export const CustomEdge = ({
   style = {},
   markerEnd,
 }: EdgeProps) => {
-  const [edgePath] = getBezierPath({
+  const [edgePath] = getSmoothStepPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -27,7 +27,6 @@ export const CustomEdge = ({
         id={id}
         style={style}
         className={cn("fill-none stroke-semantic-accent-default stroke-[4px]")}
-        strokeDasharray={12}
         d={edgePath}
         markerEnd={markerEnd}
       />