Hide visualization parameters by default.

lynxkite-app/web/src/index.css

@@ -242,6 +242,20 @@ body {
   }
 }
 
+.params-expander {
+  font-size: 15px;
+  padding: 4px;
+  color: #000a;
+}
+
+.flippy {
+  transition: transform 0.5s;
+}
+
+.flippy.flippy-90 {
+  transform: rotate(-90deg);
+}
+
 .directory {
   .entry-list {
     width: 100%;

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

@@ -1,4 +1,7 @@
 import { useReactFlow } from "@xyflow/react";
+import React from "react";
+// @ts-ignore
+import Triangle from "~icons/tabler/triangle-inverted-filled.jsx";
 import LynxKiteNode from "./LynxKiteNode";
 import NodeGroupParameter from "./NodeGroupParameter";
 import NodeParameter from "./NodeParameter";
@@ -8,6 +11,7 @@ export type UpdateOptions = { delay?: number };
 function NodeWithParams(props: any) {
   const reactFlow = useReactFlow();
   const metaParams = props.data.meta?.params;
+  const [collapsed, setCollapsed] = React.useState(props.collapsed);
 
   function setParam(name: string, newValue: any, opts: UpdateOptions) {
     reactFlow.updateNodeData(props.id, (prevData: any) => ({
@@ -31,31 +35,40 @@ function NodeWithParams(props: any) {
 
   return (
     <LynxKiteNode {...props}>
-      {params.map(([name, value]) =>
-        metaParams?.[name]?.type === "group" ? (
-          <NodeGroupParameter
-            key={name}
-            value={value}
-            meta={metaParams?.[name]}
-            setParam={(name: string, value: any, opts?: UpdateOptions) =>
-              setParam(name, value, opts || {})
-            }
-            deleteParam={(name: string, opts?: UpdateOptions) =>
-              deleteParam(name, opts || {})
-            }
-          />
-        ) : (
-          <NodeParameter
-            name={name}
-            key={name}
-            value={value}
-            meta={metaParams?.[name]}
-            onChange={(value: any, opts?: UpdateOptions) =>
-              setParam(name, value, opts || {})
-            }
-          />
-        ),
+      {props.collapsed && (
+        <div
+          className="params-expander"
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          <Triangle className={`flippy ${collapsed ? "flippy-90" : ""}`} />
+        </div>
       )}
+      {!collapsed &&
+        params.map(([name, value]) =>
+          metaParams?.[name]?.type === "group" ? (
+            <NodeGroupParameter
+              key={name}
+              value={value}
+              meta={metaParams?.[name]}
+              setParam={(name: string, value: any, opts?: UpdateOptions) =>
+                setParam(name, value, opts || {})
+              }
+              deleteParam={(name: string, opts?: UpdateOptions) =>
+                deleteParam(name, opts || {})
+              }
+            />
+          ) : (
+            <NodeParameter
+              name={name}
+              key={name}
+              value={value}
+              meta={metaParams?.[name]}
+              onChange={(value: any, opts?: UpdateOptions) =>
+                setParam(name, value, opts || {})
+              }
+            />
+          ),
+        )}
       {props.children}
     </LynxKiteNode>
   );

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

@@ -22,7 +22,7 @@ const NodeWithVisualization = (props: any) => {
     };
   }, [props.data?.display?.value]);
   return (
-    <NodeWithParams {...props}>
+    <NodeWithParams collapsed {...props}>
       <div className="box" draggable={false} ref={chartsRef} />
     </NodeWithParams>
   );