AMP Logic Component Library

Getting Started

First, install @jtamptech/component-library

npm install @jtamptech/component-library

Icons

Icons are imported and customized from @heroicons/react. Hero Icons

Buttons

There will be several variations of buttons that serve as subcomponents for the larger components in this library.

Widget Button

<WidgetBtn /> with props:

interface WidgetBtnProps {
    icon: any;
    active: boolean;
    onClick?: () => void;
}

• Icon: Pass a string to render specific Icon for Widget Button
• Active: Pass a boolean value to render the active or inactive state of a Widget Button
• onClick?: Pass a callback function that will handle a specific action for the Widget Button

Widget Menu

The Widget Menu component consists of Widget Buttons <WidgetBtn /> and Icon <Icons /> subcomponents. The Widget Menu will be nested in the left hand side of the Navigation Bar and File System and allow the users to be able to have access to quick action widgets in their notebook.

<WidgetMenu /> with props:

interface WidgetMenuProps {
    colormode: string;
}

• Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS

Navigation Bar

Navigation Bar component that consists of widgets that allow for quick actions. Some current widgets include workspace, pipeline, notification, and settings.

<NavBar /> with props:

interface NavBarProps {
    colormode: string;
}

• Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS

Search Bar

Search Bar subcomponent is used in the Inspector and Dataspace Widget Components in two different variations.

<DataspaceSearchBar /> with props:

interface DataspaceSearchBarProps {
    data: Array<any>;
    placeholder: string;
    errorMsg: string;
    colormode: string;
}

• Data: Passes an array of data that will be queried by the SearchBar
• Placeholder: Passes a string to render as the placeholder of the SearchBar
• ErrorMsg: Passes a string to display the unique error handling message if no results are found
• Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS

<InspectorSearchBar /> with props:

interface InspectorSearchBarProps {
    data: Array<any>;
    placeholder: string;
    errorMsg: string;
    colormode: string;
}

• Data: Passes an array of data that will be queried by the SearchBar
• Placeholder: Passes a string to render as the placeholder of the SearchBar
• ErrorMsg: Passes a string to display the unique error handling message if no results are found
• Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS

Tag

Tag is a key/value pair identifier component that allows for users to label specific files/logs/data within the Inspector widget.

<Tag /> with props:

interface TagProps {
    tag: Tagtype;
    remove:() => void;
}

type TagType = {
    key: string;
    value: string;
}

• Tag:Passes an object that the Tag component will use the value of to display the Tag identifiers
• Remove: A callback function that will remove thet associated to the file/card

Card

Card component is a sub-component of the Dataspace and Inspector widget. Information such as from logs and its descriptiona & time of creation is displayed within the card to be selected by the user.

<DataspaceCard /> with props:

interface DSCardProps {
    data: SignalType;
    status: StatusType;
    group?: string;
    colormode: string;
}

interface SignalType {
    log: {
        node_id: string;
        name: string;
    };
    timestamp: null | string;
    metadata: {
        name: string;
        datatype: SignalDatatype;
        properties: SignalTimestampProperties | SignalProperties;
    };
    chunks: {
        summary: SignalChunkSummary | SignalTimestampChunkSummary;
        oid: string;
    }[];
}

type StatusType =
    | "success"
    | "open"
    | "open2"
    | "loading"
    | "loading2"
    | "error";

• Data: Signal Data that is passed and parsed from the backend
• Status: Passes a string that signifies the status of the data being uploaded
• Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS

<DataspaceCard /> with props:

interface DSCardProps {
    heading: string;
    description: string;
    created: string;
    filetags?: any;
    colormode: string;
}

• Heading: Passes a string that will display the name of the log
• Description: Passes a string that wil display the info of the log
• Created: Passes a string that will display the time of upload of log
• Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS