@perses-dev/plugin-system 0.38.0 → 0.39.0

package/dist/cjs/components/OptionsEditorRadios/OptionsEditorRadios.js

@@ -0,0 +1,74 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OptionsEditorRadios", {
+    enumerable: true,
+    get: ()=>OptionsEditorRadios
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _optionsEditorTabPanel = require("../OptionsEditorTabPanel");
+const OptionsEditorRadios = (props)=>{
+    const { tabs , defaultTab , onModeChange , isReadonly  } = props;
+    const [activeTab, setActiveTab] = (0, _react.useState)(defaultTab);
+    const handleChange = (_, value)=>{
+        const v = parseInt(value);
+        setActiveTab(v);
+        onModeChange(v);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                    borderBottom: 1,
+                    borderColor: (theme)=>theme.palette.divider
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "overline",
+                            component: "h4",
+                            children: "Mode:"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.RadioGroup, {
+                            row: true,
+                            defaultValue: defaultTab,
+                            value: activeTab,
+                            onChange: handleChange,
+                            "aria-labelledby": "Configuration radio",
+                            children: tabs.map(({ label  }, i)=>{
+                                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                                    disabled: isReadonly,
+                                    value: i,
+                                    control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Radio, {}),
+                                    label: label
+                                }, label);
+                            })
+                        })
+                    ]
+                })
+            }),
+            tabs.map(({ label , content  }, i)=>{
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorTabPanel.OptionsEditorTabPanel, {
+                    value: activeTab,
+                    index: i,
+                    children: content
+                }, label);
+            })
+        ]
+    });
+};

package/dist/cjs/components/OptionsEditorRadios/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./OptionsEditorRadios"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/{OptionsEditorTabs/TabPanel.js → OptionsEditorTabPanel/OptionsEditorTabPanel.js}

@@ -14,13 +14,13 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TabPanel", {
+Object.defineProperty(exports, "OptionsEditorTabPanel", {
     enumerable: true,
-    get: ()=>TabPanel
+    get: ()=>OptionsEditorTabPanel
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-function TabPanel(props) {
+function OptionsEditorTabPanel(props) {
     const { children , value , index , ...other } = props;
     const isActive = value === index;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {

package/dist/cjs/components/OptionsEditorTabPanel/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./OptionsEditorTabPanel"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/OptionsEditorTabs/OptionsEditorTabs.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "OptionsEditorTabs", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
-const _tabPanel = require("./TabPanel");
+const _optionsEditorTabPanel = require("../OptionsEditorTabPanel");
 const OptionsEditorTabs = ({ tabs  })=>{
     const [activeTab, setActiveTab] = (0, _react.useState)(0);
     const handleChange = (_, newValue)=>{
@@ -48,7 +48,7 @@ const OptionsEditorTabs = ({ tabs  })=>{
                 })
             }),
             tabs.map(({ label , content  }, i)=>{
-                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tabPanel.TabPanel, {
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorTabPanel.OptionsEditorTabPanel, {
                     value: activeTab,
                     index: i,
                     children: content

package/dist/cjs/components/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _exportStar(require("./CalculationSelector"), exports);
 _exportStar(require("./DatasourceSelect"), exports);
 _exportStar(require("./LegendOptionsEditor"), exports);
+_exportStar(require("./OptionsEditorRadios"), exports);
 _exportStar(require("./OptionsEditorTabs"), exports);
 _exportStar(require("./PanelSpecEditor"), exports);
 _exportStar(require("./PluginEditor"), exports);

package/dist/cjs/runtime/DataQueriesProvider/DataQueriesProvider.js

@@ -21,18 +21,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    useDataQueries: ()=>useDataQueries,
     DataQueriesContext: ()=>DataQueriesContext,
     useDataQueriesContext: ()=>useDataQueriesContext,
+    useDataQueries: ()=>useDataQueries,
     DataQueriesProvider: ()=>DataQueriesProvider
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _timeSeriesQueries = require("../time-series-queries");
-function useDataQueries() {
-    const ctx = useDataQueriesContext();
-    return ctx;
-}
+const _model = require("./model");
 const DataQueriesContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDataQueriesContext() {
     const ctx = (0, _react.useContext)(DataQueriesContext);
@@ -41,44 +38,59 @@ function useDataQueriesContext() {
     }
     return ctx;
 }
+function useDataQueries(queryType) {
+    const ctx = useDataQueriesContext();
+    // Filter the query results based on the specified query type
+    const filteredQueryResults = ctx.queryResults.filter((queryResult)=>queryResult.definition.kind === queryType);
+    // Filter the errors based on the specified query type
+    const filteredErrors = ctx.errors.filter((errors, index)=>{
+        var ref;
+        return ((ref = ctx.queryResults[index]) === null || ref === void 0 ? void 0 : ref.definition.kind) === queryType;
+    });
+    // Create a new context object with the filtered results and errors
+    const filteredCtx = {
+        queryResults: filteredQueryResults,
+        isFetching: filteredQueryResults.some((result)=>result.isFetching),
+        isLoading: filteredQueryResults.some((result)=>result.isLoading),
+        refetchAll: ctx.refetchAll,
+        errors: filteredErrors
+    };
+    return filteredCtx;
+}
 function DataQueriesProvider(props) {
     const { definitions , options , children  } = props;
-    // For now we will map each query plugin definition to TimeSeriesQueryDefinition
-    // Later on when we add support for other query types,
-    // we will have to map each query maps to the correct QueryDefinition
-    const timeSeriesQueries = definitions.map((definition)=>({
-            kind: 'TimeSeriesQuery',
+    const getQueryType = (0, _model.useQueryType)();
+    const queryDefinitions = definitions.map((definition)=>{
+        const type = getQueryType(definition.kind);
+        return {
+            kind: type,
             spec: {
                 plugin: definition
             }
-        }));
-    const results = (0, _timeSeriesQueries.useTimeSeriesQueries)(timeSeriesQueries, options);
-    const data = results.map(({ data , isFetching , isLoading , refetch , error  }, i)=>{
-        return {
-            definition: definitions[i],
-            data,
-            isFetching,
-            isLoading,
-            refetch,
-            error
         };
     });
+    // Filter definitions for time series query and other future query plugins
+    const timeSeriesQueries = queryDefinitions.filter((definition)=>definition.kind === 'TimeSeriesQuery');
+    const timeSeriesResults = (0, _timeSeriesQueries.useTimeSeriesQueries)(timeSeriesQueries, options);
     const refetchAll = (0, _react.useCallback)(()=>{
-        results.forEach((result)=>result.refetch());
+        timeSeriesResults.forEach((result)=>result.refetch());
     }, [
-        results
+        timeSeriesResults
     ]);
     const ctx = (0, _react.useMemo)(()=>{
+        const mergedQueryResults = [
+            ...(0, _model.transformQueryResults)(timeSeriesResults, timeSeriesQueries)
+        ];
         return {
-            queryResults: data,
-            isFetching: results.some((result)=>result.isFetching),
-            isLoading: results.some((result)=>result.isLoading),
+            queryResults: mergedQueryResults,
+            isFetching: mergedQueryResults.some((result)=>result.isFetching),
+            isLoading: mergedQueryResults.some((result)=>result.isLoading),
             refetchAll,
-            errors: results.map((result)=>result.error)
+            errors: mergedQueryResults.map((result)=>result.error)
         };
     }, [
-        data,
-        results,
+        timeSeriesQueries,
+        timeSeriesResults,
         refetchAll
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DataQueriesContext.Provider, {

package/dist/cjs/runtime/DataQueriesProvider/model.js

@@ -14,3 +14,60 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    transformQueryResults: ()=>transformQueryResults,
+    useQueryType: ()=>useQueryType
+});
+const _react = require("react");
+const _pluginRegistry = require("../plugin-registry");
+function transformQueryResults(results, definitions) {
+    return results.map(({ data , isFetching , isLoading , refetch , error  }, i)=>{
+        return {
+            definition: definitions[i],
+            data,
+            isFetching,
+            isLoading,
+            refetch,
+            error
+        };
+    });
+}
+function useQueryType() {
+    const { data: timeSeriesQueryPlugins , isLoading  } = (0, _pluginRegistry.useListPluginMetadata)('TimeSeriesQuery');
+    const queryTypeMap = (0, _react.useMemo)(()=>{
+        const map = {
+            TimeSeriesQuery: []
+        };
+        if (timeSeriesQueryPlugins) {
+            timeSeriesQueryPlugins.forEach((plugin)=>{
+                var ref;
+                (ref = map['TimeSeriesQuery']) === null || ref === void 0 ? void 0 : ref.push(plugin.kind);
+            });
+        }
+        return map;
+    }, [
+        timeSeriesQueryPlugins
+    ]);
+    const getQueryType = (0, _react.useCallback)((pluginKind)=>{
+        if (isLoading) {
+            return undefined;
+        }
+        for(const queryType in queryTypeMap){
+            var ref;
+            if ((ref = queryTypeMap[queryType]) === null || ref === void 0 ? void 0 : ref.includes(pluginKind)) {
+                return queryType;
+            }
+        }
+        throw new Error(`Unable to determine the query type: ${pluginKind}`);
+    }, [
+        queryTypeMap,
+        isLoading
+    ]);
+    return getQueryType;
+}

package/dist/cjs/runtime/template-variables.js

@@ -21,12 +21,74 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    VariableStoreStateMap: ()=>VariableStoreStateMap,
     TemplateVariableContext: ()=>TemplateVariableContext,
     useTemplateVariableValues: ()=>useTemplateVariableValues,
     useReplaceVariablesInString: ()=>useReplaceVariablesInString
 });
 const _react = require("react");
+const _immer = require("immer");
 const _utils = require("../utils");
+let _immerable = _immer.immerable;
+class VariableStoreStateMap {
+    /**
+   * Get variable state by key.
+   * @param key
+   */ get(key) {
+        return this._sourceStatesOrEmpty(key.source)[key.name];
+    }
+    /**
+   * Set variable state by key.
+   * @param key
+   * @param value
+   */ set(key, value) {
+        const sourceName = this._sourceName(key.source);
+        if (!this._state[sourceName]) {
+            this._state[sourceName] = {};
+        }
+        this._sourceStatesOrEmpty(key.source)[key.name] = value;
+        return value;
+    }
+    /**
+   * Check presence of variable state by key.
+   * @param key
+   */ has(key) {
+        return this._sourceStatesOrEmpty(key.source)[key.name] !== undefined;
+    }
+    /**
+   * Delete variable state by key.
+   * @param key
+   */ delete(key) {
+        var ref;
+        const result = this.has(key);
+        const sourceName = this._sourceName(key.source);
+        const sourceStates = this._state[sourceName];
+        // Delete var from source state
+        if (sourceStates) {
+            delete sourceStates[key.name];
+        }
+        // Delete source state from state if empty
+        if (((ref = Object.keys(sourceStates !== null && sourceStates !== void 0 ? sourceStates : {})) === null || ref === void 0 ? void 0 : ref.length) === 0) {
+            delete this._state[sourceName];
+        }
+        return result;
+    }
+    _sourceName(source) {
+        return source !== null && source !== void 0 ? source : this.DEFAULT_LOCAL_SOURCE_NAME;
+    }
+    _sourceStatesOrEmpty(source) {
+        var ref;
+        return (ref = this._state[this._sourceName(source)]) !== null && ref !== void 0 ? ref : {};
+    }
+    constructor(){
+        /**
+   * "Immerable" is mandatory to be able to use this class in an immer context.
+   * Ref: https://docs.pmnd.rs/zustand/integrations/immer-middleware#gotchas
+   */ this[_immerable] = true;
+        this.DEFAULT_LOCAL_SOURCE_NAME = '';
+        this._state = {};
+    }
+}
 const TemplateVariableContext = (0, _react.createContext)(undefined);
 function useTemplateVariableContext() {
     const ctx = (0, _react.useContext)(TemplateVariableContext);

package/dist/cjs/test/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./render"), exports);
+_exportStar(require("./mock-data"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/test/mock-data.js

@@ -0,0 +1,55 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MOCK_TIME_SERIES_DATA", {
+    enumerable: true,
+    get: ()=>MOCK_TIME_SERIES_DATA
+});
+const MOCK_TIME_SERIES_DATA = {
+    timeRange: {
+        start: new Date(1666625490000),
+        end: new Date(1666625535000)
+    },
+    stepMs: 24379,
+    series: [
+        {
+            name: 'device="/dev/vda1", env="demo", fstype="ext4", instance="demo.do.prometheus.io:9100", job="node", mountpoint="/"',
+            values: [
+                [
+                    1666479357903,
+                    0.27700745551584494
+                ],
+                [
+                    1666479382282,
+                    0.27701284657366565
+                ]
+            ]
+        },
+        {
+            name: 'device="/dev/vda15", env="demo", fstype="vfat", instance="demo.do.prometheus.io:9100", job="node", mountpoint="/boot/efi"',
+            values: [
+                [
+                    1666479357903,
+                    0.08486496097624885
+                ],
+                [
+                    1666479382282,
+                    0.08486496097624885
+                ]
+            ]
+        }
+    ]
+};

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type OptionsEditorRadio = {
+    label: string;
+    /**
+     * Content rendered when the tab is active.
+     */
+    content: React.ReactNode;
+};
+export declare type OptionsEditorRadiosProps = {
+    tabs: OptionsEditorRadio[];
+    defaultTab: number;
+    onModeChange: (value: number) => void;
+    isReadonly?: boolean;
+};
+export declare const OptionsEditorRadios: (props: OptionsEditorRadiosProps) => JSX.Element;
+//# sourceMappingURL=OptionsEditorRadios.d.ts.map

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsEditorRadios.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.tsx"],"names":[],"mappings":";AAiBA,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,oBAAY,wBAAwB,GAAG;IACrC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gBAuClE,CAAC"}

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.js

@@ -0,0 +1,68 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FormControl, FormControlLabel, Radio, RadioGroup, Box, Typography } from '@mui/material';
+import { useState } from 'react';
+import { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';
+export const OptionsEditorRadios = (props)=>{
+    const { tabs , defaultTab , onModeChange , isReadonly  } = props;
+    const [activeTab, setActiveTab] = useState(defaultTab);
+    const handleChange = (_, value)=>{
+        const v = parseInt(value);
+        setActiveTab(v);
+        onModeChange(v);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    borderBottom: 1,
+                    borderColor: (theme)=>theme.palette.divider
+                },
+                children: /*#__PURE__*/ _jsxs(FormControl, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "overline",
+                            component: "h4",
+                            children: "Mode:"
+                        }),
+                        /*#__PURE__*/ _jsx(RadioGroup, {
+                            row: true,
+                            defaultValue: defaultTab,
+                            value: activeTab,
+                            onChange: handleChange,
+                            "aria-labelledby": "Configuration radio",
+                            children: tabs.map(({ label  }, i)=>{
+                                return /*#__PURE__*/ _jsx(FormControlLabel, {
+                                    disabled: isReadonly,
+                                    value: i,
+                                    control: /*#__PURE__*/ _jsx(Radio, {}),
+                                    label: label
+                                }, label);
+                            })
+                        })
+                    ]
+                })
+            }),
+            tabs.map(({ label , content  }, i)=>{
+                return /*#__PURE__*/ _jsx(OptionsEditorTabPanel, {
+                    value: activeTab,
+                    index: i,
+                    children: content
+                }, label);
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=OptionsEditorRadios.js.map

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormControl, FormControlLabel, Radio, RadioGroup, RadioGroupProps, Box, Typography } from '@mui/material';\nimport { useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorRadio = {\n  label: string;\n  /**\n   * Content rendered when the tab is active.\n   */\n  content: React.ReactNode;\n};\n\nexport type OptionsEditorRadiosProps = {\n  tabs: OptionsEditorRadio[];\n  defaultTab: number;\n  onModeChange: (value: number) => void;\n  isReadonly?: boolean;\n};\n\nexport const OptionsEditorRadios = (props: OptionsEditorRadiosProps) => {\n  const { tabs, defaultTab, onModeChange, isReadonly } = props;\n  const [activeTab, setActiveTab] = useState(defaultTab);\n\n  const handleChange: RadioGroupProps['onChange'] = (_, value) => {\n    const v = parseInt(value);\n    setActiveTab(v);\n    onModeChange(v);\n  };\n\n  return (\n    <>\n      <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n        <FormControl>\n          <Typography variant=\"overline\" component=\"h4\">\n            Mode:\n          </Typography>\n          <RadioGroup\n            row\n            defaultValue={defaultTab}\n            value={activeTab}\n            onChange={handleChange}\n            aria-labelledby=\"Configuration radio\"\n          >\n            {tabs.map(({ label }, i) => {\n              return <FormControlLabel disabled={isReadonly} key={label} value={i} control={<Radio />} label={label} />;\n            })}\n          </RadioGroup>\n        </FormControl>\n      </Box>\n      {tabs.map(({ label, content }, i) => {\n        return (\n          <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n            {content}\n          </OptionsEditorTabPanel>\n        );\n      })}\n    </>\n  );\n};\n"],"names":["FormControl","FormControlLabel","Radio","RadioGroup","Box","Typography","useState","OptionsEditorTabPanel","OptionsEditorRadios","props","tabs","defaultTab","onModeChange","isReadonly","activeTab","setActiveTab","handleChange","_","value","v","parseInt","sx","borderBottom","borderColor","theme","palette","divider","variant","component","row","defaultValue","onChange","aria-labelledby","map","label","i","disabled","control","content","index"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,WAAW,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,UAAU,EAAmBC,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AACnH,SAASC,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,qBAAqB,QAAQ,0BAA0B,CAAC;AAiBjE,OAAO,MAAMC,mBAAmB,GAAG,CAACC,KAA+B,GAAK;IACtE,MAAM,EAAEC,IAAI,CAAA,EAAEC,UAAU,CAAA,EAAEC,YAAY,CAAA,EAAEC,UAAU,CAAA,EAAE,GAAGJ,KAAK,AAAC;IAC7D,MAAM,CAACK,SAAS,EAAEC,YAAY,CAAC,GAAGT,QAAQ,CAACK,UAAU,CAAC,AAAC;IAEvD,MAAMK,YAAY,GAAgC,CAACC,CAAC,EAAEC,KAAK,GAAK;QAC9D,MAAMC,CAAC,GAAGC,QAAQ,CAACF,KAAK,CAAC,AAAC;QAC1BH,YAAY,CAACI,CAAC,CAAC,CAAC;QAChBP,YAAY,CAACO,CAAC,CAAC,CAAC;IAClB,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACf,GAAG;gBAACiB,EAAE,EAAE;oBAAEC,YAAY,EAAE,CAAC;oBAAEC,WAAW,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,OAAO;iBAAE;0BACzE,cAAA,MAAC1B,WAAW;;sCACV,KAACK,UAAU;4BAACsB,OAAO,EAAC,UAAU;4BAACC,SAAS,EAAC,IAAI;sCAAC,OAE9C;0BAAa;sCACb,KAACzB,UAAU;4BACT0B,GAAG;4BACHC,YAAY,EAAEnB,UAAU;4BACxBO,KAAK,EAAEJ,SAAS;4BAChBiB,QAAQ,EAAEf,YAAY;4BACtBgB,iBAAe,EAAC,qBAAqB;sCAEpCtB,IAAI,CAACuB,GAAG,CAAC,CAAC,EAAEC,KAAK,CAAA,EAAE,EAAEC,CAAC,GAAK;gCAC1B,qBAAO,KAAClC,gBAAgB;oCAACmC,QAAQ,EAAEvB,UAAU;oCAAcK,KAAK,EAAEiB,CAAC;oCAAEE,OAAO,gBAAE,KAACnC,KAAK,KAAG;oCAAEgC,KAAK,EAAEA,KAAK;mCAAjDA,KAAK,CAAgD,CAAC;4BAC5G,CAAC,CAAC;0BACS;;kBACD;cACV;YACLxB,IAAI,CAACuB,GAAG,CAAC,CAAC,EAAEC,KAAK,CAAA,EAAEI,OAAO,CAAA,EAAE,EAAEH,CAAC,GAAK;gBACnC,qBACE,KAAC5B,qBAAqB;oBAAaW,KAAK,EAAEJ,SAAS;oBAAEyB,KAAK,EAAEJ,CAAC;8BAC1DG,OAAO;mBADkBJ,KAAK,CAET,CACxB;YACJ,CAAC,CAAC;;MACD,CACH;AACJ,CAAC,CAAC"}

package/dist/components/OptionsEditorRadios/index.d.ts

@@ -0,0 +1,2 @@
+export * from './OptionsEditorRadios';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/OptionsEditorRadios/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorRadios/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC"}

package/dist/components/OptionsEditorRadios/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './OptionsEditorRadios';
+
+//# sourceMappingURL=index.js.map

package/dist/components/OptionsEditorRadios/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/OptionsEditorRadios/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './OptionsEditorRadios';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB,CAAC"}

package/dist/components/OptionsEditorTabPanel/OptionsEditorTabPanel.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface OptionsEditorTabPanelProps {
+    children: React.ReactNode;
+    index: number;
+    value: number;
+}
+export declare function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps): JSX.Element;
+export {};
+//# sourceMappingURL=OptionsEditorTabPanel.d.ts.map

package/dist/components/OptionsEditorTabPanel/OptionsEditorTabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsEditorTabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.tsx"],"names":[],"mappings":";AAeA,UAAU,0BAA0B;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eAgBtE"}

package/dist/components/{OptionsEditorTabs/TabPanel.js → OptionsEditorTabPanel/OptionsEditorTabPanel.js}

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-export function TabPanel(props) {
+export function OptionsEditorTabPanel(props) {
     const { children , value , index , ...other } = props;
     const isActive = value === index;
     return /*#__PURE__*/ _jsx("div", {
@@ -28,4 +28,4 @@ export function TabPanel(props) {
     });
 }
 
-//# sourceMappingURL=TabPanel.js.map
+//# sourceMappingURL=OptionsEditorTabPanel.js.map

package/dist/components/OptionsEditorTabPanel/OptionsEditorTabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\n\ninterface OptionsEditorTabPanelProps {\n  children: React.ReactNode;\n  index: number;\n  value: number;\n}\n\nexport function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps) {\n  const { children, value, index, ...other } = props;\n\n  const isActive = value === index;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`options-editor-tabpanel-${index}`}\n      aria-labelledby={`options-editor-tab-${index}`}\n      {...other}\n    >\n      {isActive && <Box mt={2}>{children}</Box>}\n    </div>\n  );\n}\n"],"names":["Box","OptionsEditorTabPanel","props","children","value","index","other","isActive","div","role","hidden","id","aria-labelledby","mt"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAQpC,OAAO,SAASC,qBAAqB,CAACC,KAAiC,EAAE;IACvE,MAAM,EAAEC,QAAQ,CAAA,EAAEC,KAAK,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGC,KAAK,EAAE,GAAGJ,KAAK,AAAC;IAEnD,MAAMK,QAAQ,GAAGH,KAAK,KAAKC,KAAK,AAAC;IAEjC,qBACE,KAACG,KAAG;QACFC,IAAI,EAAC,UAAU;QACfC,MAAM,EAAE,CAACH,QAAQ;QACjBI,EAAE,EAAE,CAAC,wBAAwB,EAAEN,KAAK,CAAC,CAAC;QACtCO,iBAAe,EAAE,CAAC,mBAAmB,EAAEP,KAAK,CAAC,CAAC;QAC7C,GAAGC,KAAK;kBAERC,QAAQ,kBAAI,KAACP,GAAG;YAACa,EAAE,EAAE,CAAC;sBAAGV,QAAQ;UAAO;MACrC,CACN;AACJ,CAAC"}