Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add event component data example #1608

Merged
merged 1 commit into from
Nov 19, 2024
Merged

feat: add event component data example #1608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/sdk/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "instill-sdk",
"version": "0.12.0-rc.2",
"version": "0.12.0-rc.3",
"description": "Instill AI's Typescript SDK",
"repository": "https://github.com/instill-ai/typescript-sdk.git",
"bugs": "https://github.com/instill-ai/community/issues",
Expand Down
1 change: 1 addition & 0 deletions packages/sdk/src/vdp/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ export const PipelineComponentMapSchema = z.record(z.any());

export type PipelineRunOnEventItem = {
type: string;
event: string;
};

export type PipelineRunOnEventMap = Record<string, PipelineRunOnEventItem>;
Expand Down
2 changes: 1 addition & 1 deletion packages/toolkit/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@instill-ai/toolkit",
"version": "0.111.0-rc.1",
"version": "0.111.0-rc.2",
"description": "Instill AI's frontend toolkit",
"repository": "https://github.com/instill-ai/design-system.git",
"bugs": "https://github.com/instill-ai/design-system/issues",
Expand Down
9 changes: 9 additions & 0 deletions packages/toolkit/src/constant/pipeline.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,15 @@ version: v1beta
#
# variable:

# Run on event
# Structure example:
# on:
# key: # Unique identifier for the variable.
# config: # The configuration for the event.
# setup: # The setup for the event.
#
# on:

# Custom user-defined output
# Structure example:
# output:
Expand Down
3 changes: 1 addition & 2 deletions packages/toolkit/src/lib/react-query-service/connector/useComponentDefinitions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { useQuery } from "@tanstack/react-query";
import { ComponentType, Nullable } from "instill-sdk";

import { env } from "../../../server";
import { getInstillAPIClient } from "../../sdk-helper";

export function useComponentDefinitions({
Expand All @@ -24,7 +23,7 @@ export function useComponentDefinitions({

const connectorDefinitions =
await client.vdp.component.listComponentDefinitions({
pageSize: env("NEXT_PUBLIC_QUERY_PAGE_SIZE"),
pageSize: 100,
filter:
componentType !== "all"
? `componentType=${componentType}`
Expand Down
10 changes: 0 additions & 10 deletions packages/toolkit/src/lib/react-query-service/pipeline/useDeleteNamespacePipeline.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,16 +60,6 @@ export function useDeleteNamespacePipeline() {
shareCode: null,
}),
});

queryClient.removeQueries({
queryKey: queryKeyStore.pipeline.getUseNamespacePipelineQueryKey({
namespaceId,
pipelineId,
view: null,
shareCode: null,
}),
exact: true,
});
},
});
}
118 changes: 93 additions & 25 deletions packages/toolkit/src/view/pipeline/view-pipeline/PipelinePlayground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,15 @@ import {
useUserNamespaces,
} from "../../../lib";
import { isArtifactRelatedInstillFormat } from "../../../lib/isArtifactRelatedInstillFormat";
import { recursiveHelpers } from "../../pipeline-builder";
import {
getReferencesFromString,
recursiveHelpers,
} from "../../pipeline-builder";
import { VariableConnectToRunOnEvent } from "../../recipe-editor/input";
import {
EventField,
listenWithType,
} from "../../recipe-editor/input/EventField";
import { RunButton } from "./RunButton";

const selector = (store: InstillStore) => ({
Expand Down Expand Up @@ -479,6 +487,55 @@ export const PipelinePlayground = ({
return true;
}, [outputs]);

const variablesConnectToRunOnEvent = React.useMemo(() => {
const on = pipeline?.recipe?.on;
const variable = pipeline?.recipe?.variable;

if (!on || !variable) {
return [];
}

const variablesConnectToRunOnEvent: VariableConnectToRunOnEvent[] = [];

Object.entries(variable).forEach(([key, value]) => {
if (!value) {
return;
}

if (value.listen) {
const listensWithType: listenWithType[] = [];

for (const listenItem of value.listen) {
const reference = getReferencesFromString(listenItem)[0];
if (!reference) {
continue;
}

// The referenceValue will looks like ${on.slack-0.message.text}
const referenceValueFrag =
reference.referenceValue.withoutCurlyBraces.split(".");
const eventKey = referenceValueFrag[1];
const eventType = eventKey ? on[eventKey] : undefined;

if (eventType) {
listensWithType.push({
reference: listenItem,
type: eventType.type,
});
}
}

variablesConnectToRunOnEvent.push({
listens: listensWithType,
key,
title: value.title,
});
}
});

return variablesConnectToRunOnEvent;
}, [pipeline?.recipe?.on, pipeline?.recipe?.variable]);

if (!formSchema || !formSchema.input || !formSchema.output) {
return (
<EmptyView
Expand Down Expand Up @@ -541,30 +598,41 @@ export const PipelinePlayground = ({
</Button>
</div>
) : (
<Form.Root {...form}>
<form
id={inOutPutFormID}
className="w-full"
onSubmit={form.handleSubmit(onTriggerPipeline)}
>
<div className="mb-5 flex flex-col gap-y-5">{fields}</div>
<div className="flex flex-row-reverse">
{pipeline ? (
<RunButton
inOutPutFormID={inOutPutFormID}
inputIsNotDefined={inputIsNotDefined}
outputIsNotDefined={outputIsNotDefined}
isTriggeringPipeline={
triggerPipeline.isPending ||
triggerPipelineRelease.isPending
}
/>
) : (
<div className="h-8 w-20 animate-pulse rounded bg-gradient-to-r from-[#DBDBDB]" />
)}
</div>
</form>
</Form.Root>
<div className="flex flex-col gap-y-5">
<div className="flex flex-col gap-y-4">
{variablesConnectToRunOnEvent.map((variable) => (
<EventField
title={variable.title ?? variable.key}
key={variable.key}
listensWithType={variable.listens}
/>
))}
</div>
<Form.Root {...form}>
<form
id={inOutPutFormID}
className="w-full"
onSubmit={form.handleSubmit(onTriggerPipeline)}
>
<div className="mb-5 flex flex-col gap-y-5">{fields}</div>
<div className="flex flex-row-reverse">
{pipeline ? (
<RunButton
inOutPutFormID={inOutPutFormID}
inputIsNotDefined={inputIsNotDefined}
outputIsNotDefined={outputIsNotDefined}
isTriggeringPipeline={
triggerPipeline.isPending ||
triggerPipelineRelease.isPending
}
/>
) : (
<div className="h-8 w-20 animate-pulse rounded bg-gradient-to-r from-[#DBDBDB]" />
)}
</div>
</form>
</Form.Root>
</div>
)
) : (
<InOutputSkeleton />
Expand Down
4 changes: 2 additions & 2 deletions packages/toolkit/src/view/recipe-editor/EditorViewBarItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@ export const EditorViewBarItem = ({
<div
{...attributes}
className={cn(
"first:rounded-tl cursor-pointer shrink-0",
"first:rounded-tl cursor-pointer shrink-0 border-t border-[#316FED] border-opacity-0",
currentViewId === id
? "bg-semantic-bg-alt-primary"
? "bg-semantic-bg-alt-primary border-opacity-100"
: "bg-semantic-bg-line",
)}
onClick={() => onClick(id)}
Expand Down
91 changes: 0 additions & 91 deletions packages/toolkit/src/view/recipe-editor/Output.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,97 +23,6 @@ export const Output = ({
}) => {
const { triggerPipelineStreamMap } = useInstillStore(useShallow(selector));

console.log(triggerPipelineStreamMap);

// React.useEffect(() => {
// const downloadArtifact = async () => {
// if (
// !triggerPipelineStreamMap?.pipeline?.output ||
// !outputSchema?.properties ||
// !accessToken
// ) {
// return;
// }

// let output = structuredClone(triggerPipelineStreamMap?.pipeline?.output);

// const downloadedFromArtifactKeys: string[] = [];

// Object.entries(outputSchema.properties).forEach(([key, value]) => {
// if (
// value?.instillFormat === "file" ||
// value?.instillFormat === "array:file" ||
// value?.instillFormat === "image" ||
// value?.instillFormat === "array:image" ||
// value?.instillFormat === "video" ||
// value?.instillFormat === "array:video" ||
// value?.instillFormat === "audio" ||
// value?.instillFormat === "array:audio"
// ) {
// downloadedFromArtifactKeys.push(key);
// }
// });

// try {
// for (const key of downloadedFromArtifactKeys) {
// const targetValue = output[key];
// if (!targetValue) {
// continue;
// }

// if (Array.isArray(targetValue)) {
// const downloadedArtifacts: string[] = [];
// for (const item of targetValue) {
// if (isValidURL(item)) {
// const response = await downloadNamespaceObject.mutateAsync({
// payload: {
// downloadUrl: item,
// },
// accessToken,
// });

// if (!response.ok) {
// continue;
// }

// const blob = await response.blob();
// const url = URL.createObjectURL(blob);
// downloadedArtifacts.push(url);
// }
// }
// output[key] = downloadedArtifacts;
// } else {
// if (isValidURL(targetValue)) {
// const response = await downloadNamespaceObject.mutateAsync({
// payload: {
// downloadUrl: targetValue,
// },
// accessToken,
// });

// if (!response.ok) {
// continue;
// }

// const blob = await response.blob();
// const url = URL.createObjectURL(blob);
// output[key] = url;
// }
// }

// console.log("output", output);

// setOutputWithDownloadedArtifacts(output);
// }
// } catch (error) {
// setOutputWithDownloadedArtifacts(null);
// console.log(error);
// }
// };

// downloadArtifact();
// }, [triggerPipelineStreamMap?.pipeline?.output, outputSchema, accessToken]);

const componentOutputFields = useComponentOutputFields({
mode: "build",
schema: outputSchema,
Expand Down
27 changes: 25 additions & 2 deletions packages/toolkit/src/view/recipe-editor/RecipeEditorView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,29 +241,52 @@ export const RecipeEditorView = () => {
) ?? []),
];

let addGettingStartedView = false;

if (
pipelineIsNew &&
prev.topRight?.views.findIndex(
(e) => e.id === DefaultEditorViewIDs.GETTING_STARTED,
) === -1
) {
addGettingStartedView = true;
topRightViews.push(getGettingStartedEditorView());
}

return {
topRight: {
views: topRightViews,
views: addGettingStartedView
? [
...prev.topRight.views.filter(
(view) =>
view.id !== DefaultEditorViewIDs.GETTING_STARTED &&
view.id !== DefaultEditorViewIDs.MAIN_PREVIEW_FLOW,
),
...topRightViews,
getGettingStartedEditorView(),
]
: [
...prev.topRight.views.filter(
(view) => view.id !== DefaultEditorViewIDs.MAIN_PREVIEW_FLOW,
),
...topRightViews,
],
currentViewId: pipelineIsNew
? DefaultEditorViewIDs.GETTING_STARTED
: (prev.topRight?.currentViewId ??
DefaultEditorViewIDs.MAIN_PREVIEW_FLOW),
},
main: {
views: [],
views: [...prev.main.views],
currentViewId: null,
},
bottomRight: {
views: [
...prev.bottomRight.views.filter(
(view) =>
view.id !== DefaultEditorViewIDs.MAIN_INPUT &&
view.id !== DefaultEditorViewIDs.MAIN_OUTPUT,
),
{
id: DefaultEditorViewIDs.MAIN_INPUT,
title: "Input",
Expand Down
Loading
Loading