@perses-dev/dashboards 0.8.0 → 0.9.0

package/dist/components/Variables/Variable.js

@@ -1 +1,202 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useEffect,useRef}from"react";import{Select,FormControl,InputLabel,MenuItem,Box,LinearProgress,IconButton,TextField}from"@mui/material";import{Reload}from"mdi-material-ui";import{useTemplateVariable,useTemplateVariableActions,useTemplateVariableStore}from"../../context";export function TemplateVariable({name:e}){var a;const l=null===(a=useTemplateVariable(e).definition)||void 0===a?void 0:a.kind;switch(l){case"TextVariable":return _jsx(TextVariable,{name:e});case"ListVariable":return _jsx(ListVariable,{name:e})}return _jsxs("div",{children:["Unsupported Variable Kind: $",l]})}function ListVariable({name:e}){var a,l,t,i;const r=useTemplateVariable(e),n=r.definition,{setVariableValue:o,loadTemplateVariable:s}=useTemplateVariableActions(),u=!0===(null==n?void 0:n.options.allowMultiple);useEffect((()=>{s(e)}),[e,s]);let d=null===(a=r.state)||void 0===a?void 0:a.value;return u&&!Array.isArray(d)&&(d=[]),_jsxs(Box,{display:"flex",children:[_jsxs(FormControl,{children:[_jsx(InputLabel,{id:e,children:e}),_jsx(Select,{id:e,label:e,value:d,onChange:a=>{o(e,a.target.value)},multiple:u,children:null===(t=null===(l=r.state)||void 0===l?void 0:l.options)||void 0===t?void 0:t.map((e=>_jsx(MenuItem,{value:e.value,children:e.label},e.value)))}),(null===(i=r.state)||void 0===i?void 0:i.loading)&&_jsx(LinearProgress,{})]}),_jsx(IconButton,{onClick:()=>s(e),children:_jsx(Reload,{})})]})}function TextVariable({name:e}){const{state:a}=useTemplateVariable(e),l=useTemplateVariableStore().setVariableValue,t=useRef(null);return _jsx(TextField,{ref:t,defaultValue:null==a?void 0:a.value,onBlur:a=>l(e,a.target.value),placeholder:e,label:e})}
+// Copyright 2022 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 } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';
+import { usePlugin, DEFAULT_ALL_VALUE, useTemplateVariableValues, useDatasourceStore } from '@perses-dev/plugin-system';
+import { useQuery } from '@tanstack/react-query';
+import { useTemplateVariable, useTemplateVariableActions, useTemplateVariableStore } from '../../context';
+export function TemplateVariable({ name  }) {
+    var ref;
+    const ctx = useTemplateVariable(name);
+    const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
+    switch(kind){
+        case 'TextVariable':
+            return /*#__PURE__*/ _jsx(TextVariable, {
+                name: name
+            });
+        case 'ListVariable':
+            return /*#__PURE__*/ _jsx(ListVariable, {
+                name: name
+            });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            "Unsupported Variable Kind: $",
+            kind
+        ]
+    });
+}
+/**
+ * Returns a serialized string of the current state of variable values.
+ */ function getVariableValuesKey(v) {
+    return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
+}
+function ListVariable({ name  }) {
+    var ref, ref1, ref2;
+    const ctx = useTemplateVariable(name);
+    const definition = ctx.definition;
+    const { data: variablePlugin  } = usePlugin('Variable', definition.spec.plugin.kind);
+    const { setVariableValue , setVariableLoading , setVariableOptions  } = useTemplateVariableActions();
+    const datasourceStore = useDatasourceStore();
+    const spec = definition.spec.plugin.spec;
+    let dependsOnVariables;
+    if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
+        dependsOnVariables = variablePlugin.dependsOn(spec);
+    }
+    const variables = useTemplateVariableValues(dependsOnVariables);
+    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
+    const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
+    let waitToLoad = false;
+    if (dependsOnVariables) {
+        waitToLoad = dependsOnVariables.some((v)=>{
+            var ref;
+            return (ref = variables[v]) === null || ref === void 0 ? void 0 : ref.loading;
+        });
+    }
+    const variablesValueKey = getVariableValuesKey(variables);
+    const variablesOptionsQuery = useQuery([
+        name,
+        definition,
+        variablesValueKey
+    ], async ()=>{
+        const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
+            datasourceStore,
+            variables
+        }));
+        var ref;
+        return (ref = resp === null || resp === void 0 ? void 0 : resp.data) !== null && ref !== void 0 ? ref : [];
+    }, {
+        enabled: !!variablePlugin || waitToLoad
+    });
+    useEffect(()=>{
+        setVariableLoading(name, variablesOptionsQuery.isFetching);
+        if (variablesOptionsQuery.data) {
+            setVariableOptions(name, variablesOptionsQuery.data);
+        }
+    }, [
+        variablesOptionsQuery,
+        name,
+        setVariableLoading,
+        setVariableOptions
+    ]);
+    let value = (ref = ctx.state) === null || ref === void 0 ? void 0 : ref.value;
+    const options = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.options;
+    const loading = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.loading;
+    // Make sure value is an array if allowMultiple is true
+    if (allowMultiple && !Array.isArray(value)) {
+        value = typeof value === 'string' ? [
+            value
+        ] : [];
+    }
+    const finalOptions = useMemo(()=>{
+        let computedOptions = options ? [
+            ...options
+        ] : [];
+        // Add the all value if it's allowed
+        if (allowAllValue) {
+            computedOptions = [
+                {
+                    value: DEFAULT_ALL_VALUE,
+                    label: 'All'
+                },
+                ...computedOptions
+            ];
+        }
+        return computedOptions;
+    }, [
+        options,
+        allowAllValue
+    ]);
+    useEffect(()=>{
+        const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
+        const valueIsInOptions = Boolean(finalOptions.find((v)=>{
+            if (allowMultiple) {
+                return value.includes(v.value);
+            }
+            return value === v.value;
+        }));
+        // If there is no value but there are options, set the value to the first option.
+        if (!value && firstOption) {
+            setVariableValue(name, firstOption.value);
+        }
+        // If there is a value but it's not in the options, select the first value or set to null
+        if (value && !valueIsInOptions && !definition.spec.default_value) {
+            setVariableValue(name, (firstOption === null || firstOption === void 0 ? void 0 : firstOption.value) || null);
+        }
+    }, [
+        finalOptions,
+        setVariableValue,
+        value,
+        name,
+        allowMultiple
+    ]);
+    return /*#__PURE__*/ _jsx(Box, {
+        display: 'flex',
+        children: /*#__PURE__*/ _jsxs(FormControl, {
+            children: [
+                /*#__PURE__*/ _jsx(InputLabel, {
+                    id: name,
+                    children: name
+                }),
+                /*#__PURE__*/ _jsxs(Select, {
+                    sx: {
+                        minWidth: 100,
+                        maxWidth: 250
+                    },
+                    id: name,
+                    label: name,
+                    value: value !== null && value !== void 0 ? value : '',
+                    onChange: (e)=>{
+                        // Must be selected
+                        if (e.target.value === null || e.target.value.length === 0) {
+                            if (allowAllValue) {
+                                setVariableValue(name, DEFAULT_ALL_VALUE);
+                            }
+                            return;
+                        }
+                        setVariableValue(name, e.target.value);
+                    },
+                    multiple: allowMultiple,
+                    children: [
+                        loading && /*#__PURE__*/ _jsx(MenuItem, {
+                            value: "loading",
+                            disabled: true,
+                            children: "Loading"
+                        }),
+                        finalOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: option.value,
+                                children: option.label
+                            }, option.value))
+                    ]
+                }),
+                loading && /*#__PURE__*/ _jsx(LinearProgress, {})
+            ]
+        })
+    });
+}
+function TextVariable({ name  }) {
+    const { state  } = useTemplateVariable(name);
+    const s = useTemplateVariableStore();
+    const setVariableValue = s.setVariableValue;
+    const ref = useRef(null);
+    return /*#__PURE__*/ _jsx(TextField, {
+        ref: ref,
+        defaultValue: state === null || state === void 0 ? void 0 : state.value,
+        onBlur: (e)=>setVariableValue(name, e.target.value),
+        placeholder: name,
+        label: name
+    });
+}
+
+//# sourceMappingURL=Variable.js.map

package/dist/components/Variables/Variable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"sourcesContent":["// Copyright 2022 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 { useEffect, useMemo, useRef } from 'react';\nimport { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';\nimport { VariableName, ListVariableDefinition, VariableValue } from '@perses-dev/core';\nimport {\n  usePlugin,\n  DEFAULT_ALL_VALUE,\n  useTemplateVariableValues,\n  VariableStateMap,\n  useDatasourceStore,\n} from '@perses-dev/plugin-system';\nimport { useQuery } from '@tanstack/react-query';\nimport { useTemplateVariable, useTemplateVariableActions, useTemplateVariableStore } from '../../context';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n};\n\nexport function TemplateVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} />;\n    case 'ListVariable':\n      return <ListVariable name={name} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nfunction getVariableValuesKey(v: VariableStateMap) {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n\nfunction ListVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const definition = ctx.definition as ListVariableDefinition;\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n  const datasourceStore = useDatasourceStore();\n\n  const spec = definition.spec.plugin.spec;\n\n  let dependsOnVariables: string[] | undefined;\n  if (variablePlugin?.dependsOn) {\n    dependsOnVariables = variablePlugin.dependsOn(spec);\n  }\n\n  const variables = useTemplateVariableValues(dependsOnVariables);\n  const allowMultiple = definition?.spec.allow_multiple === true;\n  const allowAllValue = definition?.spec.allow_all_value === true;\n\n  let waitToLoad = false;\n  if (dependsOnVariables) {\n    waitToLoad = dependsOnVariables.some((v) => variables[v]?.loading);\n  }\n\n  const variablesValueKey = getVariableValuesKey(variables);\n\n  const variablesOptionsQuery = useQuery(\n    [name, definition, variablesValueKey],\n    async () => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables });\n      return resp?.data ?? [];\n    },\n    { enabled: !!variablePlugin || waitToLoad }\n  );\n\n  useEffect(() => {\n    setVariableLoading(name, variablesOptionsQuery.isFetching);\n    if (variablesOptionsQuery.data) {\n      setVariableOptions(name, variablesOptionsQuery.data);\n    }\n  }, [variablesOptionsQuery, name, setVariableLoading, setVariableOptions]);\n\n  let value = ctx.state?.value;\n  const options = ctx.state?.options;\n  const loading = ctx.state?.loading;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  const finalOptions = useMemo(() => {\n    let computedOptions = options ? [...options] : [];\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [options, allowAllValue]);\n\n  useEffect(() => {\n    const firstOption = finalOptions?.[0];\n    const valueIsInOptions = Boolean(\n      finalOptions.find((v) => {\n        if (allowMultiple) {\n          return (value as string[]).includes(v.value);\n        }\n        return value === v.value;\n      })\n    );\n\n    // If there is no value but there are options, set the value to the first option.\n    if (!value && firstOption) {\n      setVariableValue(name, firstOption.value);\n    }\n\n    // If there is a value but it's not in the options, select the first value or set to null\n    if (value && !valueIsInOptions && !definition.spec.default_value) {\n      setVariableValue(name, firstOption?.value || null);\n    }\n  }, [finalOptions, setVariableValue, value, name, allowMultiple]);\n\n  return (\n    <Box display={'flex'}>\n      <FormControl>\n        <InputLabel id={name}>{name}</InputLabel>\n        <Select\n          sx={{ minWidth: 100, maxWidth: 250 }}\n          id={name}\n          label={name}\n          value={value ?? ''}\n          onChange={(e) => {\n            // Must be selected\n            if (e.target.value === null || e.target.value.length === 0) {\n              if (allowAllValue) {\n                setVariableValue(name, DEFAULT_ALL_VALUE);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue);\n          }}\n          multiple={allowMultiple}\n        >\n          {loading && (\n            <MenuItem value=\"loading\" disabled>\n              Loading\n            </MenuItem>\n          )}\n          {finalOptions.map((option) => (\n            <MenuItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuItem>\n          ))}\n        </Select>\n        {loading && <LinearProgress />}\n      </FormControl>\n    </Box>\n  );\n}\n\nfunction TextVariable({ name }: TemplateVariableProps) {\n  const { state } = useTemplateVariable(name);\n  const s = useTemplateVariableStore();\n  const setVariableValue = s.setVariableValue;\n  const ref = useRef<HTMLInputElement>(null);\n  return (\n    <TextField\n      ref={ref}\n      defaultValue={state?.value}\n      onBlur={(e) => setVariableValue(name, e.target.value)}\n      placeholder={name}\n      label={name}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useRef","Select","FormControl","InputLabel","MenuItem","Box","LinearProgress","TextField","usePlugin","DEFAULT_ALL_VALUE","useTemplateVariableValues","useDatasourceStore","useQuery","useTemplateVariable","useTemplateVariableActions","useTemplateVariableStore","TemplateVariable","name","ctx","kind","definition","TextVariable","ListVariable","div","getVariableValuesKey","v","Object","values","map","JSON","stringify","value","join","data","variablePlugin","spec","plugin","setVariableValue","setVariableLoading","setVariableOptions","datasourceStore","dependsOnVariables","dependsOn","variables","allowMultiple","allow_multiple","allowAllValue","allow_all_value","waitToLoad","some","loading","variablesValueKey","variablesOptionsQuery","resp","getVariableOptions","enabled","isFetching","state","options","Array","isArray","finalOptions","computedOptions","label","firstOption","valueIsInOptions","Boolean","find","includes","default_value","display","id","sx","minWidth","maxWidth","onChange","e","target","length","multiple","disabled","option","s","ref","defaultValue","onBlur","placeholder"],"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,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO,CAAC;AACnD,SAASC,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,cAAc,EAAEC,SAAS,QAAQ,eAAe,CAAC;AAE1G,SACEC,SAAS,EACTC,iBAAiB,EACjBC,yBAAyB,EAEzBC,kBAAkB,QACb,2BAA2B,CAAC;AACnC,SAASC,QAAQ,QAAQ,uBAAuB,CAAC;AACjD,SAASC,mBAAmB,EAAEC,0BAA0B,EAAEC,wBAAwB,QAAQ,eAAe,CAAC;AAM1G,OAAO,SAASC,gBAAgB,CAAC,EAAEC,IAAI,CAAA,EAAyB,EAAE;QAEnDC,GAAc;IAD3B,MAAMA,GAAG,GAAGL,mBAAmB,CAACI,IAAI,CAAC,AAAC;IACtC,MAAME,IAAI,GAAGD,CAAAA,GAAc,GAAdA,GAAG,CAACE,UAAU,cAAdF,GAAc,WAAM,GAApBA,KAAAA,CAAoB,GAApBA,GAAc,CAAEC,IAAI,AAAC;IAClC,OAAQA,IAAI;QACV,KAAK,cAAc;YACjB,qBAAO,KAACE,YAAY;gBAACJ,IAAI,EAAEA,IAAI;cAAI,CAAC;QACtC,KAAK,cAAc;YACjB,qBAAO,KAACK,YAAY;gBAACL,IAAI,EAAEA,IAAI;cAAI,CAAC;KACvC;IAED,qBAAO,MAACM,KAAG;;YAAC,8BAA4B;YAACJ,IAAI;;MAAO,CAAC;AACvD,CAAC;AAED;;CAEC,GACD,SAASK,oBAAoB,CAACC,CAAmB,EAAE;IACjD,OAAOC,MAAM,CAACC,MAAM,CAACF,CAAC,CAAC,CACpBG,GAAG,CAAC,CAACH,CAAC,GAAKI,IAAI,CAACC,SAAS,CAACL,CAAC,CAACM,KAAK,CAAC,CAAC,CACnCC,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC;AAED,SAASV,YAAY,CAAC,EAAEL,IAAI,CAAA,EAAyB,EAAE;QAyCzCC,GAAS,EACLA,IAAS,EACTA,IAAS;IA1CzB,MAAMA,GAAG,GAAGL,mBAAmB,CAACI,IAAI,CAAC,AAAC;IACtC,MAAMG,UAAU,GAAGF,GAAG,CAACE,UAAU,AAA0B,AAAC;IAC5D,MAAM,EAAEa,IAAI,EAAEC,cAAc,CAAA,EAAE,GAAG1B,SAAS,CAAC,UAAU,EAAEY,UAAU,CAACe,IAAI,CAACC,MAAM,CAACjB,IAAI,CAAC,AAAC;IACpF,MAAM,EAAEkB,gBAAgB,CAAA,EAAEC,kBAAkB,CAAA,EAAEC,kBAAkB,CAAA,EAAE,GAAGzB,0BAA0B,EAAE,AAAC;IAClG,MAAM0B,eAAe,GAAG7B,kBAAkB,EAAE,AAAC;IAE7C,MAAMwB,IAAI,GAAGf,UAAU,CAACe,IAAI,CAACC,MAAM,CAACD,IAAI,AAAC;IAEzC,IAAIM,kBAAkB,AAAsB,AAAC;IAC7C,IAAIP,cAAc,aAAdA,cAAc,WAAW,GAAzBA,KAAAA,CAAyB,GAAzBA,cAAc,CAAEQ,SAAS,EAAE;QAC7BD,kBAAkB,GAAGP,cAAc,CAACQ,SAAS,CAACP,IAAI,CAAC,CAAC;IACtD,CAAC;IAED,MAAMQ,SAAS,GAAGjC,yBAAyB,CAAC+B,kBAAkB,CAAC,AAAC;IAChE,MAAMG,aAAa,GAAGxB,CAAAA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAEe,IAAI,CAACU,cAAc,MAAK,IAAI,AAAC;IAC/D,MAAMC,aAAa,GAAG1B,CAAAA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAEe,IAAI,CAACY,eAAe,MAAK,IAAI,AAAC;IAEhE,IAAIC,UAAU,GAAG,KAAK,AAAC;IACvB,IAAIP,kBAAkB,EAAE;QACtBO,UAAU,GAAGP,kBAAkB,CAACQ,IAAI,CAAC,CAACxB,CAAC;gBAAKkB,GAAY;YAAZA,OAAAA,CAAAA,GAAY,GAAZA,SAAS,CAAClB,CAAC,CAAC,cAAZkB,GAAY,WAAS,GAArBA,KAAAA,CAAqB,GAArBA,GAAY,CAAEO,OAAO,CAAA;SAAA,CAAC,CAAC;IACrE,CAAC;IAED,MAAMC,iBAAiB,GAAG3B,oBAAoB,CAACmB,SAAS,CAAC,AAAC;IAE1D,MAAMS,qBAAqB,GAAGxC,QAAQ,CACpC;QAACK,IAAI;QAAEG,UAAU;QAAE+B,iBAAiB;KAAC,EACrC,UAAY;QACV,MAAME,IAAI,GAAG,OAAMnB,cAAc,aAAdA,cAAc,WAAoB,GAAlCA,KAAAA,CAAkC,GAAlCA,cAAc,CAAEoB,kBAAkB,CAACnB,IAAI,EAAE;YAAEK,eAAe;YAAEG,SAAS;SAAE,CAAC,CAAA,AAAC;YACrFU,GAAU;QAAjB,OAAOA,CAAAA,GAAU,GAAVA,IAAI,aAAJA,IAAI,WAAM,GAAVA,KAAAA,CAAU,GAAVA,IAAI,CAAEpB,IAAI,cAAVoB,GAAU,cAAVA,GAAU,GAAI,EAAE,CAAC;IAC1B,CAAC,EACD;QAAEE,OAAO,EAAE,CAAC,CAACrB,cAAc,IAAIc,UAAU;KAAE,CAC5C,AAAC;IAEFlD,SAAS,CAAC,IAAM;QACdwC,kBAAkB,CAACrB,IAAI,EAAEmC,qBAAqB,CAACI,UAAU,CAAC,CAAC;QAC3D,IAAIJ,qBAAqB,CAACnB,IAAI,EAAE;YAC9BM,kBAAkB,CAACtB,IAAI,EAAEmC,qBAAqB,CAACnB,IAAI,CAAC,CAAC;QACvD,CAAC;IACH,CAAC,EAAE;QAACmB,qBAAqB;QAAEnC,IAAI;QAAEqB,kBAAkB;QAAEC,kBAAkB;KAAC,CAAC,CAAC;IAE1E,IAAIR,KAAK,GAAGb,CAAAA,GAAS,GAATA,GAAG,CAACuC,KAAK,cAATvC,GAAS,WAAO,GAAhBA,KAAAA,CAAgB,GAAhBA,GAAS,CAAEa,KAAK,AAAC;IAC7B,MAAM2B,OAAO,GAAGxC,CAAAA,IAAS,GAATA,GAAG,CAACuC,KAAK,cAATvC,IAAS,WAAS,GAAlBA,KAAAA,CAAkB,GAAlBA,IAAS,CAAEwC,OAAO,AAAC;IACnC,MAAMR,OAAO,GAAGhC,CAAAA,IAAS,GAATA,GAAG,CAACuC,KAAK,cAATvC,IAAS,WAAS,GAAlBA,KAAAA,CAAkB,GAAlBA,IAAS,CAAEgC,OAAO,AAAC;IAEnC,uDAAuD;IACvD,IAAIN,aAAa,IAAI,CAACe,KAAK,CAACC,OAAO,CAAC7B,KAAK,CAAC,EAAE;QAC1CA,KAAK,GAAG,OAAOA,KAAK,KAAK,QAAQ,GAAG;YAACA,KAAK;SAAC,GAAG,EAAE,CAAC;IACnD,CAAC;IAED,MAAM8B,YAAY,GAAG9D,OAAO,CAAC,IAAM;QACjC,IAAI+D,eAAe,GAAGJ,OAAO,GAAG;eAAIA,OAAO;SAAC,GAAG,EAAE,AAAC;QAElD,oCAAoC;QACpC,IAAIZ,aAAa,EAAE;YACjBgB,eAAe,GAAG;gBAAC;oBAAE/B,KAAK,EAAEtB,iBAAiB;oBAAEsD,KAAK,EAAE,KAAK;iBAAE;mBAAKD,eAAe;aAAC,CAAC;QACrF,CAAC;QACD,OAAOA,eAAe,CAAC;IACzB,CAAC,EAAE;QAACJ,OAAO;QAAEZ,aAAa;KAAC,CAAC,AAAC;IAE7BhD,SAAS,CAAC,IAAM;QACd,MAAMkE,WAAW,GAAGH,YAAY,aAAZA,YAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,YAAY,AAAE,CAAC,CAAC,CAAC,AAAC;QACtC,MAAMI,gBAAgB,GAAGC,OAAO,CAC9BL,YAAY,CAACM,IAAI,CAAC,CAAC1C,CAAC,GAAK;YACvB,IAAImB,aAAa,EAAE;gBACjB,OAAO,AAACb,KAAK,CAAcqC,QAAQ,CAAC3C,CAAC,CAACM,KAAK,CAAC,CAAC;YAC/C,CAAC;YACD,OAAOA,KAAK,KAAKN,CAAC,CAACM,KAAK,CAAC;QAC3B,CAAC,CAAC,CACH,AAAC;QAEF,iFAAiF;QACjF,IAAI,CAACA,KAAK,IAAIiC,WAAW,EAAE;YACzB3B,gBAAgB,CAACpB,IAAI,EAAE+C,WAAW,CAACjC,KAAK,CAAC,CAAC;QAC5C,CAAC;QAED,yFAAyF;QACzF,IAAIA,KAAK,IAAI,CAACkC,gBAAgB,IAAI,CAAC7C,UAAU,CAACe,IAAI,CAACkC,aAAa,EAAE;YAChEhC,gBAAgB,CAACpB,IAAI,EAAE+C,CAAAA,WAAW,aAAXA,WAAW,WAAO,GAAlBA,KAAAA,CAAkB,GAAlBA,WAAW,CAAEjC,KAAK,CAAA,IAAI,IAAI,CAAC,CAAC;QACrD,CAAC;IACH,CAAC,EAAE;QAAC8B,YAAY;QAAExB,gBAAgB;QAAEN,KAAK;QAAEd,IAAI;QAAE2B,aAAa;KAAC,CAAC,CAAC;IAEjE,qBACE,KAACvC,GAAG;QAACiE,OAAO,EAAE,MAAM;kBAClB,cAAA,MAACpE,WAAW;;8BACV,KAACC,UAAU;oBAACoE,EAAE,EAAEtD,IAAI;8BAAGA,IAAI;kBAAc;8BACzC,MAAChB,MAAM;oBACLuE,EAAE,EAAE;wBAAEC,QAAQ,EAAE,GAAG;wBAAEC,QAAQ,EAAE,GAAG;qBAAE;oBACpCH,EAAE,EAAEtD,IAAI;oBACR8C,KAAK,EAAE9C,IAAI;oBACXc,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE;oBAClB4C,QAAQ,EAAE,CAACC,CAAC,GAAK;wBACf,mBAAmB;wBACnB,IAAIA,CAAC,CAACC,MAAM,CAAC9C,KAAK,KAAK,IAAI,IAAI6C,CAAC,CAACC,MAAM,CAAC9C,KAAK,CAAC+C,MAAM,KAAK,CAAC,EAAE;4BAC1D,IAAIhC,aAAa,EAAE;gCACjBT,gBAAgB,CAACpB,IAAI,EAAER,iBAAiB,CAAC,CAAC;4BAC5C,CAAC;4BACD,OAAO;wBACT,CAAC;wBACD4B,gBAAgB,CAACpB,IAAI,EAAE2D,CAAC,CAACC,MAAM,CAAC9C,KAAK,CAAkB,CAAC;oBAC1D,CAAC;oBACDgD,QAAQ,EAAEnC,aAAa;;wBAEtBM,OAAO,kBACN,KAAC9C,QAAQ;4BAAC2B,KAAK,EAAC,SAAS;4BAACiD,QAAQ;sCAAC,SAEnC;0BAAW,AACZ;wBACAnB,YAAY,CAACjC,GAAG,CAAC,CAACqD,MAAM,iBACvB,KAAC7E,QAAQ;gCAAoB2B,KAAK,EAAEkD,MAAM,CAAClD,KAAK;0CAC7CkD,MAAM,CAAClB,KAAK;+BADAkB,MAAM,CAAClD,KAAK,CAEhB,AACZ,CAAC;;kBACK;gBACRmB,OAAO,kBAAI,KAAC5C,cAAc,KAAG;;UAClB;MACV,CACN;AACJ,CAAC;AAED,SAASe,YAAY,CAAC,EAAEJ,IAAI,CAAA,EAAyB,EAAE;IACrD,MAAM,EAAEwC,KAAK,CAAA,EAAE,GAAG5C,mBAAmB,CAACI,IAAI,CAAC,AAAC;IAC5C,MAAMiE,CAAC,GAAGnE,wBAAwB,EAAE,AAAC;IACrC,MAAMsB,gBAAgB,GAAG6C,CAAC,CAAC7C,gBAAgB,AAAC;IAC5C,MAAM8C,GAAG,GAAGnF,MAAM,CAAmB,IAAI,CAAC,AAAC;IAC3C,qBACE,KAACO,SAAS;QACR4E,GAAG,EAAEA,GAAG;QACRC,YAAY,EAAE3B,KAAK,aAALA,KAAK,WAAO,GAAZA,KAAAA,CAAY,GAAZA,KAAK,CAAE1B,KAAK;QAC1BsD,MAAM,EAAE,CAACT,CAAC,GAAKvC,gBAAgB,CAACpB,IAAI,EAAE2D,CAAC,CAACC,MAAM,CAAC9C,KAAK,CAAC;QACrDuD,WAAW,EAAErE,IAAI;QACjB8C,KAAK,EAAE9C,IAAI;MACX,CACF;AACJ,CAAC"}

package/dist/components/Variables/VariableList.js

@@ -1 +1,108 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState}from"react";import{Button,Stack,Box,Drawer,TableContainer,TableBody,TableRow,TableCell,Table,Paper,TableHead}from"@mui/material";import{useTemplateVariableDefinitions,useEditMode}from"../../context";import{TemplateVariable}from"./Variable";export function TemplateVariableList(){const[e,a]=useState(!1),l=useTemplateVariableDefinitions(),{isEditMode:i}=useEditMode();return _jsxs(Box,{m:2,children:[_jsx(Drawer,{anchor:"right",open:e,onClose:()=>a(!1),children:_jsxs(Box,{width:900,p:4,children:[_jsx(TableContainer,{component:Paper,children:_jsxs(Table,{sx:{minWidth:650},"aria-label":"simple table",children:[_jsx(TableHead,{children:_jsxs(TableRow,{children:[_jsx(TableCell,{children:"Variable Name"}),_jsx(TableCell,{align:"right",children:"Type"})]})}),_jsx(TableBody,{children:l.map((e=>_jsxs(TableRow,{sx:{"&:last-child td, &:last-child th":{border:0}},children:[_jsx(TableCell,{component:"th",scope:"row",sx:{fontWeight:"bold"},children:e.name}),_jsx(TableCell,{align:"right",children:e.kind})]},e.name)))})]})}),_jsx("pre",{children:JSON.stringify(l,null,2)})]})}),_jsx(Box,{display:"flex",justifyContent:"space-between",children:_jsxs(Stack,{direction:"row",spacing:2,children:[l.map((e=>_jsx(Box,{children:_jsx(TemplateVariable,{name:e.name},e.name)},e.name))),i&&_jsx(Button,{onClick:()=>a(!0),children:"Modify Variables"})]})})]})}
+// Copyright 2022 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 { useState } from 'react';
+import { Button, Stack, Box, Drawer, TableContainer, TableBody, TableRow, TableCell, Table, Paper, TableHead } from '@mui/material';
+import { useTemplateVariableDefinitions, useEditMode } from '../../context';
+import { TemplateVariable } from './Variable';
+export function TemplateVariableList() {
+    const [isEditing, setIsEditing] = useState(false);
+    const variableDefinitions = useTemplateVariableDefinitions();
+    const { isEditMode  } = useEditMode();
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Drawer, {
+                anchor: 'right',
+                open: isEditing,
+                onClose: ()=>setIsEditing(false),
+                children: /*#__PURE__*/ _jsxs(Box, {
+                    width: 900,
+                    p: 4,
+                    children: [
+                        /*#__PURE__*/ _jsx(TableContainer, {
+                            component: Paper,
+                            children: /*#__PURE__*/ _jsxs(Table, {
+                                sx: {
+                                    minWidth: 650
+                                },
+                                "aria-label": "simple table",
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableHead, {
+                                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: "Variable Name"
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    align: "right",
+                                                    children: "Type"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableBody, {
+                                        children: variableDefinitions.map((v)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                                sx: {
+                                                    '&:last-child td, &:last-child th': {
+                                                        border: 0
+                                                    }
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        component: "th",
+                                                        scope: "row",
+                                                        sx: {
+                                                            fontWeight: 'bold'
+                                                        },
+                                                        children: v.spec.name
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: v.kind
+                                                    })
+                                                ]
+                                            }, v.spec.name))
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("pre", {
+                            children: JSON.stringify(variableDefinitions, null, 2)
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                display: 'flex',
+                justifyContent: "space-between",
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    direction: 'row',
+                    spacing: 2,
+                    children: [
+                        variableDefinitions.map((v)=>/*#__PURE__*/ _jsx(Box, {
+                                children: /*#__PURE__*/ _jsx(TemplateVariable, {
+                                    name: v.spec.name
+                                }, v.spec.name)
+                            }, v.spec.name)),
+                        isEditMode && /*#__PURE__*/ _jsx(Button, {
+                            onClick: ()=>setIsEditing(true),
+                            children: "Modify Variables"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=VariableList.js.map

package/dist/components/Variables/VariableList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Variables/VariableList.tsx"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  Drawer,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell,\n  Table,\n  Paper,\n  TableHead,\n} from '@mui/material';\nimport { useTemplateVariableDefinitions, useEditMode } from '../../context';\nimport { TemplateVariable } from './Variable';\n\nexport function TemplateVariableList() {\n  const [isEditing, setIsEditing] = useState(false);\n  const variableDefinitions = useTemplateVariableDefinitions();\n  const { isEditMode } = useEditMode();\n  return (\n    <>\n      <Drawer anchor={'right'} open={isEditing} onClose={() => setIsEditing(false)}>\n        <Box width={900} p={4}>\n          <TableContainer component={Paper}>\n            <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Variable Name</TableCell>\n                  <TableCell align=\"right\">Type</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {variableDefinitions.map((v) => (\n                  <TableRow key={v.spec.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>\n                    <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                      {v.spec.name}\n                    </TableCell>\n                    <TableCell align=\"right\">{v.kind}</TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <pre>{JSON.stringify(variableDefinitions, null, 2)}</pre>\n        </Box>\n      </Drawer>\n      <Box display={'flex'} justifyContent=\"space-between\">\n        <Stack direction={'row'} spacing={2}>\n          {variableDefinitions.map((v) => (\n            <Box key={v.spec.name}>\n              <TemplateVariable key={v.spec.name} name={v.spec.name} />\n            </Box>\n          ))}\n          {isEditMode && <Button onClick={() => setIsEditing(true)}>Modify Variables</Button>}\n        </Stack>\n      </Box>\n    </>\n  );\n}\n"],"names":["useState","Button","Stack","Box","Drawer","TableContainer","TableBody","TableRow","TableCell","Table","Paper","TableHead","useTemplateVariableDefinitions","useEditMode","TemplateVariable","TemplateVariableList","isEditing","setIsEditing","variableDefinitions","isEditMode","anchor","open","onClose","width","p","component","sx","minWidth","aria-label","align","map","v","border","scope","fontWeight","spec","name","kind","pre","JSON","stringify","display","justifyContent","direction","spacing","onClick"],"mappings":"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"}

package/dist/components/Variables/index.js

@@ -1 +1,16 @@
-export*from"./Variable";export*from"./VariableList";
+// Copyright 2022 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 './Variable';
+export * from './VariableList';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Variables/index.tsx"],"sourcesContent":["// Copyright 2022 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 './Variable';\nexport * from './VariableList';\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,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Dashboard';
 export * from './GridLayout';
 export * from './Panel';
+export * from './PanelDrawer';
 export * from './TimeRangeControls';
 export * from './Variables';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC"}

package/dist/components/index.js

@@ -1 +1,20 @@
-export*from"./Dashboard";export*from"./GridLayout";export*from"./Panel";export*from"./TimeRangeControls";export*from"./Variables";
+// Copyright 2022 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 './Dashboard';
+export * from './GridLayout';
+export * from './Panel';
+export * from './PanelDrawer';
+export * from './TimeRangeControls';
+export * from './Variables';
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["// Copyright 2022 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 './Dashboard';\nexport * from './GridLayout';\nexport * from './Panel';\nexport * from './PanelDrawer';\nexport * from './TimeRangeControls';\nexport * from './Variables';\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,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC"}

package/dist/context/DashboardAppSlice.js

@@ -1 +1,45 @@
-import{immer}from"zustand/middleware/immer";import{useDashboardStore}from"./DashboardProvider";export const createDashboardAppSlice=immer((e=>({openPanelDrawer:({groupIndex:a,panelKey:r})=>e((e=>{e.panelDrawer={groupIndex:a,panelKey:r}})),closePanelDrawer:()=>e((e=>{e.panelDrawer=void 0})),openPanelGroupDialog:a=>e((e=>{e.panelGroupDialog={groupIndex:a}})),closePanelGroupDialog:()=>e((e=>{e.panelGroupDialog=void 0}))})));export function useDashboardApp(){return useDashboardStore((({panelDrawer:e,openPanelDrawer:a,closePanelDrawer:r,panelGroupDialog:o,openPanelGroupDialog:l,closePanelGroupDialog:p})=>({panelDrawer:e,openPanelDrawer:a,closePanelDrawer:r,panelGroupDialog:o,openPanelGroupDialog:l,closePanelGroupDialog:p})))}
+// Copyright 2022 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 { immer } from 'zustand/middleware/immer';
+import { useDashboardStore } from './DashboardProvider';
+export const createDashboardAppSlice = immer((set)=>({
+        openPanelDrawer: ({ groupIndex , panelKey  })=>set((state)=>{
+                state.panelDrawer = {
+                    groupIndex,
+                    panelKey
+                };
+            }),
+        closePanelDrawer: ()=>set((state)=>{
+                state.panelDrawer = undefined;
+            }),
+        openPanelGroupDialog: (groupIndex)=>set((state)=>{
+                state.panelGroupDialog = {
+                    groupIndex
+                };
+            }),
+        closePanelGroupDialog: ()=>set((state)=>{
+                state.panelGroupDialog = undefined;
+            })
+    }));
+export function useDashboardApp() {
+    return useDashboardStore(({ panelDrawer , openPanelDrawer , closePanelDrawer , panelGroupDialog , openPanelGroupDialog , closePanelGroupDialog ,  })=>({
+            panelDrawer,
+            openPanelDrawer,
+            closePanelDrawer,
+            panelGroupDialog,
+            openPanelGroupDialog,
+            closePanelGroupDialog
+        }));
+}
+
+//# sourceMappingURL=DashboardAppSlice.js.map

package/dist/context/DashboardAppSlice.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/DashboardAppSlice.tsx"],"sourcesContent":["// Copyright 2022 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 { immer } from 'zustand/middleware/immer';\nimport { useDashboardStore } from './DashboardProvider';\n\ninterface PanelDrawer {\n  groupIndex?: number;\n  panelKey?: string;\n}\ninterface PanelGroupDialog {\n  groupIndex?: number;\n}\n\nexport interface DashboardAppSlice {\n  panelDrawer?: PanelDrawer;\n  openPanelDrawer: (panelDrawer: PanelDrawer) => void;\n  closePanelDrawer: () => void;\n  panelGroupDialog?: PanelGroupDialog;\n  openPanelGroupDialog: (groupIndex?: number) => void;\n  closePanelGroupDialog: () => void;\n}\n\nexport const createDashboardAppSlice = immer<DashboardAppSlice>((set) => ({\n  openPanelDrawer: ({ groupIndex, panelKey }: PanelDrawer) =>\n    set((state) => {\n      state.panelDrawer = {\n        groupIndex,\n        panelKey,\n      };\n    }),\n  closePanelDrawer: () =>\n    set((state) => {\n      state.panelDrawer = undefined;\n    }),\n  openPanelGroupDialog: (groupIndex?: number) =>\n    set((state) => {\n      state.panelGroupDialog = { groupIndex };\n    }),\n  closePanelGroupDialog: () =>\n    set((state) => {\n      state.panelGroupDialog = undefined;\n    }),\n}));\n\nexport function useDashboardApp() {\n  return useDashboardStore(\n    ({\n      panelDrawer,\n      openPanelDrawer,\n      closePanelDrawer,\n      panelGroupDialog,\n      openPanelGroupDialog,\n      closePanelGroupDialog,\n    }) => ({\n      panelDrawer,\n      openPanelDrawer,\n      closePanelDrawer,\n      panelGroupDialog,\n      openPanelGroupDialog,\n      closePanelGroupDialog,\n    })\n  );\n}\n"],"names":["immer","useDashboardStore","createDashboardAppSlice","set","openPanelDrawer","groupIndex","panelKey","state","panelDrawer","closePanelDrawer","undefined","openPanelGroupDialog","panelGroupDialog","closePanelGroupDialog","useDashboardApp"],"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,SAASA,KAAK,QAAQ,0BAA0B,CAAC;AACjD,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AAmBxD,OAAO,MAAMC,uBAAuB,GAAGF,KAAK,CAAoB,CAACG,GAAG,GAAM,CAAA;QACxEC,eAAe,EAAE,CAAC,EAAEC,UAAU,CAAA,EAAEC,QAAQ,CAAA,EAAe,GACrDH,GAAG,CAAC,CAACI,KAAK,GAAK;gBACbA,KAAK,CAACC,WAAW,GAAG;oBAClBH,UAAU;oBACVC,QAAQ;iBACT,CAAC;YACJ,CAAC,CAAC;QACJG,gBAAgB,EAAE,IAChBN,GAAG,CAAC,CAACI,KAAK,GAAK;gBACbA,KAAK,CAACC,WAAW,GAAGE,SAAS,CAAC;YAChC,CAAC,CAAC;QACJC,oBAAoB,EAAE,CAACN,UAAmB,GACxCF,GAAG,CAAC,CAACI,KAAK,GAAK;gBACbA,KAAK,CAACK,gBAAgB,GAAG;oBAAEP,UAAU;iBAAE,CAAC;YAC1C,CAAC,CAAC;QACJQ,qBAAqB,EAAE,IACrBV,GAAG,CAAC,CAACI,KAAK,GAAK;gBACbA,KAAK,CAACK,gBAAgB,GAAGF,SAAS,CAAC;YACrC,CAAC,CAAC;KACL,CAAA,AAAC,CAAC,CAAC;AAEJ,OAAO,SAASI,eAAe,GAAG;IAChC,OAAOb,iBAAiB,CACtB,CAAC,EACCO,WAAW,CAAA,EACXJ,eAAe,CAAA,EACfK,gBAAgB,CAAA,EAChBG,gBAAgB,CAAA,EAChBD,oBAAoB,CAAA,EACpBE,qBAAqB,CAAA,IACtB,GAAM,CAAA;YACLL,WAAW;YACXJ,eAAe;YACfK,gBAAgB;YAChBG,gBAAgB;YAChBD,oBAAoB;YACpBE,qBAAqB;SACtB,CAAA,AAAC,CACH,CAAC;AACJ,CAAC"}

package/dist/context/DashboardProvider.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { StoreApi } from 'zustand';
 import { DashboardSpec, LayoutDefinition, PanelDefinition } from '@perses-dev/core';
 import { DashboardAppSlice } from './DashboardAppSlice';
 import { LayoutsSlice } from './LayoutsSlice';
@@ -19,8 +20,8 @@ export interface DashboardProviderProps {
     children?: React.ReactNode;
 }
 export declare function usePanels(): {
-    panels: Record<string, PanelDefinition<import("@perses-dev/core").JsonObject>>;
-    updatePanel: (name: string, panel: PanelDefinition<import("@perses-dev/core").JsonObject>, groupIndex?: number | undefined) => void;
+    panels: Record<string, PanelDefinition<unknown>>;
+    updatePanel: (name: string, panel: PanelDefinition<unknown>, groupIndex?: number | undefined) => void;
 };
 export declare function useEditMode(): {
     isEditMode: boolean;
@@ -29,6 +30,7 @@ export declare function useEditMode(): {
 export declare function useDashboard(): {
     dashboard: DashboardSpec;
 };
+export declare const DashboardContext: import("react").Context<StoreApi<DashboardStoreState> | undefined>;
 export declare function useDashboardStore<T>(selector: (state: DashboardStoreState) => T): T;
 export declare function DashboardProvider(props: DashboardProviderProps): JSX.Element;
 //# sourceMappingURL=DashboardProvider.d.ts.map

package/dist/context/DashboardProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../src/context/DashboardProvider.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAE,aAAa,EAAsB,gBAAgB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB,EAAE,YAAY;IAC1E,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACxC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,SAAS;;;EAExB;AAED,wBAAgB,WAAW;;;EAE1B;AAED,wBAAgB,YAAY;;EAU3B;AAID,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAqD9D"}
+{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../src/context/DashboardProvider.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,OAAO,EAAE,aAAa,EAAsB,gBAAgB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB,EAAE,YAAY;IAC1E,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACxC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,SAAS;;;EAExB;AAED,wBAAgB,WAAW;;;EAE1B;AAED,wBAAgB,YAAY;;EAU3B;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAsD9D"}

package/dist/context/DashboardProvider.js

@@ -1 +1,107 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{createStore,useStore}from"zustand";import{immer}from"zustand/middleware/immer";import shallow from"zustand/shallow";import{createContext,useContext}from"react";import produce from"immer";import{createDashboardAppSlice}from"./DashboardAppSlice";import{createLayoutsSlice}from"./LayoutsSlice";export function usePanels(){return useDashboardStore((({panels:e,updatePanel:o})=>({panels:e,updatePanel:o})))}export function useEditMode(){return useDashboardStore((({isEditMode:e,setEditMode:o})=>({isEditMode:e,setEditMode:o})))}export function useDashboard(){return{dashboard:useDashboardStore((e=>produce(e.dashboard,(o=>{o.panels=e.panels,o.layouts=e.layouts}))))}}const DashboardContext=createContext(void 0);export function useDashboardStore(e){const o=useContext(DashboardContext);if(void 0===o)throw new Error("No DashboardContext found. Did you forget a Provider?");return useStore(o,e,shallow)}export function DashboardProvider(e){const{children:o,initialState:{dashboardSpec:t,isEditMode:r}}=e,{layouts:a,panels:s}=t,d=createStore()(immer(((e,o,d)=>({...createDashboardAppSlice(e,o,d,[]),...createLayoutsSlice(e,o,d,[]),layouts:a,panels:s,dashboard:t,updatePanel:(o,t,r=0)=>e((e=>{var a,s;if(void 0===e.panels[o]){let t=0;null===(a=e.layouts[r])||void 0===a||a.spec.items.forEach((e=>{e.y>t&&(t=e.y)}));const d={x:0,y:t+1,width:12,height:6,content:{$ref:`#/spec/panels/${o}`}},i=e.layouts;i&&i[r]&&(null===(s=i[r])||void 0===s||s.spec.items.push(d))}e.panels[o]=t})),isEditMode:!!r,setEditMode:o=>e({isEditMode:o})}))));return _jsx(DashboardContext.Provider,{value:d,children:o})}
+// Copyright 2022 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 } from "react/jsx-runtime";
+import { createStore, useStore } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import shallow from 'zustand/shallow';
+import { createContext, useContext } from 'react';
+import produce from 'immer';
+import { createDashboardAppSlice } from './DashboardAppSlice';
+import { createLayoutsSlice } from './LayoutsSlice';
+export function usePanels() {
+    return useDashboardStore(({ panels , updatePanel  })=>({
+            panels,
+            updatePanel
+        }));
+}
+export function useEditMode() {
+    return useDashboardStore(({ isEditMode , setEditMode  })=>({
+            isEditMode,
+            setEditMode
+        }));
+}
+export function useDashboard() {
+    const selectDashboardSpec = (state)=>{
+        return produce(state.dashboard, (draftState)=>{
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            draftState.panels = state.panels;
+            draftState.layouts = state.layouts;
+        });
+    };
+    const dashboard = useDashboardStore(selectDashboardSpec);
+    return {
+        dashboard
+    };
+}
+export const DashboardContext = /*#__PURE__*/ createContext(undefined);
+export function useDashboardStore(selector) {
+    const store = useContext(DashboardContext);
+    if (store === undefined) {
+        throw new Error('No DashboardContext found. Did you forget a Provider?');
+    }
+    return useStore(store, selector, shallow);
+}
+export function DashboardProvider(props) {
+    const { children , initialState: { dashboardSpec , isEditMode  } ,  } = props;
+    const { layouts , panels  } = dashboardSpec;
+    const dashboardStore = createStore()(immer((set, get, api)=>{
+        return {
+            ...createDashboardAppSlice(set, get, api, []),
+            ...createLayoutsSlice(set, get, api, []),
+            layouts,
+            panels,
+            dashboard: dashboardSpec,
+            updatePanel: (name, panel, groupIndex = 0)=>{
+                return set((state)=>{
+                    // add new panel to layouts if panels[name] is undefined
+                    if (state.panels[name] === undefined) {
+                        var ref;
+                        // find maximum y so new panel is added to the end of the grid
+                        let maxY = 0;
+                        (ref = state.layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.spec.items.forEach((layout)=>{
+                            if (layout.y > maxY) {
+                                maxY = layout.y;
+                            }
+                        });
+                        const panelLayout = {
+                            x: 0,
+                            y: maxY + 1,
+                            width: 12,
+                            height: 6,
+                            content: {
+                                $ref: `#/spec/panels/${name}`
+                            }
+                        };
+                        const layouts = state.layouts;
+                        if (layouts && layouts[groupIndex]) {
+                            var ref1;
+                            (ref1 = layouts[groupIndex]) === null || ref1 === void 0 ? void 0 : ref1.spec.items.push(panelLayout);
+                        }
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    state.panels[name] = panel;
+                });
+            },
+            isEditMode: !!isEditMode,
+            setEditMode: (isEditMode)=>set({
+                    isEditMode
+                })
+        };
+    }));
+    return /*#__PURE__*/ _jsx(DashboardContext.Provider, {
+        value: dashboardStore,
+        children: children
+    });
+}
+
+//# sourceMappingURL=DashboardProvider.js.map