@tari-project/tari-extension-query-builder 0.0.4

package/src/components/query-builder/input/call-input-select.tsx

@@ -0,0 +1,87 @@
+import CallInput, { CallInputProps } from "./call-input";
+import { useState } from "react";
+import { SafeParseReturnType } from "zod";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { EditableLabelProps } from "../nodes/input/editable-label";
+
+type CallInputSelectProps = {
+  readOnly?: boolean;
+  choices: string[];
+  hasIncomingConnection?: boolean;
+  validate?: (data: string) => SafeParseReturnType<unknown, unknown>;
+  value?: SafeParseReturnType<unknown, unknown>;
+  onChange?: (value: SafeParseReturnType<unknown, unknown>) => void;
+} & Omit<CallInputProps, "children"> &
+  Omit<EditableLabelProps, "initialLabel">;
+
+function CallInputSelect({
+  readOnly = false,
+  name,
+  label,
+  labelWidth,
+  choices,
+  hasIncomingConnection,
+  validate,
+  value,
+  onChange,
+  isValidLabel,
+  onLabelChange,
+  onRemove,
+}: CallInputSelectProps) {
+  const [selectedValue, setSelectedValue] = useState(value?.success ? (value.data as string) : "");
+  const errorMessage = !value?.success ? value?.error.errors[0].message : undefined;
+  const isValid = !!hasIncomingConnection || (!errorMessage && selectedValue.length);
+
+  const handleChange = (value: string) => {
+    setSelectedValue(value);
+    if (validate && onChange) {
+      const result = validate(value);
+      onChange(result);
+    }
+  };
+
+  return (
+    <CallInput
+      name={name}
+      label={label}
+      labelWidth={labelWidth}
+      invalid={!isValid}
+      isValidLabel={isValidLabel}
+      onLabelChange={onLabelChange}
+      onRemove={onRemove}
+    >
+      <TooltipProvider>
+        <Tooltip open={!!errorMessage}>
+          <TooltipTrigger asChild>
+            <Select disabled={readOnly} name={name} value={selectedValue} onValueChange={handleChange}>
+              <SelectTrigger
+                className={cn(
+                  "nodrag w-full border",
+                  errorMessage
+                    ? "border-red-500 focus:border-red-500 focus:ring-red-500 !ring-red-500"
+                    : "border-gray-400 dark:border-gray-700",
+                )}
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {choices.map((choice) => (
+                  <SelectItem key={choice} value={choice}>
+                    {choice}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </TooltipTrigger>
+          <TooltipContent side="right" align="start" className="bg-red-500 text-white ml-5 p-2 rounded-md shadow-lg">
+            {errorMessage}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </CallInput>
+  );
+}
+
+export default CallInputSelect;

package/src/components/query-builder/input/call-input-text.tsx

@@ -0,0 +1,98 @@
+import { Input } from "@/components/ui/input";
+import CallInput, { CallInputProps } from "./call-input";
+import { ChangeEvent, HTMLInputTypeAttribute, SyntheticEvent, useState } from "react";
+import { SafeParseReturnType } from "zod";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip";
+import { cn } from "@/lib/utils";
+import { EditableLabelProps } from "../nodes/input/editable-label";
+
+type CallInputTextProps = {
+  readOnly?: boolean;
+  type?: HTMLInputTypeAttribute;
+  placeHolder?: string;
+  min?: string;
+  max?: string;
+  hasIncomingConnection?: boolean;
+  validate?: (data: string) => SafeParseReturnType<unknown, unknown>;
+  value?: SafeParseReturnType<unknown, unknown>;
+  onChange?: (value: SafeParseReturnType<unknown, unknown>) => void;
+} & Omit<CallInputProps, "children"> &
+  Omit<EditableLabelProps, "initialLabel">;
+
+function CallInputText({
+  readOnly = false,
+  name,
+  label,
+  labelWidth,
+  placeHolder,
+  type,
+  min,
+  max,
+  hasIncomingConnection,
+  validate,
+  value,
+  onChange,
+  rowHeight,
+  isValidLabel,
+  onLabelChange,
+  onRemove,
+}: CallInputTextProps) {
+  const [text, setText] = useState(value?.success ? String(value.data) : "");
+  const errorMessage = !value?.success ? value?.error.errors[0].message : undefined;
+  const isValid = !!hasIncomingConnection || (!errorMessage && text.length);
+
+  const handleOnInput = (event: SyntheticEvent<HTMLInputElement>) => {
+    const inputElement = event.target as HTMLInputElement;
+    setText(inputElement.value);
+  };
+
+  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (validate && onChange) {
+      const result = validate(event.target.value);
+      onChange(result);
+    }
+  };
+
+  return (
+    <CallInput
+      name={name}
+      label={label}
+      labelWidth={labelWidth}
+      rowHeight={rowHeight}
+      invalid={!isValid}
+      isValidLabel={isValidLabel}
+      onLabelChange={onLabelChange}
+      onRemove={onRemove}
+    >
+      <TooltipProvider>
+        <Tooltip open={!!errorMessage}>
+          <TooltipTrigger asChild>
+            <Input
+              readOnly={readOnly}
+              name={name}
+              type={type}
+              autoComplete="off"
+              placeholder={placeHolder}
+              className={cn(
+                "nodrag border",
+                errorMessage
+                  ? "border-red-500 focus:border-red-500 focus:ring-red-500 !ring-red-500"
+                  : "border-gray-400 dark:border-gray-700",
+              )}
+              min={min}
+              max={max}
+              value={text}
+              onInput={handleOnInput}
+              onChange={handleOnChange}
+            />
+          </TooltipTrigger>
+          <TooltipContent side="right" align="start" className="bg-red-500 text-white ml-5 p-2 rounded-md shadow-lg">
+            {errorMessage}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </CallInput>
+  );
+}
+
+export default CallInputText;

package/src/components/query-builder/input/call-input.tsx

@@ -0,0 +1,51 @@
+import { Label } from "@/components/ui/label";
+import { DotIcon } from "@radix-ui/react-icons";
+import EditableLabel, { EditableLabelProps } from "../nodes/input/editable-label";
+
+export type CallInputProps = {
+  name: string;
+  label?: string;
+  labelWidth?: string;
+  labelEditable?: boolean;
+  rowHeight?: string;
+  invalid?: boolean;
+  children: React.ReactNode;
+} & Omit<EditableLabelProps, "initialLabel">;
+
+function CallInput({
+  name,
+  label,
+  labelWidth = "160px",
+  rowHeight = "36px",
+  invalid,
+  children,
+  isValidLabel,
+  onLabelChange,
+  onRemove,
+}: CallInputProps) {
+  return (
+    <div className="flex items-center mt-1" style={{ height: rowHeight }}>
+      {name && (
+        <Label
+          htmlFor={name}
+          style={{
+            display: "inline-block",
+            textAlign: "right",
+            width: labelWidth,
+          }}
+        >
+          <DotIcon className={`inline-block mr-1 text-red-500 ${invalid ? "opacity-100" : "opacity-0"}`} />
+          <EditableLabel
+            initialLabel={label ?? name}
+            isValidLabel={isValidLabel}
+            onLabelChange={onLabelChange}
+            onRemove={onRemove}
+          />
+        </Label>
+      )}
+      <div className={name ? "ml-2 w-[64ch]" : "w-full"}>{children}</div>
+    </div>
+  );
+}
+
+export default CallInput;

package/src/components/query-builder/nodes/call-node.types.ts

@@ -0,0 +1,3 @@
+export const CALL_NODE_RETURN = "__CALL_NODE_RETURN__";
+export const CALL_NODE_RETURN_TUPLE_1 = "__CALL_NODE_RETURN_TUPLE_1__";
+export const CALL_NODE_RETURN_TUPLE_2 = "__CALL_NODE_RETURN_TUPLE_2__";

package/src/components/query-builder/nodes/constants.ts

@@ -0,0 +1,4 @@
+export const ROW_PADDING = 4;
+export const ROW_HEIGHT = 36;
+export const OUTPUT_HEIGHT = 28;
+export const ROW_HEIGHT_PX = `${ROW_HEIGHT.toString()}px`;

package/src/components/query-builder/nodes/enter-connection.tsx

@@ -0,0 +1,16 @@
+import { Handle, Position } from "@xyflow/react";
+import { NODE_ENTRY } from "./generic-node.types";
+
+function EnterConnection() {
+  return (
+    <Handle
+      id={NODE_ENTRY}
+      type="target"
+      position={Position.Left}
+      className="enter-connection"
+      style={{ top: "20px" }}
+    />
+  );
+}
+
+export default EnterConnection;

package/src/components/query-builder/nodes/exit-connection.tsx

@@ -0,0 +1,16 @@
+import { Handle, Position } from "@xyflow/react";
+import { NODE_EXIT } from "./generic-node.types";
+
+function ExitConnection() {
+  return (
+    <Handle
+      id={NODE_EXIT}
+      type="source"
+      position={Position.Right}
+      className="exit-connection"
+      style={{ top: "20px" }}
+    />
+  );
+}
+
+export default ExitConnection;

package/src/components/query-builder/nodes/generic/generic-node.tsx

@@ -0,0 +1,252 @@
+import { Handle, NodeProps, Position } from "@xyflow/react";
+import { TrashIcon } from "@radix-ui/react-icons";
+import { Button } from "@/components/ui/button";
+import useStore from "@/store/store";
+import { InputConnectionType, NodeType, type GenericNode } from "@/store/types";
+import ExitConnection from "../exit-connection";
+import EnterConnection from "../enter-connection";
+import NodeIcon from "./node-icon";
+import { Badge } from "@/components/ui/badge";
+import { InputControlType, TariType } from "@/query-builder/tari-type";
+import CallInputText from "../../input/call-input-text";
+import { OUTPUT_HEIGHT, ROW_HEIGHT, ROW_HEIGHT_PX, ROW_PADDING } from "../constants";
+import CallInputCheckbox from "../../input/call-input-checkbox";
+import { Separator } from "@/components/ui/separator";
+import { CALL_NODE_RETURN, CALL_NODE_RETURN_TUPLE_1, CALL_NODE_RETURN_TUPLE_2 } from "../call-node.types";
+import { useCallback } from "react";
+import { SafeParseReturnType, z } from "zod";
+import CallInputSelect from "../../input/call-input-select";
+import { Label } from "@/components/ui/label";
+
+const HANDLE_STARTING_OFFSET = 68;
+const FULL_ROW_HEIGHT = ROW_HEIGHT + ROW_PADDING;
+
+function GenericNode(props: NodeProps<GenericNode>) {
+  const { id, data } = props;
+  const { hasEnterConnection, hasExitConnection, icon, badge, title, largeCaption, inputs, output } = data;
+
+  const removeNode = useStore((store) => store.removeNode);
+  const readOnly = useStore((store) => store.readOnly);
+  const getNodeById = useStore((store) => store.getNodeById);
+  const updateNodeArgValue = useStore((store) => store.updateNodeArgValue);
+  const edges = useStore((store) => store.edges);
+
+  const outputType = output ? new TariType(output.type) : undefined;
+
+  const getOutputOffset = (idx = 0) => {
+    const offset = HANDLE_STARTING_OFFSET + FULL_ROW_HEIGHT * (inputs ? inputs.length : 0) + 25 + idx * OUTPUT_HEIGHT;
+    return `${offset.toString()}px`;
+  };
+
+  const getNodeValue = useCallback(
+    (name: string) => {
+      const node = getNodeById(id);
+      if (!node || node.type !== NodeType.GenericNode || !node.data.values) {
+        return undefined;
+      }
+      return node.data.values[name];
+    },
+    [id, getNodeById],
+  );
+  const hasConnection = useCallback(
+    (handle: string) => edges.some((edge) => edge.target === id && edge.targetHandle === handle),
+    [id, edges],
+  );
+
+  const handleOnChange = (argName: string, value: SafeParseReturnType<unknown, unknown>) => {
+    updateNodeArgValue(id, argName, value);
+  };
+
+  return (
+    <>
+      {hasEnterConnection && <EnterConnection />}
+      {hasExitConnection && <ExitConnection />}
+      {(!!icon || !!badge) && (
+        <div className="absolute top-3 left-3 flex items-center">
+          {icon && <NodeIcon icon={icon} className="h-5 w-5 mr-1" />}
+          {badge && <Badge>{badge}</Badge>}
+        </div>
+      )}
+      <div className="absolute top-1 right-2 nodrag nopan">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => {
+            removeNode(id);
+          }}
+        >
+          <TrashIcon className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {largeCaption && <Label className="text-4xl font-bold p-8 font-stretch-expanded">{largeCaption}</Label>}
+
+      {inputs?.map((input, idx) => {
+        switch (input.inputConnectionType) {
+          case InputConnectionType.Parameter:
+            return (
+              <Handle
+                key={input.name}
+                id={input.name}
+                type="target"
+                position={Position.Left}
+                style={{
+                  border: "2px solid green",
+                  top: `${(HANDLE_STARTING_OFFSET + idx * FULL_ROW_HEIGHT).toString()}px`,
+                }}
+              />
+            );
+          case InputConnectionType.ComponentAddress:
+            return (
+              <Handle
+                key={input.name}
+                id={input.name}
+                type="target"
+                position={Position.Left}
+                style={{
+                  border: "2px solid orange",
+                  top: `${(HANDLE_STARTING_OFFSET + idx * FULL_ROW_HEIGHT).toString()}px`,
+                }}
+              />
+            );
+        }
+      })}
+
+      {title && <h3 className="text-center font-bold pt-1 pb-3 border-b">{title}</h3>}
+
+      {inputs && (
+        <form noValidate>
+          {inputs.map((input) => {
+            const type = new TariType(input.type);
+            switch (type.getInputControlType()) {
+              case InputControlType.TextBoxInput: {
+                return input.validValues ? (
+                  <CallInputSelect
+                    readOnly={readOnly}
+                    key={input.name}
+                    name={input.name}
+                    label={input.label}
+                    choices={[...input.validValues]}
+                    validate={(data) => {
+                      const validValues = input.validValues;
+                      if (!validValues) {
+                        return {
+                          success: true,
+                          data: undefined,
+                        };
+                      }
+                      return z
+                        .string()
+                        .refine((val) => validValues.includes(val), {
+                          message: `Invalid value. Must be one of: ${validValues.join(", ")}`,
+                        })
+                        .safeParse(data);
+                    }}
+                    value={getNodeValue(input.name)}
+                    onChange={(value) => {
+                      handleOnChange(input.name, value);
+                    }}
+                    rowHeight={ROW_HEIGHT_PX}
+                  />
+                ) : (
+                  <CallInputText
+                    readOnly={readOnly}
+                    key={input.name}
+                    name={input.name}
+                    label={input.label}
+                    placeHolder={type.prompt}
+                    type={type.inputType}
+                    min={type.min?.toString()}
+                    max={type.max?.toString()}
+                    hasIncomingConnection={hasConnection(input.name)}
+                    validate={(data) => type.validate(data)}
+                    value={getNodeValue(input.name)}
+                    onChange={(value) => {
+                      handleOnChange(input.name, value);
+                    }}
+                    rowHeight={ROW_HEIGHT_PX}
+                  />
+                );
+              }
+              case InputControlType.CheckBoxInput:
+                return (
+                  <CallInputCheckbox
+                    readOnly={readOnly}
+                    key={input.name}
+                    name={input.name}
+                    label={input.label}
+                    value={getNodeValue(input.name)}
+                    onChange={(value) => {
+                      handleOnChange(input.name, value);
+                    }}
+                    rowHeight={ROW_HEIGHT_PX}
+                  />
+                );
+            }
+          })}
+        </form>
+      )}
+
+      {outputType && renderOutputs(outputType, getOutputOffset)}
+    </>
+  );
+}
+
+function renderOutputPrompt(outputType: TariType) {
+  return (
+    <div className="flex justify-end w-full">
+      <span className="font-semibold text-lg pr-2">{outputType.prompt}</span>
+    </div>
+  );
+}
+
+function renderOutputs(outputType: TariType, getOutputOffset: (idx: number) => string) {
+  const [tuple1, tuple2] = outputType.getTupleDetails();
+  return (
+    <>
+      <Separator className="my-4 h-px w-full bg-gray-300 dark:bg-gray-600" />
+      {renderOutputPrompt(outputType)}
+      {!outputType.isVoid() && (
+        <Handle
+          id={CALL_NODE_RETURN}
+          type="source"
+          position={Position.Right}
+          style={{
+            border: "2px solid #608bb9",
+            top: getOutputOffset(0),
+          }}
+        />
+      )}
+      {tuple1 && (
+        <>
+          {renderOutputPrompt(tuple1)}
+          <Handle
+            id={CALL_NODE_RETURN_TUPLE_1}
+            type="source"
+            position={Position.Right}
+            style={{
+              border: "2px solid #49698c",
+              top: getOutputOffset(1),
+            }}
+          />
+        </>
+      )}
+      {tuple2 && (
+        <>
+          {renderOutputPrompt(tuple2)}
+          <Handle
+            id={CALL_NODE_RETURN_TUPLE_2}
+            type="source"
+            position={Position.Right}
+            style={{
+              border: "2px solid #49698c",
+              top: getOutputOffset(2),
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+export default GenericNode;

package/src/components/query-builder/nodes/generic/node-icon.tsx

@@ -0,0 +1,37 @@
+import { GenericNodeIcon } from "@/store/types";
+import {
+  ArchiveIcon,
+  CheckCircledIcon,
+  Component1Icon,
+  CubeIcon,
+  EnterIcon,
+  HomeIcon,
+  RocketIcon,
+} from "@radix-ui/react-icons";
+
+interface NodeIconProps {
+  icon: GenericNodeIcon;
+  className: string;
+}
+
+function NodeIcon(props: NodeIconProps) {
+  const { icon, className } = props;
+  switch (icon) {
+    case "enter":
+      return <EnterIcon className={className} />;
+    case "rocket":
+      return <RocketIcon className={className} />;
+    case "home":
+      return <HomeIcon className={className} />;
+    case "cube":
+      return <CubeIcon className={className} />;
+    case "check-circled":
+      return <CheckCircledIcon className={className} />;
+    case "archive":
+      return <ArchiveIcon className={className} />;
+    case "component":
+      return <Component1Icon className={className} />;
+  }
+}
+
+export default NodeIcon;

package/src/components/query-builder/nodes/generic-node.types.ts

@@ -0,0 +1,5 @@
+export const NODE_ENTRY = "__NODE_ENTRY__";
+export const NODE_EXIT = "__NODE_EXIT__";
+export const COMPONENT_ADDRESS_ENTRY = "__COMPONENT_ADDRESS_ENTRY__";
+export const ALLOCATE_COMPONENT_ADDRESS_RESULT = "__ALLOCATE_COMPONENT_ADDRESS_RESULT__";
+export const ALLOCATE_RESOURCE_ADDRESS_RESULT = "__ALLOCATE_RESOURCE_ADDRESS_RESULT__";

package/src/components/query-builder/nodes/input/constants.ts

@@ -0,0 +1 @@
+export const NEW_INPUT_PARAM = "__NEW_INPUT_PARAM__";