21 | {uiLabel && (
22 |
26 | )}
27 |
28 |
46 | );
47 | }
--------------------------------------------------------------------------------
/js/src/components/ui/Button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | interface ButtonProps {
4 | label: string;
5 | tooltip: string;
6 | onClick: () => void;
7 | disabled?: boolean;
8 | value?: boolean;
9 | className?: string;
10 | icon?: React.ReactNode;
11 | variant?: 'default' | 'process-step';
12 | fitToContent?: boolean;
13 | }
14 |
15 | export function Button({
16 | label,
17 | tooltip,
18 | onClick,
19 | disabled = false,
20 | value = false,
21 | className = '',
22 | icon,
23 | variant = 'default',
24 | fitToContent = false
25 | }: ButtonProps) {
26 | const baseStyles = className ? className : (
27 | variant === 'process-step'
28 | ? "relative w-16 h-16 rounded-full bg-white/20 border border-white/10 transition-all group"
29 | : `widget-button${fitToContent ? ' fit-to-content' : ''}`
30 | );
31 |
32 | return (
33 |
32 | {title}
33 |
44 |
45 |
34 |
51 |
52 | );
53 | }
--------------------------------------------------------------------------------
/js/src/components/ui/Chart.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Chart } from 'react-chartjs-2';
3 | import type { ChartType, ChartData, ChartOptions } from 'chart.js';
4 |
5 | interface ChartProps {
6 | type: ChartType;
7 | data: ChartData;
8 | options?: ChartOptions;
9 | }
10 |
11 | export function ChartComponent({ type, data, options = {} }: ChartProps) {
12 | const defaultOptions: ChartOptions = {
13 | maintainAspectRatio: false,
14 | responsive: true,
15 | devicePixelRatio: 2,
16 | plugins: {
17 | title: {
18 | font: {
19 | size: 20,
20 | weight: '400' // Lighter weight (normal)
21 | }
22 | }
23 | }
24 | };
25 |
26 | const mergedOptions = { ...defaultOptions, ...options };
27 |
28 | return (
29 |
30 |
32 | );
33 | }
--------------------------------------------------------------------------------
/js/src/components/ui/CheckBox.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Tooltip } from './Tooltip';
3 |
4 | interface CheckBoxProps {
5 | value: boolean;
6 | uiLabel: string;
7 | uiTooltip: string;
8 | onChange: (value: boolean) => void;
9 | }
10 |
11 | export function CheckBox({
12 | value,
13 | uiLabel,
14 | uiTooltip,
15 | onChange
16 | }: CheckBoxProps) {
17 | return (
18 |
19 |
29 |
30 | );
31 | }
--------------------------------------------------------------------------------
/js/src/components/ui/DateTimePicker.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Tooltip } from './Tooltip';
3 |
4 | interface DateTimePickerProps {
5 | value: string;
6 | minDate: string;
7 | maxDate: string;
8 | uiLabel: string;
9 | uiTooltip: string;
10 | onChange: (value: string) => void;
11 | }
12 |
13 | export function DateTimePicker({
14 | value,
15 | minDate,
16 | maxDate,
17 | uiLabel,
18 | uiTooltip,
19 | onChange
20 | }: DateTimePickerProps) {
21 | const dateValue = value.split('T')[0];
22 | const timeValue = value.split('T')[1].slice(0, 5); // HH:mm format
23 |
24 | const handleDateChange = (e: React.ChangeEvent
38 |
59 | );
60 | }
--------------------------------------------------------------------------------
/js/src/components/ui/DropDown.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Tooltip } from './Tooltip';
3 |
4 | interface DropDownProps {
5 | selected_key: string;
6 | options: string[];
7 | uiLabel: string;
8 | uiTooltip: string;
9 | onChange: (selected_key: string) => void;
10 | fitToContent: boolean;
11 | labelInline: boolean;
12 | }
13 |
14 | export function DropDown({
15 | selected_key,
16 | options,
17 | uiLabel,
18 | uiTooltip,
19 | onChange,
20 | fitToContent,
21 | labelInline
22 | }: DropDownProps) {
23 | const [isOpen, setIsOpen] = React.useState(false);
24 | const containerRef = React.useRef
39 | {uiLabel}
40 | {uiTooltip &&
42 |
43 |
51 |
57 |
58 |
51 | {!labelInline && (
52 |
56 | )}
57 |
87 | );
88 | }
89 |
--------------------------------------------------------------------------------
/js/src/components/ui/FileLoader.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Tooltip } from './Tooltip';
3 |
4 | interface FileLoaderProps {
5 | uiLabel: string;
6 | uiTooltip: string;
7 | accept: string;
8 | onFileLoad: (content: Uint8Array, filename: string, encoding: string) => void;
9 | encoding: string;
10 | }
11 |
12 | export function FileLoader({ uiLabel, uiTooltip, accept, onFileLoad }: FileLoaderProps) {
13 | const fileInputRef = React.useRef
58 | {labelInline && (
59 |
63 | )}
64 |
86 |
69 |
72 | {isOpen && (
73 | {selected_key}
70 |
71 |
74 | {options.map(option => (
75 |
84 | )}
85 | handleOptionClick(option)}
79 | >
80 | {option}
81 |
82 | ))}
83 |
59 |
66 |
70 |
71 | );
72 | }
--------------------------------------------------------------------------------
/js/src/components/ui/MarkdownDisplay.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import ReactMarkdown from 'react-markdown';
3 | import remarkGfm from 'remark-gfm';
4 | import remarkMath from 'remark-math';
5 | import rehypeKatex from 'rehype-katex';
6 | import rehypeHighlight from 'rehype-highlight';
7 | import 'katex/dist/katex.min.css';
8 | import 'highlight.js/styles/github.css';
9 |
10 | interface MarkdownDisplayProps {
11 | content: string;
12 | className?: string;
13 | }
14 |
15 | export function MarkdownDisplay({
16 | content,
17 | className = ""
18 | }: MarkdownDisplayProps) {
19 | return (
20 |
21 | (
27 |
28 | ),
29 | img: ({node, ...props}) => (
30 | ![]()
31 | ),
32 | }}
33 | >
34 | {content}
35 |
36 |
37 | );
38 | }
--------------------------------------------------------------------------------
/js/src/components/ui/MarkdownDrawer.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import ReactMarkdown from 'react-markdown';
3 | import remarkGfm from 'remark-gfm';
4 | import remarkMath from 'remark-math';
5 | import rehypeKatex from 'rehype-katex';
6 | import rehypeHighlight from 'rehype-highlight';
7 | import { Info } from 'lucide-react';
8 | import 'katex/dist/katex.min.css';
9 | import 'highlight.js/styles/github.css';
10 |
11 | interface MarkdownDrawerProps {
12 | title: string;
13 | content: string;
14 | isOpen: boolean;
15 | onToggle: (isOpen: boolean) => void;
16 | }
17 |
18 | export function MarkdownDrawer({
19 | title,
20 | content,
21 | isOpen,
22 | onToggle
23 | }: MarkdownDrawerProps) {
24 | const drawerRef = React.useRef
43 |
53 |
69 |
70 | )}
71 | {!isOpen && (
72 |
82 | )}
83 |
84 | );
85 | }
86 |
--------------------------------------------------------------------------------
/js/src/components/ui/ModalDialog.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import ReactMarkdown from 'react-markdown';
3 |
4 | interface ModalDialogProps {
5 | isOpen: boolean;
6 | title: string;
7 | message: string;
8 | showCancel: boolean;
9 | okLabel: string;
10 | cancelLabel: string;
11 | className?: string;
12 | onResult: (result: 'ok' | 'cancel') => void;
13 | }
14 |
15 | export function ModalDialog({
16 | isOpen,
17 | title,
18 | message,
19 | showCancel,
20 | okLabel,
21 | cancelLabel,
22 | className = "",
23 | onResult,
24 | }: ModalDialogProps) {
25 | if (!isOpen) return null;
26 |
27 | const handleOk = () => {
28 | onResult('ok');
29 | };
30 |
31 | const handleCancel = () => {
32 | onResult('cancel');
33 | };
34 |
35 | // Prevent clicks inside the modal from closing it
36 | const handleModalClick = (e: React.MouseEvent) => {
37 | e.stopPropagation();
38 | };
39 |
40 | return (
41 |
42 |
72 | );
73 | }
--------------------------------------------------------------------------------
/js/src/components/ui/Plot.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import Plot from 'react-plotly.js';
3 | import type { Data, Layout, Config } from 'plotly.js';
4 |
5 | interface PlotProps {
6 | data: Data[];
7 | layout?: Partial
46 |
71 |
47 | {title &&
49 | {title}
} 48 |
50 |
51 | {message}
52 |
53 |
54 |
55 |
61 | {showCancel && (
62 |
68 | )}
69 |
70 |
35 | {isVisible && (
36 |
45 | );
46 | }
--------------------------------------------------------------------------------
/js/src/components/ui/ProgressBar.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Tooltip } from './Tooltip';
3 | import '../../css/components/ProgressBar.scss';
4 |
5 | interface ProgressBarProps {
6 | value: number;
7 | uiLabel?: string;
8 | uiTooltip?: string;
9 | fitToContent?: boolean;
10 | labelInline?: boolean;
11 | }
12 |
13 | export function ProgressBar({
14 | value,
15 | uiLabel,
16 | uiTooltip,
17 | fitToContent = false,
18 | labelInline = true
19 | }: ProgressBarProps) {
20 | // Ensure value is between 0 and 100
21 | const clampedValue = Math.min(Math.max(value, 0), 100);
22 |
23 | return (
24 |
25 | {uiLabel && !labelInline && (
26 |
30 | )}
31 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/js/src/components/ui/RadioButtons.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Tooltip } from './Tooltip';
3 |
4 | interface RadioButtonsProps {
5 | value: string;
6 | options: string[];
7 | uiLabel: string;
8 | uiTooltip: string;
9 | onChange: (value: string) => void;
10 | fitToContent?: boolean;
11 | labelInline?: boolean;
12 | }
13 |
14 | export function RadioButtons({
15 | value,
16 | options,
17 | uiLabel,
18 | uiTooltip,
19 | onChange,
20 | fitToContent = false,
21 | labelInline = true,
22 | }: RadioButtonsProps) {
23 | return (
24 |
32 | {uiLabel && labelInline && (
33 |
37 | )}
38 |
52 |
45 |
49 |
50 | {Math.round(clampedValue)}%
51 |
25 | {!labelInline && (
26 |
53 | );
54 | }
--------------------------------------------------------------------------------
/js/src/components/ui/Slider.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Tooltip } from './Tooltip';
3 |
4 | interface SliderProps {
5 | value: number;
6 | minValue: number;
7 | maxValue: number;
8 | step: number;
9 | uiLabel: string;
10 | uiTooltip: string;
11 | onChange: (value: number) => void;
12 | fitToContent?: boolean;
13 | labelInline?: boolean;
14 | }
15 |
16 | export function Slider({
17 | value,
18 | minValue,
19 | maxValue,
20 | step,
21 | uiLabel,
22 | uiTooltip,
23 | onChange,
24 | fitToContent = false,
25 | labelInline = true
26 | }: SliderProps) {
27 | const percentage = ((value - minValue) / (maxValue - minValue)) * 100;
28 |
29 | return (
30 |
27 | {uiLabel}
28 | {uiTooltip &&
30 | )}
31 |
32 | {labelInline && (
33 |
52 |
34 | {uiLabel}
35 | {uiTooltip &&
37 | )}
38 |
39 | {options.map((option) => (
40 |
49 | ))}
50 |
51 |
31 | {!labelInline && (
32 |
36 | )}
37 |
65 | );
66 | }
--------------------------------------------------------------------------------
/js/src/components/ui/String.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Tooltip } from './Tooltip';
3 |
4 | interface StringInputProps {
5 | value: string;
6 | uiLabel: string;
7 | uiTooltip: string;
8 | placeholder?: string;
9 | onChange: (value: string) => void;
10 | fitToContent: boolean;
11 | isValid: boolean;
12 | isPassword?: boolean;
13 | validationMessage: string;
14 | labelInline: boolean;
15 | }
16 |
17 | export function StringInput({
18 | value,
19 | uiLabel,
20 | uiTooltip,
21 | placeholder,
22 | onChange,
23 | fitToContent,
24 | isValid,
25 | isPassword,
26 | validationMessage,
27 | labelInline
28 | }: StringInputProps) {
29 |
30 | return (
31 |
38 | {labelInline && (
39 |
43 | )}
44 |
64 | {value}
45 |
46 | onChange(parseFloat(e.target.value))}
53 | className="slider-input"
54 | style={{
55 | background: `linear-gradient(to right,
56 | var(--ui-widget-focus-border) 0%,
57 | var(--ui-widget-focus-border) ${percentage}%,
58 | var(--ui-widget-secondary-background) ${percentage}%,
59 | var(--ui-widget-secondary-background) 100%)`
60 | }}
61 | />
62 |
63 |
32 | {!labelInline && (
33 |
37 | )}
38 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/js/src/components/ui/Tabs.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Tooltip } from './Tooltip';
3 |
4 | interface TabsProps {
5 | value: string;
6 | tabs: string[];
7 | uiLabel: string;
8 | uiTooltip: string;
9 | contentUpdated: boolean;
10 | onChange: (value: string) => void;
11 | setContentUpdated?: (updated: boolean) => void;
12 | }
13 |
14 | export function Tabs({
15 | value,
16 | tabs,
17 | uiLabel,
18 | uiTooltip,
19 | contentUpdated,
20 | onChange,
21 | setContentUpdated,
22 | }: TabsProps) {
23 | React.useEffect(() => {
24 | if (contentUpdated && setContentUpdated) {
25 | setContentUpdated(false);
26 | }
27 | }, [contentUpdated, setContentUpdated]);
28 |
29 | return (
30 |
39 | {labelInline && (
40 |
44 | )}
45 | onChange(e.target.value)}
50 | />
51 | {!isValid && validationMessage && (
52 |
57 |
53 | {validationMessage}
54 |
55 | )}
56 |
31 | {uiLabel && (
32 |
36 | )}
37 |
38 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/js/src/components/ui/Timer.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | interface TimerProps {
4 | interval: number;
5 | isActive: boolean;
6 | uiLabel: string;
7 | onTick: () => void;
8 | onToggle: (active: boolean) => void;
9 | }
10 |
11 | export function Timer({ interval, isActive, uiLabel, onTick, onToggle }: TimerProps) {
12 | const [isBlinking, setIsBlinking] = React.useState(false);
13 | const [showReset, setShowReset] = React.useState(false);
14 | const intervalRef = React.useRef
39 |
52 |
40 | {tabs.map(tab => (
41 |
50 |
51 | onChange(tab)}
45 | >
46 | {tab}
47 |
48 | ))}
49 | {
75 | if (!isActive) setShowReset(true);
76 | }}
77 | style={{
78 | width: '20px',
79 | height: '20px',
80 | borderRadius: '50%',
81 | backgroundColor: showReset ? '#2196F3' : (isBlinking ? '#4CAF50' : '#ddd'),
82 | cursor: 'pointer',
83 | transition: 'background-color 0.1s ease-in-out',
84 | display: 'flex',
85 | alignItems: 'center',
86 | justifyContent: 'center',
87 | ...(showReset && {
88 | '&::after': {
89 | content: '↺',
90 | color: 'white',
91 | fontSize: '14px'
92 | }
93 | })
94 | }}
95 | >
96 | {showReset && "↺"}
97 |
98 | );
99 | }
--------------------------------------------------------------------------------
/js/src/components/ui/Toast.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | interface ToastProps {
4 | message: string;
5 | duration?: number;
6 | onDismiss: () => void;
7 | visible: boolean;
8 | }
9 |
10 | export function Toast({
11 | message,
12 | duration = 3000,
13 | onDismiss,
14 | visible
15 | }: ToastProps) {
16 | const [progress, setProgress] = React.useState(100);
17 |
18 | React.useEffect(() => {
19 | if (!visible) {
20 | setProgress(100);
21 | return;
22 | }
23 |
24 | const startTime = Date.now();
25 | const endTime = startTime + duration;
26 |
27 | const updateProgress = () => {
28 | const now = Date.now();
29 | const remaining = Math.max(0, endTime - now);
30 | const newProgress = (remaining / duration) * 100;
31 |
32 | if (newProgress <= 0) {
33 | onDismiss();
34 | } else {
35 | setProgress(newProgress);
36 | requestAnimationFrame(updateProgress);
37 | }
38 | };
39 |
40 | const animationFrame = requestAnimationFrame(updateProgress);
41 | return () => cancelAnimationFrame(animationFrame);
42 | }, [visible, duration, onDismiss]);
43 |
44 | if (!visible) return null;
45 |
46 | return (
47 |
48 |
67 | );
68 | }
--------------------------------------------------------------------------------
/js/src/components/ui/Tooltip.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | interface TooltipProps {
4 | tooltip: string;
5 | }
6 |
7 | export function Tooltip({ tooltip }: TooltipProps) {
8 | return (
9 |
10 |
25 |
26 | );
27 | }
--------------------------------------------------------------------------------
/js/src/components/ui/Workflow.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { ChevronLeft, ChevronRight, Check } from "lucide-react";
3 |
4 | interface WorkflowProps {
5 | steps: string[];
6 | activeStep: number;
7 | completedSteps: number[];
8 | onStepChange: (step: number) => void;
9 | }
10 |
11 | export function Workflow({ steps, activeStep, completedSteps, onStepChange }: WorkflowProps) {
12 | const canGoToStep = (stepIndex: number) => {
13 | // Can go to completed steps or the first uncompleted step
14 | return completedSteps.includes(stepIndex) ||
15 | (stepIndex === 0 || completedSteps.length >= stepIndex);
16 | };
17 |
18 | return (
19 |
49 |
58 |
66 | {message}
59 |
60 |
64 |
65 |
20 |
27 |
28 |
57 | );
58 | }
--------------------------------------------------------------------------------
/js/src/components/ui/chartjs-registration.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Chart as ChartJS,
3 | CategoryScale,
4 | LinearScale,
5 | PointElement,
6 | LineElement,
7 | BarElement,
8 | ArcElement,
9 | Title,
10 | Tooltip,
11 | Legend,
12 | LineController,
13 | BarController,
14 | PieController,
15 | DoughnutController,
16 | TimeScale
17 | } from 'chart.js';
18 | import 'chartjs-adapter-date-fns';
19 |
20 | // Register Chart.js components and controllers
21 | ChartJS.register(
22 | CategoryScale,
23 | LinearScale,
24 | TimeScale,
25 | PointElement,
26 | LineElement,
27 | BarElement,
28 | ArcElement,
29 | Title,
30 | Tooltip,
31 | Legend,
32 | LineController,
33 | BarController,
34 | PieController,
35 | DoughnutController
36 | );
37 |
38 | // Set global font defaults
39 | ChartJS.defaults.font.family = '"Nunito Sans", sans-serif';
40 | ChartJS.defaults.font.size = 12;
--------------------------------------------------------------------------------
/js/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as DialogPrimitive from '@radix-ui/react-dialog'
3 |
4 | const Dialog = DialogPrimitive.Root
5 | const DialogTrigger = DialogPrimitive.Trigger
6 | const DialogPortal = DialogPrimitive.Portal
7 | const DialogClose = DialogPrimitive.Close
8 | const DialogTitle = DialogPrimitive.Title
9 | const DialogDescription = DialogPrimitive.Description
10 |
11 | const DialogOverlay = React.forwardRef<
12 | React.ElementRef
29 | {steps.map((step, index) => (
30 |
48 |
49 |
56 | canGoToStep(index) && onStepChange(index)}
36 | >
37 |
46 | ))}
47 |
38 | {completedSteps.includes(index) ? (
39 |
44 | {step}
45 |
21 |
22 |
{title}
23 |
24 |
25 | onNameChange(e.target.value)}
29 | className="w-full border rounded p-2"
30 | />
31 |
32 |
33 |
34 |