Boxes for Marton's chatbot flow. Visual tweaks.

server/ops.py

@@ -9,6 +9,7 @@ import typing
 
 ALL_OPS = {}
 PARAM_TYPE = type[typing.Any]
+typeof = type # We have some arguments called "type".
 
 @dataclasses.dataclass
 class Parameter:
@@ -18,8 +19,13 @@ class Parameter:
   type: PARAM_TYPE = None
 
   @staticmethod
-  def options(name, options):
-    return Parameter(name, options[0], enum.Enum(f'OptionsFor{name}', options))
+  def options(name, options, default=None):
+    e = enum.Enum(f'OptionsFor_{name}', options)
+    return Parameter(name, e[default or options[0]], e)
+
+  @staticmethod
+  def collapsed(name, default, type=None):
+    return Parameter(name, default, ('collapsed', type or typeof(default)))
 
   def __post_init__(self):
     if self.default is inspect._empty:
@@ -27,13 +33,16 @@ class Parameter:
     if self.type is None or self.type is inspect._empty:
       self.type = type(self.default)
   def to_json(self):
+    t = str(self.type)
+    default = self.default
     if isinstance(self.type, type) and issubclass(self.type, enum.Enum):
       t = {'enum': list(self.type.__members__.keys())}
-    else:
-      t = str(self.type)
+      default = self.default.name if self.default else t['enum'][0]
+    if isinstance(self.type, tuple) and self.type[0] == 'collapsed':
+      t = {'collapsed': str(self.type[1])}
     return {
       'name': self.name,
-      'default': self.default,
+      'default': default,
       'type': t,
     }
 

web/src/LynxKiteNode.svelte

@@ -38,7 +38,8 @@
   <div class="lynxkite-node" style={nodeStyle}>
     <div class="title" on:click={titleClicked}>
       {data.title}
-      {#if data.error}<span class="error-sign">⚠️</span>{/if}
+      {#if data.error}<span class="title-icon">⚠️</span>{/if}
+      {#if !expanded}<span class="title-icon">⋯</span>{/if}
     </div>
     {#if expanded}
       {#if data.error}
@@ -49,12 +50,16 @@
     {#each inputs as [name, input], i}
       <Handle
         id={name} type="target" position={targetPosition || 'left'}
-        style="{handleOffsetDirection[targetPosition || 'left']}: {100 * (i + 1) / (inputs.length + 1)}%" />
+        style="{handleOffsetDirection[targetPosition || 'left']}: {100 * (i + 1) / (inputs.length + 1)}%">
+        {#if inputs.length>1}<span class="handle-name">{name.replace("_", " ")}</span>{/if}
+      </Handle>
     {/each}
     {#each outputs as [name, output], i}
       <Handle
         id={name} type="source" position={sourcePosition || 'right'}
-        style="{handleOffsetDirection[sourcePosition || 'right']}: {100 * (i + 1) / (outputs.length + 1)}%" />
+        style="{handleOffsetDirection[sourcePosition || 'right']}: {100 * (i + 1) / (outputs.length + 1)}%">
+        {#if outputs.length>1}<span class="handle-name">{name.replace("_", " ")}</span>{/if}
+      </Handle>
     {/each}
   </div>
 </div>
@@ -65,7 +70,7 @@
     padding: 8px;
     font-size: 12px;
   }
-  .error-sign {
+  .title-icon {
     float: right;
   }
   .node-container {
@@ -86,4 +91,24 @@
     font-weight: bold;
     padding: 8px;
   }
+  .handle-name {
+    font-size: 12px;
+    color: #840;
+    text-align: right;
+    white-space: nowrap;
+    position: absolute;
+    top: -5px;
+    -webkit-text-stroke: 5px white;
+    paint-order: stroke fill;
+    visibility: hidden;
+  }
+  :global(.left) .handle-name {
+    right: 15px;
+  }
+  :global(.right) .handle-name {
+    left: 15px;
+  }
+  .node-container:hover .handle-name {
+    visibility: visible;
+  }
 </style>

web/src/NodeParameter.svelte

@@ -7,8 +7,12 @@
 
 <div class="param">
   <label>
-    {name}<br>
-    {#if meta?.type?.enum}
+    <span class="param-name">{name.replace('_', ' ')}</span>
+    {#if meta?.type?.collapsed}
+      <button class="collapsed-param">
+        ⋯
+      </button>
+    {:else if meta?.type?.enum}
       <select
         value={value}
         on:change={(evt) => onChange(evt.currentTarget.value)}
@@ -28,14 +32,31 @@
 
 <style>
   .param {
-    padding: 8px;
+    padding: 0 8px 8px 8px;
   }
   .param label {
     font-size: 12px;
     display: block;
   }
-  .param input,
-  .param select {
+  .param-name {
+    color: #840;
+  }
+  .param input {
     width: calc(100% - 8px);
   }
+  .param select {
+    width: 100%;
+  }
+  .param input,
+  .param select,
+  .param button {
+      border: 1px solid #840;
+      border-radius: 4px;
+  }
+  .collapsed-param {
+    width: 100%;
+    font-family: auto;
+    font-size: 200%;
+    line-height: 0.5;
+  }
 </style>

web/src/NodeWithArea.svelte

@@ -5,7 +5,6 @@
 
   type $$Props = NodeProps;
 
-  export let nodeStyle = '';
   export let containerStyle = '';
   export let id: $$Props['id']; id;
   export let data: $$Props['data'];