OPC UA Read Task Channel Suggestions

.github/PULL_REQUEST_TEMPLATE/rc.md

@@ -170,3 +170,6 @@ I can successfully:
 - [ ] Array Sampling - Auto-generate timestamps on the driver.
 - [ ] Array Sampling - Read timestamps from the OPC UA server.
 - [ ] Array Sampling - The driver will not crash if I specify an improper array size.
+ -[ ] Channel Selection - The read task dialog will recommend synnax channels based on
+      the configured OPC UA node.
+

console/src/hardware/opc/device/Configure.tsx

@@ -190,19 +190,9 @@ export const Configure: Layout.Renderer = ({ onClose }): ReactElement => {
         deviceProperties == null
       )
         return;
-      setProgress("Creating device...");
-      await client.hardware.devices.create({
-        key: uuidv4(),
-        name: methods.get<string>({ path: "name" }).value,
-        model: "opc",
-        make: "opc",
-        rack: rackKey,
-        location: methods.get<string>({ path: "connection.endpoint" }).value,
-        properties: deviceProperties,
-        configured: true,
-      });
       setProgress("Creating channels...");
       const groups = methods.get<GroupConfig[]>({ path: "groups" }).value;
+      const mapped = new Map<string, number>();
       for (const group of groups) {
         // find the index channel
         const idxBase = group.channels.find((c) => c.isIndex);
@@ -212,17 +202,37 @@ export const Configure: Layout.Renderer = ({ onClose }): ReactElement => {
           isIndex: true,
           dataType: DataType.TIMESTAMP.toString(),
         });
+        mapped.set(idxBase.nodeId, idx.key);
         setProgress(`Creating channels for ${group.name}...`);
-        await client.channels.create(
-          group.channels
-            .filter((c) => !c.isIndex)
-            .map((c) => ({
-              name: c.name,
-              dataType: new DataType(c.dataType).toString(),
-              index: idx.key,
-            })),
+        const toCreate = group.channels.filter((c) => !c.isIndex);
+        const channels = await client.channels.create(
+          toCreate.map((c) => ({
+            name: c.name,
+            dataType: new DataType(c.dataType).toString(),
+            index: idx.key,
+          })),
         );
+        channels.forEach((c, i) => {
+          const nodeId = toCreate[i].nodeId;
+          if (nodeId != null) mapped.set(nodeId, c.key);
+        });
       }
+      setProgress("Creating device...");
+      deviceProperties.channels.forEach((c) => {
+        const synnaxChannel = mapped.get(c.nodeId);
+        if (synnaxChannel == null) return;
+        c.synnaxChannel = synnaxChannel;
+      });
+      await client.hardware.devices.create({
+        key: uuidv4(),
+        name: methods.get<string>({ path: "name" }).value,
+        model: "opc",
+        make: "opc",
+        rack: rackKey,
+        location: methods.get<string>({ path: "connection.endpoint" }).value,
+        properties: deviceProperties,
+        configured: true,
+      });
     },
   });
 

console/src/hardware/opc/device/types.ts

@@ -47,6 +47,7 @@ export const nodeProperties = z.object({
   name: z.string(),
   nodeId: z.string(),
   isArray: z.boolean(),
+  synnaxChannel: z.number().optional(),
 });
 
 export type NodeProperties = z.infer<typeof nodeProperties>;

console/src/hardware/opc/task/ReadTask.tsx

@@ -9,7 +9,7 @@
 
 import "@/hardware/opc/task/ReadTask.css";
 
-import { device, type task } from "@synnaxlabs/client";
+import { channel, device, type task } from "@synnaxlabs/client";
 import { Icon } from "@synnaxlabs/media";
 import {
   Align,
@@ -137,10 +137,15 @@ const Internal = ({ initialValues, task: pTask }: InternalProps): ReactElement =
     [client?.key, device?.key],
   );
 
-  const methods = Form.use({
-    schema,
-    values: initialValues,
-  });
+  const methods = Form.use({ schema, values: initialValues });
+
+  useAsyncEffect(async () => {
+    if (client == null) return;
+    const dev = methods.value().config.device;
+    if (dev === "") return;
+    const d = await client.hardware.devices.retrieve<Device.Properties>(dev);
+    setDevice(d);
+  }, [client?.key]);
 
   Form.useFieldListener<string, typeof schema>({
     ctx: methods,
@@ -253,7 +258,11 @@ const Internal = ({ initialValues, task: pTask }: InternalProps): ReactElement =
               </Header.Header>
               <Align.Space direction="y" className={CSS.B("channel-form-content")} grow>
                 {selectedChannelIndex != null && (
-                  <ChannelForm selectedChannelIndex={selectedChannelIndex} />
+                  <ChannelForm
+                    key={selectedChannelIndex}
+                    deviceProperties={device?.properties}
+                    selectedChannelIndex={selectedChannelIndex}
+                  />
                 )}
               </Align.Space>
             </Align.Space>
@@ -456,19 +465,66 @@ export const ChannelListItem = ({
 
 interface ChannelFormProps {
   selectedChannelIndex: number;
+  deviceProperties?: Device.Properties;
 }
 
-const ChannelForm = ({ selectedChannelIndex }: ChannelFormProps): ReactElement => {
+const ChannelForm = ({
+  selectedChannelIndex,
+  deviceProperties,
+}: ChannelFormProps): ReactElement => {
   const prefix = `config.channels.${selectedChannelIndex}`;
   const dev = Form.useField<string>({ path: "config.device" }).value;
+  const channelPath = `${prefix}.channel`;
+  const channelValue = Form.useFieldValue<number>(channelPath);
+  const [channelRec, setChannelRec] = useState<channel.Key>(0);
+  const channelRecName = Channel.useName(channelRec, "");
+  const ctx = Form.useContext();
   return (
     <>
-      <Form.Field<number> path={`${prefix}.channel`} label="Synnax Channel" hideIfNull>
-        {(p) => <Channel.SelectSingle allowNone={false} {...p} />}
-      </Form.Field>
-      <Form.Field<string> path={`${prefix}.nodeId`} label="OPC Node" hideIfNull>
+      <Form.Field<string>
+        path={`${prefix}.nodeId`}
+        label="OPC Node"
+        onChange={(v) => {
+          if (deviceProperties == null) return;
+          const defaultChan = deviceProperties.channels.find(
+            (c) => c.nodeId === v,
+          )?.synnaxChannel;
+          if (defaultChan != null) setChannelRec(defaultChan);
+        }}
+        hideIfNull
+      >
         {(p) => <SelectNodeRemote allowNone={false} device={dev} {...p} />}
       </Form.Field>
+      <Form.Field<number>
+        path={channelPath}
+        label="Synnax Channel"
+        hideIfNull
+        padHelpText={false}
+      >
+        {(p) => <Channel.SelectSingle allowNone={false} {...p} />}
+      </Form.Field>
+      {channelRecName.length > 0 && channelValue !== channelRec && (
+        <Align.Space direction="x" size="small">
+          <Button.Icon
+            variant="text"
+            size="small"
+            onClick={() => ctx.set({ path: channelPath, value: channelRec })}
+            tooltip={"Apply recommended channel"}
+          >
+            <Icon.Bolt style={{ color: "var(--pluto-gray-l6)" }} />
+          </Button.Icon>
+          <Button.Button
+            variant="suggestion"
+            size="small"
+            style={{ width: "fit-content" }}
+            startIcon={<Icon.Channel />}
+            onClick={() => ctx.set({ path: channelPath, value: channelRec })}
+            tooltip={"Apply recommended channel"}
+          >
+            {channelRecName}
+          </Button.Button>
+        </Align.Space>
+      )}
     </>
   );
 };

pluto/src/button/Button.css

@@ -87,6 +87,30 @@
     }
 }
 
+/** |||| SUGGESTION |||| */
+
+.pluto-btn--suggestion {
+    background: none;
+    border: var(--pluto-border);
+    border-color: var(--pluto-gray-l5);
+    border-style: dashed;
+    filter: opacity(0.85);
+
+    &:hover:not(.pluto--disabled) {
+        background: var(--pluto-gray-l2);
+        border-color: var(--pluto-gray-l5-90);
+    }
+
+    &:active:not(.pluto--disabled) {
+        background: var(--pluto-gray-l3);
+        border-color: var(--pluto-gray-l6);
+    }
+
+    &.pluto--disabled {
+        color: var(--pluto-gray-l5);
+    }
+}
+
 /* |||| ICON |||| */
 
 .pluto-btn-icon {

pluto/src/button/Button.tsx

@@ -22,7 +22,7 @@ import { Tooltip } from "@/tooltip";
 import { type ComponentSize } from "@/util/component";
 
 /** The variant of button */
-export type Variant = "filled" | "outlined" | "text";
+export type Variant = "filled" | "outlined" | "text" | "suggestion";
 
 export interface ButtonExtensionProps {
   variant?: Variant;