UI Component Interfaces

[thorwhalen]

This is to collect and discuss UI interfaces.

Would like to get some definition of the interface of what we call a "UI-component". For example, if we think OO:

Where ChoiceUI, if I write it as a python function, would look like this:

from typing import Callable, Iterable, Dict, Any

ChoiceItem = Dict
Filt = Any
JSXElement = Any
Container = Any
Key = Any

def ChoiceUI(
    src: Callable[[Filt], Iterable[ChoiceItem]], 
    render: Callable[[ChoiceItem], JSXElement],
    layout: Callable[[Iterable[JSXElement]], Container[JSXElement]] = None,
    key: Callable[[ChoiceItem], Key] = lambda choice_item: choice_item,
    **kwargs
):
    """
    Container to show a list of choices of items to the user.
    
    Parameters
    ----------
    src : Callable[[Filt], Iterable[ChoiceItem]]
        A function that returns an iterable of choices. 
        Maybe an array in memory, or a generator of chunks of items, etc.
    render : Callable[[ChoiceItem], JSXElement]
        A function that renders a choice item.
    key : Callable[[ChoiceItem], Key]
        A function that returns a unique key for a choice item.
    layout : Callable[[Iterable[JSXElement]], Container[JSXElement]], optional  
        A function that lays out the rendered choice items.
    """ 

[thorwhalen]

Example:

interface IDaggerProps {
    DagFuncList: any[] | (() => any[]) | (() => Promise<any[]>),
    LoadDagList: any[] | (() => any[]) | (() => Promise<any[]>);
    onSave: (...args: any) => any | void;
    onloadSavedDag: (...args: any) => any | void;
    loadParamsList: (...args: any) => any | void;
}

I'll provide you with documentation for the TypeScript interface IDaggerProps:

Interface: IDaggerProps

The IDaggerProps interface represents the props or configuration options for a component or module related to a DAG (Directed Acyclic Graph). It defines the expected properties and their types that can be passed to such a component.

Properties:

1. DagFuncList (Type: any[] | (() => any[]) | (() => Promise<any[]>)):

   • This property represents a list of functions, or a function that returns an array, or an asynchronous function that returns an array. These functions are typically used to define a DAG or a sequence of tasks.
   • It can be an array of any type, a synchronous function that returns an array, or an asynchronous function that returns a promise of an array.
   • Example Usage:
     • An array of functions: [function1, function2, function3]
     • A synchronous function: () => [task1, task2, task3]
     • An asynchronous function: async () => await fetchTasksFromServer()

2. LoadDagList (Type: any[] | (() => any[]) | (() => Promise<any[]>)):

   • This property represents a list of functions, or a function that returns an array, or an asynchronous function that returns an array. These functions are typically used to load a DAG or a sequence of tasks.
   • It can be an array of any type, a synchronous function that returns an array, or an asynchronous function that returns a promise of an array.
   • Example Usage:
     • An array of functions: [loadFunction1, loadFunction2, loadFunction3]
     • A synchronous function: () => [loadedTask1, loadedTask2, loadedTask3]
     • An asynchronous function: async () => await fetchTasksFromServer()

3. onSave (Type: (...args: any) => any | void):

   • This property represents a callback function that is called when an action related to saving data is triggered.
   • The function can accept any number of arguments (represented as ...args) and can return a value or void.
   • Example Usage:
     • (arg1, arg2) => { // save data logic here }

4. onloadSavedDag (Type: (...args: any) => any | void):

   • This property represents a callback function that is called when an action related to loading a saved DAG or data is triggered.
   • The function can accept any number of arguments (represented as ...args) and can return a value or void.
   • Example Usage:
     • (arg1, arg2) => { // load saved data logic here }

5. loadParamsList (Type: (...args: any) => any | void):

   • This property represents a callback function that is called when an action related to loading parameters or configuration is triggered.
   • The function can accept any number of arguments (represented as ...args) and can return a value or void.
   • Example Usage:
     • (arg1, arg2) => { // load parameters logic here }

Usage:

You can use the IDaggerProps interface to define the expected props for a component or module that works with DAGs. These props allow you to specify the functions for defining and loading the DAG, as well as callback functions for saving, loading, and handling parameters or configuration.

When implementing a component that consumes IDaggerProps, make sure to provide functions or handlers that match the specified types for these props.

Here's a sample usage of IDaggerProps in a TypeScript component:

import React from 'react';

interface IDaggerProps {
    DagFuncList: any[] | (() => any[]) | (() => Promise<any[]>),
    LoadDagList: any[] | (() => any[]) | (() => Promise<any[]>);
    onSave: (...args: any) => any | void;
    onloadSavedDag: (...args: any) => any | void;
    loadParamsList: (...args: any) => any | void;
}

const DAGComponent: React.FC<IDaggerProps> = (props) => {
    // Component implementation here
    return (
        <div>
            {/* Render the DAG component using props */}
        </div>
    );
}

export default DAGComponent;

In the above example, the DAGComponent receives props based on the IDaggerProps interface and uses them to perform various DAG-related actions within the component.

Remember to replace the comments with your actual component logic and rendering.