locust-ui 1.0.0-beta

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2024, Andrew Baldwin, Lars Holmberg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,169 @@
+# Locust UI
+
+The Locust UI is used for viewing stats, reports, and information on your current Locust test from the browser.
+
+## Locust UI as a Library
+
+**Using the Locust UI as a library should be considered an experimental feature**
+
+The Locust UI may be extended to fit your needs. If you only need limited extensibility, you may do so in your Locustfile, see the [extend_web_ui example](https://github.com/locustio/locust/blob/master/examples/extend_web_ui.py). 
+
+However, you may want to further extend certain functionalities. To do so, you may replace the default Locust UI with your own React application. Start by installing the locust-ui in your React application:
+```sh
+npm install locust-ui
+```
+or
+```sh
+yarn add locust-ui
+```
+
+## Usage
+
+```js
+import LocustUi from "locust-ui";
+
+function App() {
+    return (
+        <LocustUi<"content-length", "content_length">
+            extendedTabs={[
+                {
+                    title: "Content Length",
+                    key: "content-length",
+                },
+            ]}
+            extendedTables={[
+                {
+                    key: "content-length",
+                    structure: [
+                        { key: "name", title: "Name" },
+                        { key: "content_length", title: "Total content length" },
+                    ],
+                },
+            ]}
+            extendedReports={[
+                {
+                    href: "/content-length/csv",
+                    title: "Download content length statistics CSV",
+                },
+            ]}
+            extendedStats={[
+                {
+                    key: "content-length",
+                    data: [{ name: "/", safeName: "/", content_length: "123" }],
+                },
+            ]}
+        />
+    )
+}
+```
+
+For Locust to be able to pass data to your React frontend, place the following script tag in your html template file:
+```html
+<script>
+    window.templateArgs = {{ template_args|tojson }}
+</script>
+```
+
+To load the favicon, place the link in your head:
+```html
+<link rel="icon" href="./assets/favicon.png" />
+```
+
+Lastly, you must configure Locust to point to your own React build output. To achieve this, you can use the flag `--build-path` and provide the **absolute** path to your build directory.
+
+```sh
+locust -f locust.py --build-path /home/user/custom-webui/dist
+```
+
+For more on configuring Locust see [the Locust docs](https://docs.locust.io/en/stable/configuration.html).
+
+### Customizing Tabs
+By default, the extended tabs will display the provided data in a table. However you may choose to render any React component in the tab:
+```js
+import { IRootState } from "locust-webui";
+import { useSelector } from "react-redux";
+
+function MyCustomTab() {
+    const extendedStats = useSelector(
+        ({ ui: { extendedStats } }: IRootState) => extendedStats
+    );
+
+    return <div>{JSON.stringify(extendedStats)}</div>;
+}
+
+const extendedTabs = {[
+    {
+        title: "Content Length",
+        key: "content-length",
+        component: MyCustomTab
+    },
+]};
+
+function App() {
+    return (
+        <LocustUi extendedTabs={extendedTabs} />
+    )
+}
+```
+
+The `tabs` prop allows for complete control of which tabs are rendered. You can then customize which base tabs are shown or where your new tab should be placed:
+```js
+import LocustUi, { tabConfig } from "locust-ui";
+
+const tabs = [
+    tabConfig.stats,
+    tabConfig.charts,
+    {
+        title: "Custom Tab",
+        key: "custom-tab",
+        component: MyCustomTab,
+    },
+]
+
+function App() {
+    return (
+        <LocustUi tabs={tabs} />
+    )
+}
+```
+
+### API
+**Tab**
+```js
+{
+    title: string; // **Required** Any string for display purposes
+    key: string; // **Required** Programatic key used in extendedTabs to find corresponding stats and tables
+    component: // **Optional** React component to render
+    shouldDisplayTab: // **Optional** Function provided with Locust redux state to output boolean
+}
+```
+**Extended Stat**
+```js
+{
+    key: string; // **Required** Programatic key that must correspond to a tab key
+    data: {
+        [key: string]: string; // The key must have a corresponding entry in the extended table structure. The value corresponds to the data to be displayed
+    }[];
+}
+```
+**Extended Table**
+```js
+{
+    key: string; // **Required** Programatic key that must correspond to a tab key
+    structure: {
+        key: string; // **Required** key that must correspond to a key in the extended stat data object
+        title: string; // **Required** Corresponds to the title of the column in the table
+    }[]
+}
+```
+**Locust UI**
+```js
+// Provide the types for your extended tab and stat keys to get helpful type hints
+<LocustUI<ExtendedTabType, StatKey>
+    extendedTabs={/* Optional array of extended tabs */}
+    extendedTables={/* Optional array of extended tables */}
+    extendedReports={/* Optional array of extended reports */}
+    extendedStats={/* Optional array of extended stats */}
+    tabs={/* Optional array of tabs that will take precedence over extendedTabs */}
+/>
+```

package/lib/types/App.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function App(): import("react").JSX.Element;

package/lib/types/HtmlReport.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/assets/Logo.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function Logo({ lightModeBackgroundColor }: {
+    lightModeBackgroundColor?: string;
+}): import("react").JSX.Element;

package/lib/types/components/DataTable/DataTable.d.ts

@@ -0,0 +1,13 @@
+import { ITableStructure } from '../../types/table.types';
+import { IExtendedStatData } from '../../types/ui.types';
+
+interface IDataTable {
+    rows: IExtendedStatData[] | never[];
+    tableStructure: ITableStructure[] | null;
+}
+declare function DataTable({ rows, tableStructure }: IDataTable): import("react").JSX.Element | null;
+declare const _default: import('../../react-redux').ConnectedComponent<typeof DataTable, {
+    context?: import('../../react').Context<import('../../react-redux').ReactReduxContextValue<any, import('../../redux').UnknownAction> | null> | undefined;
+    store?: import('../../redux').Store<any, import('../../redux').UnknownAction, unknown> | undefined;
+}>;
+export default _default;

package/lib/types/components/ExceptionsTable/ExceptionsTable.d.ts

@@ -0,0 +1,10 @@
+import { ISwarmException } from '../../types/ui.types';
+
+export declare function ExceptionsTable({ exceptions }: {
+    exceptions: ISwarmException[];
+}): import("react").JSX.Element;
+declare const _default: import('../../react-redux').ConnectedComponent<typeof ExceptionsTable, {
+    context?: import('../../react').Context<import('../../react-redux').ReactReduxContextValue<any, import('../../redux').UnknownAction> | null> | undefined;
+    store?: import('../../redux').Store<any, import('../../redux').UnknownAction, unknown> | undefined;
+}>;
+export default _default;

package/lib/types/components/FailuresTable/FailuresTable.d.ts

@@ -0,0 +1,10 @@
+import { ISwarmError } from '../../types/ui.types';
+
+export declare function FailuresTable({ errors }: {
+    errors: ISwarmError[];
+}): import("react").JSX.Element;
+declare const _default: import('../../react-redux').ConnectedComponent<typeof FailuresTable, {
+    context?: import('../../react').Context<import('../../react-redux').ReactReduxContextValue<any, import('../../redux').UnknownAction> | null> | undefined;
+    store?: import('../../redux').Store<any, import('../../redux').UnknownAction, unknown> | undefined;
+}>;
+export default _default;

package/lib/types/components/FallbackRender/FallbackRender.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export default function FallbackRender({ error }: {
+    error: {
+        message?: string;
+    };
+}): import("react").JSX.Element;

package/lib/types/components/Form/Form.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type BaseInputData = Record<string, any>;
+interface IForm<IInputData extends BaseInputData> {
+    children: React.ReactElement | React.ReactElement[];
+    className?: string;
+    onSubmit: (inputData: IInputData) => void;
+}
+export default function Form<IInputData extends BaseInputData>({ children, onSubmit, }: IForm<IInputData>): import("react").JSX.Element;
+export {};

package/lib/types/components/Form/Select.d.ts

@@ -0,0 +1,13 @@
+import { SxProps, SelectProps } from '../../@mui/material';
+
+interface ISelect extends SelectProps {
+    label: string;
+    name: string;
+    options: string[];
+    multiple?: boolean;
+    defaultValue?: string | string[];
+    sx?: SxProps;
+    onChange?: SelectProps['onChange'];
+}
+export default function Select({ label, name, options, multiple, defaultValue, sx, ...inputProps }: ISelect): import("react").JSX.Element;
+export {};

package/lib/types/components/Layout/Footer/About.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function About(): import("react").JSX.Element;

package/lib/types/components/Layout/Footer/Footer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Footer(): import("react").JSX.Element;

package/lib/types/components/Layout/Layout.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from '../../react';
+
+interface ILayout {
+    children: ReactNode;
+}
+export default function Layout({ children }: ILayout): import("react").JSX.Element;
+export {};

package/lib/types/components/Layout/Navbar/DarkLightToggle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function DarkLightToggle(): import("react").JSX.Element;

package/lib/types/components/Layout/Navbar/Navbar.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Navbar(): import("react").JSX.Element;

package/lib/types/components/Layout/Navbar/SwarmMonitor.d.ts

@@ -0,0 +1,11 @@
+import { ISwarmState } from '../../../redux/slice/swarm.slice';
+import { IUiState } from '../../../redux/slice/ui.slice';
+
+interface ISwarmMonitor extends Pick<ISwarmState, 'isDistributed' | 'host' | 'state' | 'workerCount'>, Pick<IUiState, 'totalRps' | 'failRatio' | 'userCount'> {
+}
+declare function SwarmMonitor({ isDistributed, state, host, totalRps, failRatio, userCount, workerCount, }: ISwarmMonitor): import("react").JSX.Element;
+declare const _default: import('../../../react-redux').ConnectedComponent<typeof SwarmMonitor, {
+    context?: import('../../../react').Context<import('../../../react-redux').ReactReduxContextValue<any, import('../../../redux').UnknownAction> | null> | undefined;
+    store?: import('../../../redux').Store<any, import('../../../redux').UnknownAction, unknown> | undefined;
+}>;
+export default _default;

package/lib/types/components/LineChart/LineChart.constants.d.ts

@@ -0,0 +1,14 @@
+export declare const CHART_THEME: {
+    DARK: {
+        textColor: string;
+        axisColor: string;
+        backgroundColor: string;
+        splitLine: string;
+    };
+    LIGHT: {
+        textColor: string;
+        axisColor: string;
+        backgroundColor: string;
+        splitLine: string;
+    };
+};

package/lib/types/components/LineChart/LineChart.d.ts

@@ -0,0 +1,7 @@
+import { ILineChart, ILineChartMarkers, ILineChartTimeAxis } from './LineChart.types';
+
+interface IBaseChartType extends ILineChartMarkers, ILineChartTimeAxis {
+    [key: string]: any;
+}
+export default function LineChart<ChartType extends IBaseChartType>({ charts, title, lines, colors, chartValueFormatter, splitAxis, yAxisLabels, scatterplot, }: ILineChart<ChartType>): import("react").JSX.Element;
+export {};

package/lib/types/components/LineChart/LineChart.types.d.ts

@@ -0,0 +1,37 @@
+export interface ILine<ChartType> {
+    name: string;
+    key: keyof ChartType;
+    stack?: string;
+    areaStyle?: {
+        [key: string]: any;
+    };
+    yAxisIndex?: number;
+}
+export interface ILineChart<ChartType> {
+    charts: ChartType;
+    title: string;
+    lines: ILine<ChartType>[];
+    colors?: string[];
+    chartValueFormatter?: (value?: any) => string | number;
+    splitAxis?: boolean;
+    yAxisLabels?: string | [string, string];
+    scatterplot?: boolean;
+}
+export interface ILineChartZoomEvent {
+    batch?: {
+        start: number;
+        end: number;
+    }[];
+}
+export interface ILineChartMarkers {
+    markers?: string[];
+}
+export interface ILineChartTimeAxis {
+    time: string[];
+}
+export interface ILineChartTooltipFormatterParams {
+    axisValue: string;
+    color: string;
+    seriesName: string;
+    value: string | number | [string, number];
+}

package/lib/types/components/LineChart/LineChart.utils.d.ts

@@ -0,0 +1,69 @@
+import { ECharts, DefaultLabelFormatterCallbackParams, LineSeriesOption, YAXisComponentOption, ScatterSeriesOption } from '../../echarts';
+import { ILineChart, ILineChartTooltipFormatterParams } from './LineChart.types';
+import { ICharts } from '../../types/ui.types';
+
+export declare const getSeriesData: <ChartType>({ charts, lines, scatterplot, }: Pick<ILineChart<ChartType>, "charts" | "lines" | "scatterplot">) => LineSeriesOption[] | ScatterSeriesOption[];
+export declare const createOptions: <ChartType extends Pick<ICharts, "time">>({ charts, title, lines, colors, chartValueFormatter, splitAxis, yAxisLabels, scatterplot, }: ILineChart<ChartType>) => {
+    title: {
+        text: string;
+    };
+    dataZoom: {
+        type: string;
+        start: number;
+        end: number;
+    }[];
+    tooltip: {
+        trigger: string;
+        formatter: (params?: ILineChartTooltipFormatterParams[] | null) => string;
+        borderWidth: number;
+    };
+    xAxis: {
+        type: string;
+        startValue: string;
+        axisLabel: {
+            formatter: (value: string) => string;
+        };
+    };
+    grid: {
+        left: number;
+        right: number;
+    };
+    yAxis: YAXisComponentOption | YAXisComponentOption[];
+    series: LineSeriesOption[] | ScatterSeriesOption[];
+    color: string[] | undefined;
+    toolbox: {
+        right: number;
+        feature: {
+            dataZoom: {
+                show: boolean;
+                title: {
+                    zoom: string;
+                    back: string;
+                };
+            };
+            saveAsImage: {
+                name: string;
+                title: string;
+                emphasis: {
+                    iconStyle: {
+                        textPosition: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const createMarkLine: <ChartType extends Pick<ICharts, "markers">>(charts: ChartType, isDarkMode: boolean) => {
+    symbol: string;
+    label: {
+        formatter: (params: DefaultLabelFormatterCallbackParams) => string;
+        padding: number[];
+    };
+    lineStyle: {
+        color: string;
+    };
+    data: {
+        xAxis: string;
+    }[];
+};
+export declare const onChartZoom: (chart: ECharts) => (datazoom: unknown) => void;

package/lib/types/components/LogViewer/LogDisplay.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function LogDisplay({ log }: {
+    log: string;
+}): import("react").JSX.Element;

package/lib/types/components/LogViewer/LogViewer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function LogViewer(): import("react").JSX.Element;

package/lib/types/components/LogViewer/LogViewer.utils.d.ts

@@ -0,0 +1 @@
+export declare const isImportantLog: (log: string) => boolean;

package/lib/types/components/LogViewer/WorkerLogs.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function WorkerLogs({ workerId, logs }: {
+    workerId: string;
+    logs: string[];
+}): import("react").JSX.Element;

package/lib/types/components/LogViewer/useLogViewer.d.ts

@@ -0,0 +1,4 @@
+export default function useLogViewer(): import('../../../../types/ui.types').ILogsResponse | {
+    master: never[];
+    workers: {};
+};

package/lib/types/components/Modal/Modal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface IModal {
+    open: boolean;
+    onClose: () => void;
+    children?: React.ReactElement | React.ReactElement[];
+}
+export default function Modal({ open, onClose, children }: IModal): import("react").JSX.Element;
+export {};

package/lib/types/components/Reports/Reports.d.ts

@@ -0,0 +1,8 @@
+import { ISwarmState } from '../../redux/slice/swarm.slice';
+
+declare function Reports({ extendedCsvFiles, statsHistoryEnabled, }: Pick<ISwarmState, 'extendedCsvFiles' | 'statsHistoryEnabled'>): import("react").JSX.Element;
+declare const _default: import('../../react-redux').ConnectedComponent<typeof Reports, {
+    context?: import('../../react').Context<import('../../react-redux').ReactReduxContextValue<any, import('../../redux').UnknownAction> | null> | undefined;
+    store?: import('../../redux').Store<any, import('../../redux').UnknownAction, unknown> | undefined;
+}>;
+export default _default;

package/lib/types/components/ResponseTimeTable/ResponseTimeTable.d.ts

@@ -0,0 +1,7 @@
+import { IResponseTime } from '../../types/ui.types';
+
+interface IResponseTimeTable {
+    responseTimes: IResponseTime[];
+}
+export default function ResponseTimeTable({ responseTimes }: IResponseTimeTable): import("react").JSX.Element;
+export {};

package/lib/types/components/StateButtons/EditButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function EditButton(): import("react").JSX.Element;

package/lib/types/components/StateButtons/NewTestButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function NewTestButton(): import("react").JSX.Element;

package/lib/types/components/StateButtons/ResetButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function ResetButton(): import("react").JSX.Element;

package/lib/types/components/StateButtons/StateButtons.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function StateButtons(): import("react").JSX.Element | null;

package/lib/types/components/StateButtons/StopButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function StopButton(): import("react").JSX.Element;

package/lib/types/components/StatsTable/StatsTable.d.ts

@@ -0,0 +1,23 @@
+import { ITableStructure } from '../../types/table.types';
+import { ISwarmStat } from '../../types/ui.types';
+
+export declare const baseTableStructure: ({
+    key: string;
+    title: string;
+    round?: undefined;
+} | {
+    key: string;
+    title: string;
+    round: number;
+})[];
+interface IStatsTable {
+    stats: ISwarmStat[];
+    tableStructure?: ITableStructure[];
+}
+export declare function StatsTable({ stats, tableStructure }: IStatsTable): import("react").JSX.Element;
+declare const _default: import('../../react-redux').ConnectedComponent<typeof StatsTable, {
+    tableStructure?: ITableStructure[] | undefined;
+    context?: import('../../react').Context<import('../../react-redux').ReactReduxContextValue<any, import('../../redux').UnknownAction> | null> | undefined;
+    store?: import('../../redux').Store<any, import('../../redux').UnknownAction, unknown> | undefined;
+}>;
+export default _default;

package/lib/types/components/SwarmCharts/SwarmCharts.d.ts

@@ -0,0 +1,10 @@
+import { ICharts } from '../../types/ui.types';
+
+export declare function SwarmCharts({ charts }: {
+    charts: ICharts;
+}): import("react").JSX.Element;
+declare const _default: import('../../react-redux').ConnectedComponent<typeof SwarmCharts, {
+    context?: import('../../react').Context<import('../../react-redux').ReactReduxContextValue<any, import('../../redux').UnknownAction> | null> | undefined;
+    store?: import('../../redux').Store<any, import('../../redux').UnknownAction, unknown> | undefined;
+}>;
+export default _default;

package/lib/types/components/SwarmForm/SwarmCustomParameters.d.ts

@@ -0,0 +1,7 @@
+import { IExtraOptions } from '../../types/swarm.types';
+
+interface ICustomParameters {
+    extraOptions: IExtraOptions;
+}
+export default function CustomParameters({ extraOptions }: ICustomParameters): import("react").JSX.Element;
+export {};

package/lib/types/components/SwarmForm/SwarmEditForm.d.ts

@@ -0,0 +1,14 @@
+import { ISwarmState } from '../../redux/slice/swarm.slice';
+
+type ISwarmFormInput = Pick<ISwarmState, 'spawnRate' | 'userCount'>;
+interface ISwarmForm extends ISwarmFormInput {
+    onSubmit: () => void;
+    setSwarm: (swarmPayload: Partial<ISwarmState>) => void;
+}
+declare function SwarmEditForm({ onSubmit, userCount, spawnRate, setSwarm }: ISwarmForm): import("react").JSX.Element;
+declare const _default: import('../../react-redux').ConnectedComponent<typeof SwarmEditForm, {
+    onSubmit: () => void;
+    context?: import('../../react').Context<import('../../react-redux').ReactReduxContextValue<any, import('../../redux').UnknownAction> | null> | undefined;
+    store?: import('../../redux').Store<any, import('../../redux').UnknownAction, unknown> | undefined;
+}>;
+export default _default;

package/lib/types/components/SwarmForm/SwarmForm.d.ts

@@ -0,0 +1,13 @@
+import { ISwarmState } from '../../redux/slice/swarm.slice';
+
+interface IDispatchProps {
+    setSwarm: (swarmPayload: Partial<ISwarmState>) => void;
+}
+interface ISwarmForm extends IDispatchProps, Pick<ISwarmState, 'availableShapeClasses' | 'availableUserClasses' | 'extraOptions' | 'isShape' | 'host' | 'overrideHostWarning' | 'runTime' | 'showUserclassPicker' | 'spawnRate' | 'numUsers'> {
+}
+declare function SwarmForm({ availableShapeClasses, availableUserClasses, host, extraOptions, isShape, numUsers, overrideHostWarning, runTime, setSwarm, showUserclassPicker, spawnRate, }: ISwarmForm): import("react").JSX.Element;
+declare const _default: import('../../react-redux').ConnectedComponent<typeof SwarmForm, {
+    context?: import('../../react').Context<import('../../react-redux').ReactReduxContextValue<any, import('../../redux').UnknownAction> | null> | undefined;
+    store?: import('../../redux').Store<any, import('../../redux').UnknownAction, unknown> | undefined;
+}>;
+export default _default;

package/lib/types/components/SwarmForm/SwarmUserClassPicker.d.ts

@@ -0,0 +1,18 @@
+import { ISwarmState } from '../../redux/slice/swarm.slice';
+
+interface IDispatchProps {
+    setSwarm: (swarmPayload: Partial<ISwarmState>) => void;
+}
+interface IUserClassPicker extends IDispatchProps, Pick<ISwarmState, 'availableUserClasses' | 'availableUserTasks' | 'users'> {
+    selectedUserClasses: string[];
+    setSelectedUserClasses: (userClasses: string[]) => void;
+}
+declare function SwarmUserClassPicker({ availableUserClasses, availableUserTasks, selectedUserClasses, setSelectedUserClasses, setSwarm, users, }: IUserClassPicker): import("react").JSX.Element;
+declare const _default: import('../../react-redux').ConnectedComponent<typeof SwarmUserClassPicker, {
+    availableUserClasses: string[];
+    selectedUserClasses: string[];
+    setSelectedUserClasses: (userClasses: string[]) => void;
+    context?: import('../../react').Context<import('../../react-redux').ReactReduxContextValue<any, import('../../redux').UnknownAction> | null> | undefined;
+    store?: import('../../redux').Store<any, import('../../redux').UnknownAction, unknown> | undefined;
+}>;
+export default _default;

package/lib/types/components/SwarmRatios/SwarmRatios.d.ts

@@ -0,0 +1,10 @@
+import { IUiState } from '../../redux/slice/ui.slice';
+
+export declare function SwarmRatios({ ratios: { perClass, total } }: {
+    ratios: IUiState['ratios'];
+}): import("react").JSX.Element | null;
+declare const _default: import('../../react-redux').ConnectedComponent<typeof SwarmRatios, {
+    context?: import('../../react').Context<import('../../react-redux').ReactReduxContextValue<any, import('../../redux').UnknownAction> | null> | undefined;
+    store?: import('../../redux').Store<any, import('../../redux').UnknownAction, unknown> | undefined;
+}>;
+export default _default;