Imperfect tooltip for parameters.

lynxkite-app/web/src/index.css

@@ -205,6 +205,13 @@ body {
       display: block;
     }
 
+    .param-name-row {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: end;
+    }
+
     .param-name {
       display: block;
       font-size: 10px;

lynxkite-app/web/src/workspace/nodes/LynxKiteNode.tsx

@@ -1,7 +1,6 @@
 import { Handle, NodeResizeControl, type Position, useReactFlow } from "@xyflow/react";
 import type React from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import Markdown from "react-markdown";
 // @ts-ignore
 import AlertTriangle from "~icons/tabler/alert-triangle-filled.jsx";
 // @ts-ignore
@@ -9,9 +8,10 @@ import ChevronDownRight from "~icons/tabler/chevron-down-right.jsx";
 // @ts-ignore
 import Dots from "~icons/tabler/dots.jsx";
 // @ts-ignore
-import Help from "~icons/tabler/help.jsx";
+import Help from "~icons/tabler/question-mark.jsx";
 // @ts-ignore
 import Skull from "~icons/tabler/skull.jsx";
+import NodeDocumentation from "./NodeDocumentation";
 
 interface LynxKiteNodeProps {
   id: string;
@@ -100,7 +100,11 @@ function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
               <Dots />
             </span>
           )}
-          <NodeDocumentation doc={data.meta?.value?.doc} width={props.width - 60} />
+          <NodeDocumentation doc={data.meta?.value?.doc} width={props.width - 60}>
+            <button tabIndex={0}>
+              <Help />
+            </button>
+          </NodeDocumentation>
         </div>
         {expanded && (
           <>
@@ -154,19 +158,3 @@ export default function LynxKiteNode(Component: React.ComponentType<any>) {
     );
   };
 }
-
-function NodeDocumentation(props: any) {
-  if (!props.doc) return null;
-  return (
-    <div className="dropdown dropdown-hover dropdown-top dropdown-end title-icon">
-      <button tabIndex={0}>
-        <Help />
-      </button>
-      <div className="node-documentation dropdown-content" style={{ width: props.width }}>
-        {props.doc.map(
-          (section: any) => section.kind === "text" && <Markdown>{section.value}</Markdown>,
-        )}
-      </div>
-    </div>
-  );
-}

lynxkite-app/web/src/workspace/nodes/NodeDocumentation.tsx

@@ -0,0 +1,16 @@
+import Markdown from "react-markdown";
+
+export default function NodeDocumentation(props: any) {
+  if (!props.doc) return null;
+  return (
+    <div className="dropdown dropdown-hover dropdown-top dropdown-end title-icon">
+      {props.children}
+      <div className="node-documentation dropdown-content" style={{ width: props.width }}>
+        {props.doc.map?.(
+          (section: any, i: number) =>
+            section.kind === "text" && <Markdown key={i}>{section.value}</Markdown>,
+        ) ?? <Markdown>{props.doc}</Markdown>}
+      </div>
+    </div>
+  );
+}

lynxkite-app/web/src/workspace/nodes/NodeParameter.tsx

@@ -1,6 +1,9 @@
 import { useRef } from "react";
 // @ts-ignore
 import ArrowsHorizontal from "~icons/tabler/arrows-horizontal.jsx";
+// @ts-ignore
+import Help from "~icons/tabler/question-mark.jsx";
+import NodeDocumentation from "./NodeDocumentation";
 import NodeGroupParameter from "./NodeGroupParameter";
 
 const BOOLEAN = "<class 'bool'>";
@@ -9,8 +12,21 @@ const MODEL_TRAINING_INPUT_MAPPING =
 const MODEL_INFERENCE_INPUT_MAPPING =
   "<class 'lynxkite_graph_analytics.ml_ops.ModelInferenceInputMapping'>";
 const MODEL_OUTPUT_MAPPING = "<class 'lynxkite_graph_analytics.ml_ops.ModelOutputMapping'>";
-function ParamName({ name }: { name: string }) {
-  return <span className="param-name bg-base-200">{name.replace(/_/g, " ")}</span>;
+
+function ParamName({ name, doc }: { name: string; doc: string }) {
+  const help = doc && (
+    <NodeDocumentation doc={doc} width={200}>
+      <button tabIndex={0}>
+        <Help />
+      </button>
+    </NodeDocumentation>
+  );
+  return (
+    <div className="param-name-row">
+      <span className="param-name bg-base-200">{name.replace(/_/g, " ")}</span>
+      {help}
+    </div>
+  );
 }
 
 function Input({
@@ -195,7 +211,20 @@ interface NodeParameterProps {
 
 export type UpdateOptions = { delay?: number };
 
+function findDocs(docs: any, parameter: string) {
+  for (const sec of docs) {
+    if (sec.kind === "parameters") {
+      for (const p of sec.value) {
+        if (p.name === parameter) {
+          return p.description;
+        }
+      }
+    }
+  }
+}
+
 export default function NodeParameter({ name, value, meta, data, setParam }: NodeParameterProps) {
+  const doc = findDocs(data.meta?.value?.doc ?? [], name);
   function onChange(value: any, opts?: UpdateOptions) {
     setParam(meta.name, value, opts || {});
   }
@@ -261,7 +290,7 @@ export default function NodeParameter({ name, value, meta, data, setParam }: Nod
     </label>
   ) : (
     <label className="param">
-      <ParamName name={name} />
+      <ParamName name={name} doc={doc} />
       <Input value={value} onChange={onChange} />
     </label>
   );