feat: implement a new parameter type "StringList"

packages/core/src/InputObserverController.ts

@@ -48,6 +48,9 @@ export class InputObserverController {
 
   // The current requirement only needs to retain 'BUSY' and 'COMPLETE' in NodeStatus.
   async reportNodeStatus(nodeId: NodeId, status: NodeStatus): Promise<void> {
+    if (status === 'AVAILABLE') {
+      return;
+    }
     await this.storage.setNodeStatus(nodeId, status);
     this.nodeStatus$.next({nodeId, status});
   }

packages/core/src/ItemWithParams/ParamEvaluator.ts

@@ -4,12 +4,14 @@ import { StringableParamEvaluator } from './StringableParamEvaluator';
 import { ParamsValueEvaluator } from '../types/ParamsValueEvaluator';
 import { RepeatableParamEvaluator } from './RepeatableParamEvaluator';
 import { SelectableParamEvaluator } from './SelectableParamEvaluator';
+import { StringListParamEvaluator } from './StringListParamEvaluator';
 
 export class ParamEvaluator implements ParamsValueEvaluator<any>{
   private evaluators: ParamsValueEvaluator<Param>[] = [
     new StringableParamEvaluator(),
     new SelectableParamEvaluator(),
     new RepeatableParamEvaluator(this),
+    new StringListParamEvaluator(),
   ]
 
   canEvaluate(param: Param): param is Param {

packages/core/src/ItemWithParams/StringListParamEvaluator.ts

@@ -0,0 +1,17 @@
+import { Param, StringableParam, StringListParam } from '../Param';
+import { ItemValue } from '../types/ItemValue';
+import { ParamsValueEvaluator } from '../types/ParamsValueEvaluator';
+
+export class StringListParamEvaluator implements ParamsValueEvaluator<StringListParam> {
+  type = 'StringListParam' as const;
+
+  evaluate(itemValue: ItemValue, param: StringListParam) {
+    const value = param.value as string;
+    const result = value.split(',').map(v => v.trim().toString()).filter(v => v.length > 0);
+    return result;
+  }
+
+  canEvaluate(param: Param): param is StringListParam {
+    return param.type === this.type;
+  }
+}

packages/core/src/Param/Param.ts

@@ -66,12 +66,24 @@ export type RepeatableParam<RepeatableRow> = {
   value: Record<string, unknown>[]
 }
 
+/**
+ * This type can represent ["a", "b", "c"] using 'a, b, c', which facilitates user input
+ * */
+export type StringListParam = {
+  name: string,
+  label: string,
+  help: string,
+  type: 'StringListParam',
+  value: unknown
+}
+
 export type Param =
   SelectParam |
   StringableParam |
   PropertySelectionParam |
   PortSelectionParam |
-  RepeatableParam<Param[]>
+  RepeatableParam<Param[]> |
+  StringListParam;
 
 export type ParamValue = Param['value']
 
@@ -81,6 +93,26 @@ type StringableConfigType = Omit<StringableParam, 'value' | 'type'> & {
   value: StringableInputValue['value']
 }
 
+export const strList = ({
+  name,
+  label,
+  help,
+  value,
+}: {
+  name: string,
+  label?: string,
+  help?: string,
+  value?: unknown,
+}): StringListParam => {
+  return {
+    name,
+    type: 'StringListParam',
+    label: label ?? name,
+    help: help ?? '',
+    value: value ?? undefined,
+  }
+}
+
 export const createDefaultStringable = ({
   name,
   label,

packages/ds-ext/src/DiagramEditorProvider.ts

@@ -104,6 +104,7 @@ export class DiagramEditorProvider implements vscode.CustomEditorProvider<Diagra
         return;
       }
 
+      // @ts-ignore
       const disposable = handler({ postMessage, event, document, inputObserverController: this.inputObserverController });
       if(typeof disposable === 'function' && disposable){
         disposables.push(disposable);

packages/ds-ext/src/MessageHandler.ts

@@ -2,7 +2,7 @@ import { DiagramDocument } from './DiagramDocument';
 import { InputObserverController } from '@data-story/core';
 
 export type MessageHandlerArgs = {
-  postMessage: (msg: any) => Thenable<boolean> | undefined;
+  postMessage: (msg: any) => boolean | undefined;
   event: any;
   document: DiagramDocument,
   inputObserverController: InputObserverController

packages/ui/src/components/DataStory/Form/StringListInput.tsx

@@ -0,0 +1,52 @@
+import { useCallback } from 'react';
+import { FormComponent, FormComponentProps } from '../types';
+import { FormFieldWrapper, useFormField } from './UseFormField';
+import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror';
+import { StringListParam } from '@data-story/core/*';
+
+const basicSetup: BasicSetupOptions = {
+  lineNumbers: false,
+  highlightActiveLineGutter: false,
+  highlightActiveLine: false,
+  foldGutter: false,
+  autocompletion: false,
+};
+
+function StringListInputComponent({
+  param,
+  node,
+}: FormComponentProps) {
+  const { getValues,  setValue} = useFormField();
+
+  const onChange = useCallback((value, viewUpdate) => {
+    setValue(value);
+  }, [setValue]);
+
+  return (<div className="group flex flex-col-reverse bg-gray-50 h-full border-gray-50 border-2">
+    <div className="flex w-full text-gray-500 max-h-64 overflow-y-auto">
+      <CodeMirror
+        className="text-xs h-full w-full bg-white font-mono"
+        value={(getValues() ?? '').toString()}
+        basicSetup={basicSetup}
+        onChange={onChange}
+      />
+    </div>
+  </div>
+  );
+}
+
+export function StringListInput(props: FormComponentProps) {
+  return <FormFieldWrapper fieldName={props.param.name}>
+    <StringListInputComponent {...props} />
+  </FormFieldWrapper>
+}
+
+export class StringListComponent implements FormComponent<StringListParam> {
+  getComponent(params: FormComponentProps) {
+    return (<StringListInput {...params} />)
+  }
+
+  getType() {
+    return 'StringListParam'
+  }
+}

packages/ui/src/components/DataStory/modals/nodeSettingsModal/tabs/Params/Params.tsx

@@ -3,6 +3,7 @@ import { StringableWithConfig } from './StringableWithConfig';
 import { RepeatableWithConfig } from './RepeatableWithConfig';
 import { SelectInput } from '../../../../Form/SelectInput';
 import { FormFieldWrapper } from '../../../../Form/UseFormField';
+import { StringListInput } from '../../../../Form/StringListInput';
 
 export function ParamsComponent({
   node,
@@ -22,6 +23,11 @@ export function ParamsComponent({
             node={node}
           />}
 
+          {param.type === 'StringListParam' && <StringListInput
+            param={param}
+            node={node}
+          />}
+
           {/* Vertical layout */}
           {param.type === 'RepeatableParam' && <RepeatableWithConfig
             param={param}
@@ -38,10 +44,10 @@ export function ParamsComponent({
   </>;
 }
 
-export function Params ({
+export function Params({
   node,
 }) {
   return (<FormFieldWrapper fieldName={'params'}>
-    <ParamsComponent node={node}/>
+    <ParamsComponent node={node} />
   </FormFieldWrapper>);
 }

packages/ui/src/components/DataStory/modals/nodeSettingsModal/tabs/Params/ParamsComponentFactory.tsx

@@ -3,12 +3,14 @@ import {  FormComponent, FormComponentProps } from '../../../../types';
 import { StringableComponent } from './StringableWithConfig';
 import { PortSelectionComponent } from '../../../../Form/PortSelectionInput';
 import { SelectComponent } from '../../../../Form/SelectInput';
+import { StringListComponent } from '../../../../Form/StringListInput';
 
 export class ParamsComponentFactory{
   availableComponents: FormComponent<Param>[] = [
     new StringableComponent(),
     new PortSelectionComponent(),
     new SelectComponent(),
+    new StringListComponent(),
   ]
   private selectedComponent?: FormComponent<Param> = undefined;
 

packages/ui/src/components/Node/table/TableNodeComponent.tsx

@@ -159,7 +159,7 @@ const TableNodeComponent = ({ id, data }: {
                 ...virtualPaddingVars,
               }}
               data-cy={'data-story-table-scroll'}
-              className="max-h-64 max-w-128 nowheel overflow-auto scrollbar rounded-sm">
+              className="max-h-64 max-w-128 min-w-6 nowheel overflow-auto scrollbar rounded-sm">
               <table className="table-fixed grid">
                 <MemoizedTableHeader
                   headerGroups={getHeaderGroups()}