@perses-dev/dashboards 0.14.0 → 0.16.0

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -11,7 +11,7 @@
 // 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 React from 'react';
+import React, { useMemo } from 'react';
 import { Box, Typography, Switch, TextField, Grid, FormControl, InputLabel, MenuItem, Select, Button, Stack } from '@mui/material';
 import { useImmer } from 'use-immer';
 import { PluginEditor } from '@perses-dev/plugin-system';
@@ -20,6 +20,21 @@ const VARIABLE_TYPES = [
     'ListVariable',
     'TextVariable'
 ];
+// TODO: Replace with proper validation library
+function getValidation(state) {
+    /** Name validation */ let name = null;
+    if (!state.name) {
+        name = 'Name is required';
+    }
+    // name can only contain alphanumeric characters and underscores and no spaces
+    if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {
+        name = 'Name can only contain alphanumeric characters, underscores, and dashes';
+    }
+    return {
+        name,
+        isValid: !name
+    };
+}
 const SectionHeader = ({ children  })=>/*#__PURE__*/ _jsx(Typography, {
         pb: 2,
         variant: "subtitle1",
@@ -27,6 +42,9 @@ const SectionHeader = ({ children  })=>/*#__PURE__*/ _jsx(Typography, {
     });
 export function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
     const [state, setState] = useImmer(getInitialState(initialVariableDefinition));
+    const validation = useMemo(()=>getValidation(state), [
+        state
+    ]);
     return /*#__PURE__*/ _jsxs(Box, {
         children: [
             /*#__PURE__*/ _jsx(SectionHeader, {
@@ -41,9 +59,12 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                         item: true,
                         xs: 6,
                         children: /*#__PURE__*/ _jsx(TextField, {
+                            required: true,
+                            error: !!validation.name,
                             fullWidth: true,
                             label: "Name",
                             value: state.name,
+                            helperText: validation.name,
                             onChange: (v)=>{
                                 setState((draft)=>{
                                     draft.name = v.target.value;
@@ -85,10 +106,10 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                         children: /*#__PURE__*/ _jsx(TextField, {
                             fullWidth: true,
                             label: "Label",
-                            value: state.label,
+                            value: state.title,
                             onChange: (v)=>{
                                 setState((draft)=>{
-                                    draft.label = v.target.value;
+                                    draft.title = v.target.value;
                                 });
                             }
                         })
@@ -207,6 +228,7 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
                 justifyContent: "end",
                 children: [
                     /*#__PURE__*/ _jsx(Button, {
+                        disabled: !validation.isValid,
                         variant: "contained",
                         onClick: ()=>{
                             onChange(getVariableDefinitionFromState(state));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.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 React from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Button,\n  Stack,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nconst VARIABLE_TYPES = ['ListVariable', 'TextVariable'] as const;\n\nconst SectionHeader = ({ children }: React.PropsWithChildren) => (\n  <Typography pb={2} variant=\"subtitle1\">\n    {children}\n  </Typography>\n);\n\nexport function VariableEditForm({\n  initialVariableDefinition,\n  onChange,\n  onCancel,\n}: {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n}) {\n  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n\n  return (\n    <Box>\n      <SectionHeader>General</SectionHeader>\n      <Grid container spacing={2} mb={2}>\n        <Grid item xs={6}>\n          <TextField\n            fullWidth\n            label=\"Name\"\n            value={state.name}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.name = v.target.value as string;\n              });\n            }}\n          />\n        </Grid>\n        <Grid item xs={6}>\n          <FormControl fullWidth>\n            <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n            <Select\n              labelId=\"variable-type-select-label\"\n              id=\"variable-type-select\"\n              label=\"Type\"\n              value={state.kind}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.kind = v.target.value as VariableEditorState['kind'];\n                });\n              }}\n            >\n              {VARIABLE_TYPES.map((v) => (\n                <MenuItem key={v} value={v}>\n                  {v}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={6}>\n          <TextField\n            fullWidth\n            label=\"Label\"\n            value={state.label}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.label = v.target.value;\n              });\n            }}\n          />\n        </Grid>\n        <Grid item xs={12}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={state.description}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.description = v.target.value;\n              });\n            }}\n          />\n        </Grid>\n      </Grid>\n\n      {state.kind === 'TextVariable' && (\n        <>\n          <SectionHeader>Text Options</SectionHeader>\n          <Grid container spacing={2} mb={2}>\n            <Grid item xs={12}>\n              <TextField\n                label=\"Value\"\n                value={state.textVariableFields.value}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n        </>\n      )}\n\n      {state.kind === 'ListVariable' && (\n        <>\n          <SectionHeader>List Options</SectionHeader>\n          <Grid container spacing={2} mb={2}>\n            <Grid item xs={6}>\n              <PluginEditor\n                width={500}\n                pluginType=\"Variable\"\n                pluginKindLabel=\"Source\"\n                value={state.listVariableFields.plugin}\n                onChange={(val) => {\n                  setState((draft) => {\n                    draft.listVariableFields.plugin = val;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n\n          <SectionHeader>Dropdown Options</SectionHeader>\n          <Grid container spacing={1} mb={1}>\n            <Grid item xs={12}>\n              Allow Multiple\n              <Switch\n                checked={state.listVariableFields.allowMultiple}\n                onChange={(e) => {\n                  setState((draft) => {\n                    draft.listVariableFields.allowMultiple = e.target.checked;\n                  });\n                }}\n              />\n            </Grid>\n            <Grid item xs={12}>\n              Allow All\n              <Switch\n                checked={state.listVariableFields.allowAll}\n                onChange={(e) => {\n                  setState((draft) => {\n                    draft.listVariableFields.allowAll = e.target.checked;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n        </>\n      )}\n\n      <Stack direction={'row'} spacing={2} justifyContent=\"end\">\n        <Button\n          variant=\"contained\"\n          onClick={() => {\n            onChange(getVariableDefinitionFromState(state));\n          }}\n        >\n          Update\n        </Button>\n        <Button\n          variant=\"outlined\"\n          onClick={() => {\n            onCancel();\n          }}\n        >\n          Cancel\n        </Button>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["React","Box","Typography","Switch","TextField","Grid","FormControl","InputLabel","MenuItem","Select","Button","Stack","useImmer","PluginEditor","getVariableDefinitionFromState","getInitialState","VARIABLE_TYPES","SectionHeader","children","pb","variant","VariableEditForm","initialVariableDefinition","onChange","onCancel","state","setState","container","spacing","mb","item","xs","fullWidth","label","value","name","v","draft","target","id","labelId","kind","map","description","textVariableFields","width","pluginType","pluginKindLabel","listVariableFields","plugin","val","checked","allowMultiple","e","allowAll","direction","justifyContent","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.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 React, { useMemo } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Button,\n  Stack,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nconst VARIABLE_TYPES = ['ListVariable', 'TextVariable'] as const;\n\n// TODO: Replace with proper validation library\nfunction getValidation(state: ReturnType<typeof getInitialState>) {\n  /** Name validation */\n  let name = null;\n  if (!state.name) {\n    name = 'Name is required';\n  }\n  // name can only contain alphanumeric characters and underscores and no spaces\n  if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {\n    name = 'Name can only contain alphanumeric characters, underscores, and dashes';\n  }\n\n  return {\n    name,\n    isValid: !name,\n  };\n}\n\nconst SectionHeader = ({ children }: React.PropsWithChildren) => (\n  <Typography pb={2} variant=\"subtitle1\">\n    {children}\n  </Typography>\n);\n\nexport function VariableEditForm({\n  initialVariableDefinition,\n  onChange,\n  onCancel,\n}: {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n}) {\n  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n  const validation = useMemo(() => getValidation(state), [state]);\n\n  return (\n    <Box>\n      <SectionHeader>General</SectionHeader>\n      <Grid container spacing={2} mb={2}>\n        <Grid item xs={6}>\n          <TextField\n            required\n            error={!!validation.name}\n            fullWidth\n            label=\"Name\"\n            value={state.name}\n            helperText={validation.name}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.name = v.target.value as string;\n              });\n            }}\n          />\n        </Grid>\n        <Grid item xs={6}>\n          <FormControl fullWidth>\n            <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n            <Select\n              labelId=\"variable-type-select-label\"\n              id=\"variable-type-select\"\n              label=\"Type\"\n              value={state.kind}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.kind = v.target.value as VariableEditorState['kind'];\n                });\n              }}\n            >\n              {VARIABLE_TYPES.map((v) => (\n                <MenuItem key={v} value={v}>\n                  {v}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={6}>\n          <TextField\n            fullWidth\n            label=\"Label\"\n            value={state.title}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.title = v.target.value;\n              });\n            }}\n          />\n        </Grid>\n        <Grid item xs={12}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={state.description}\n            onChange={(v) => {\n              setState((draft) => {\n                draft.description = v.target.value;\n              });\n            }}\n          />\n        </Grid>\n      </Grid>\n\n      {state.kind === 'TextVariable' && (\n        <>\n          <SectionHeader>Text Options</SectionHeader>\n          <Grid container spacing={2} mb={2}>\n            <Grid item xs={12}>\n              <TextField\n                label=\"Value\"\n                value={state.textVariableFields.value}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n        </>\n      )}\n\n      {state.kind === 'ListVariable' && (\n        <>\n          <SectionHeader>List Options</SectionHeader>\n          <Grid container spacing={2} mb={2}>\n            <Grid item xs={6}>\n              <PluginEditor\n                width={500}\n                pluginType=\"Variable\"\n                pluginKindLabel=\"Source\"\n                value={state.listVariableFields.plugin}\n                onChange={(val) => {\n                  setState((draft) => {\n                    draft.listVariableFields.plugin = val;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n\n          <SectionHeader>Dropdown Options</SectionHeader>\n          <Grid container spacing={1} mb={1}>\n            <Grid item xs={12}>\n              Allow Multiple\n              <Switch\n                checked={state.listVariableFields.allowMultiple}\n                onChange={(e) => {\n                  setState((draft) => {\n                    draft.listVariableFields.allowMultiple = e.target.checked;\n                  });\n                }}\n              />\n            </Grid>\n            <Grid item xs={12}>\n              Allow All\n              <Switch\n                checked={state.listVariableFields.allowAll}\n                onChange={(e) => {\n                  setState((draft) => {\n                    draft.listVariableFields.allowAll = e.target.checked;\n                  });\n                }}\n              />\n            </Grid>\n          </Grid>\n        </>\n      )}\n\n      <Stack direction={'row'} spacing={2} justifyContent=\"end\">\n        <Button\n          disabled={!validation.isValid}\n          variant=\"contained\"\n          onClick={() => {\n            onChange(getVariableDefinitionFromState(state));\n          }}\n        >\n          Update\n        </Button>\n        <Button\n          variant=\"outlined\"\n          onClick={() => {\n            onCancel();\n          }}\n        >\n          Cancel\n        </Button>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["React","useMemo","Box","Typography","Switch","TextField","Grid","FormControl","InputLabel","MenuItem","Select","Button","Stack","useImmer","PluginEditor","getVariableDefinitionFromState","getInitialState","VARIABLE_TYPES","getValidation","state","name","test","isValid","SectionHeader","children","pb","variant","VariableEditForm","initialVariableDefinition","onChange","onCancel","setState","validation","container","spacing","mb","item","xs","required","error","fullWidth","label","value","helperText","v","draft","target","id","labelId","kind","map","title","description","textVariableFields","width","pluginType","pluginKindLabel","listVariableFields","plugin","val","checked","allowMultiple","e","allowAll","direction","justifyContent","disabled","onClick"],"mappings":"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"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts

@@ -1,7 +1,7 @@
 import { VariableDefinition } from '@perses-dev/core';
 export declare function getInitialState(initialVariableDefinition: VariableDefinition): {
     name: string;
-    label: string | undefined;
+    title: string | undefined;
     kind: "TextVariable" | "ListVariable";
     description: string;
     listVariableFields: {

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variable-editor-form-model.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAkD,MAAM,kBAAkB,CAAC;AAEtG,wBAAgB,eAAe,CAAC,yBAAyB,EAAE,kBAAkB;;;;;;;;;;;;;;;;EA2B5E;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAErE,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mBAAmB,GAAG,kBAAkB,CAmC7F"}
+{"version":3,"file":"variable-editor-form-model.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAA2D,MAAM,kBAAkB,CAAC;AAE/G,wBAAgB,eAAe,CAAC,yBAAyB,EAAE,kBAAkB;;;;;;;;;;;;;;;;EA2B5E;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAErE,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mBAAmB,GAAG,kBAAkB,CAmC7F"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -33,7 +33,7 @@ export function getInitialState(initialVariableDefinition) {
     }
     return {
         name: initialVariableDefinition.spec.name,
-        label: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.label,
+        title: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.name,
         kind: initialVariableDefinition.kind,
         description: '',
         listVariableFields,
@@ -41,11 +41,11 @@ export function getInitialState(initialVariableDefinition) {
     };
 }
 export function getVariableDefinitionFromState(state) {
-    const { name , label , kind  } = state;
+    const { name , title , kind  } = state;
     const commonSpec = {
         name,
         display: {
-            label
+            name: title
         }
     };
     if (kind === 'TextVariable') {

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.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\nimport { VariableDefinition, TextVariableDefinition, ListVariableDefinition } from '@perses-dev/core';\n\nexport function getInitialState(initialVariableDefinition: VariableDefinition) {\n  const textVariableFields = {\n    value: (initialVariableDefinition as TextVariableDefinition).spec.value ?? '',\n  };\n\n  const listVariableFields = {\n    allowMultiple: false,\n    allowAll: false,\n    plugin: {\n      kind: '',\n      spec: {},\n    },\n  };\n  if (initialVariableDefinition.kind === 'ListVariable') {\n    listVariableFields.allowMultiple = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.allowAll = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.plugin = initialVariableDefinition.spec.plugin;\n  }\n\n  return {\n    name: initialVariableDefinition.spec.name,\n    label: initialVariableDefinition.spec.display?.label,\n    kind: initialVariableDefinition.kind,\n    description: '',\n    listVariableFields,\n    textVariableFields,\n  };\n}\n\nexport type VariableEditorState = ReturnType<typeof getInitialState>;\n\nexport function getVariableDefinitionFromState(state: VariableEditorState): VariableDefinition {\n  const { name, label, kind } = state;\n\n  const commonSpec = {\n    name,\n    display: {\n      label,\n    },\n  };\n\n  if (kind === 'TextVariable') {\n    const textVariableDefinition: TextVariableDefinition = {\n      kind,\n      spec: {\n        ...commonSpec,\n        ...state.textVariableFields,\n      },\n    };\n    return textVariableDefinition;\n  }\n\n  if (kind === 'ListVariable') {\n    const listVariableDefinition: ListVariableDefinition = {\n      kind,\n      spec: {\n        ...commonSpec,\n        allow_multiple: state.listVariableFields.allowMultiple,\n        allow_all_value: state.listVariableFields.allowAll,\n        plugin: state.listVariableFields.plugin,\n      },\n    };\n\n    return listVariableDefinition;\n  }\n  throw new Error(`Unknown variable kind: ${kind}`);\n}\n"],"names":["getInitialState","initialVariableDefinition","textVariableFields","value","spec","listVariableFields","allowMultiple","allowAll","plugin","kind","allow_all_value","name","label","display","description","getVariableDefinitionFromState","state","commonSpec","textVariableDefinition","listVariableDefinition","allow_multiple","Error"],"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;AAIjC,OAAO,SAASA,eAAe,CAACC,yBAA6C,EAAE;QAqBpEA,GAAsC;QAnBtC,MAAgE;IADzE,MAAMC,kBAAkB,GAAG;QACzBC,KAAK,EAAE,CAAA,MAAgE,GAAhE,AAACF,yBAAyB,CAA4BG,IAAI,CAACD,KAAK,cAAhE,MAAgE,cAAhE,MAAgE,GAAI,EAAE;KAC9E,AAAC;IAEF,MAAME,kBAAkB,GAAG;QACzBC,aAAa,EAAE,KAAK;QACpBC,QAAQ,EAAE,KAAK;QACfC,MAAM,EAAE;YACNC,IAAI,EAAE,EAAE;YACRL,IAAI,EAAE,EAAE;SACT;KACF,AAAC;IACF,IAAIH,yBAAyB,CAACQ,IAAI,KAAK,cAAc,EAAE;YAClBR,gBAA8C;QAAjFI,kBAAkB,CAACC,aAAa,GAAGL,CAAAA,gBAA8C,GAA9CA,yBAAyB,CAACG,IAAI,CAACM,eAAe,cAA9CT,gBAA8C,cAA9CA,gBAA8C,GAAI,KAAK,CAAC;YAC7DA,iBAA8C;QAA5EI,kBAAkB,CAACE,QAAQ,GAAGN,CAAAA,iBAA8C,GAA9CA,yBAAyB,CAACG,IAAI,CAACM,eAAe,cAA9CT,iBAA8C,cAA9CA,iBAA8C,GAAI,KAAK,CAAC;QACtFI,kBAAkB,CAACG,MAAM,GAAGP,yBAAyB,CAACG,IAAI,CAACI,MAAM,CAAC;IACpE,CAAC;IAED,OAAO;QACLG,IAAI,EAAEV,yBAAyB,CAACG,IAAI,CAACO,IAAI;QACzCC,KAAK,EAAEX,CAAAA,GAAsC,GAAtCA,yBAAyB,CAACG,IAAI,CAACS,OAAO,cAAtCZ,GAAsC,WAAO,GAA7CA,KAAAA,CAA6C,GAA7CA,GAAsC,CAAEW,KAAK;QACpDH,IAAI,EAAER,yBAAyB,CAACQ,IAAI;QACpCK,WAAW,EAAE,EAAE;QACfT,kBAAkB;QAClBH,kBAAkB;KACnB,CAAC;AACJ,CAAC;AAID,OAAO,SAASa,8BAA8B,CAACC,KAA0B,EAAsB;IAC7F,MAAM,EAAEL,IAAI,CAAA,EAAEC,KAAK,CAAA,EAAEH,IAAI,CAAA,EAAE,GAAGO,KAAK,AAAC;IAEpC,MAAMC,UAAU,GAAG;QACjBN,IAAI;QACJE,OAAO,EAAE;YACPD,KAAK;SACN;KACF,AAAC;IAEF,IAAIH,IAAI,KAAK,cAAc,EAAE;QAC3B,MAAMS,sBAAsB,GAA2B;YACrDT,IAAI;YACJL,IAAI,EAAE;gBACJ,GAAGa,UAAU;gBACb,GAAGD,KAAK,CAACd,kBAAkB;aAC5B;SACF,AAAC;QACF,OAAOgB,sBAAsB,CAAC;IAChC,CAAC;IAED,IAAIT,IAAI,KAAK,cAAc,EAAE;QAC3B,MAAMU,sBAAsB,GAA2B;YACrDV,IAAI;YACJL,IAAI,EAAE;gBACJ,GAAGa,UAAU;gBACbG,cAAc,EAAEJ,KAAK,CAACX,kBAAkB,CAACC,aAAa;gBACtDI,eAAe,EAAEM,KAAK,CAACX,kBAAkB,CAACE,QAAQ;gBAClDC,MAAM,EAAEQ,KAAK,CAACX,kBAAkB,CAACG,MAAM;aACxC;SACF,AAAC;QAEF,OAAOW,sBAAsB,CAAC;IAChC,CAAC;IACD,MAAM,IAAIE,KAAK,CAAC,CAAC,uBAAuB,EAAEZ,IAAI,CAAC,CAAC,CAAC,CAAC;AACpD,CAAC"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.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\nimport { VariableDefinition, TextVariableDefinition, ListVariableDefinition, Display } from '@perses-dev/core';\n\nexport function getInitialState(initialVariableDefinition: VariableDefinition) {\n  const textVariableFields = {\n    value: (initialVariableDefinition as TextVariableDefinition).spec.value ?? '',\n  };\n\n  const listVariableFields = {\n    allowMultiple: false,\n    allowAll: false,\n    plugin: {\n      kind: '',\n      spec: {},\n    },\n  };\n  if (initialVariableDefinition.kind === 'ListVariable') {\n    listVariableFields.allowMultiple = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.allowAll = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.plugin = initialVariableDefinition.spec.plugin;\n  }\n\n  return {\n    name: initialVariableDefinition.spec.name,\n    title: initialVariableDefinition.spec.display?.name,\n    kind: initialVariableDefinition.kind,\n    description: '',\n    listVariableFields,\n    textVariableFields,\n  };\n}\n\nexport type VariableEditorState = ReturnType<typeof getInitialState>;\n\nexport function getVariableDefinitionFromState(state: VariableEditorState): VariableDefinition {\n  const { name, title, kind } = state;\n\n  const commonSpec = {\n    name,\n    display: {\n      name: title,\n    } as Display,\n  };\n\n  if (kind === 'TextVariable') {\n    const textVariableDefinition: TextVariableDefinition = {\n      kind,\n      spec: {\n        ...commonSpec,\n        ...state.textVariableFields,\n      },\n    };\n    return textVariableDefinition;\n  }\n\n  if (kind === 'ListVariable') {\n    const listVariableDefinition: ListVariableDefinition = {\n      kind,\n      spec: {\n        ...commonSpec,\n        allow_multiple: state.listVariableFields.allowMultiple,\n        allow_all_value: state.listVariableFields.allowAll,\n        plugin: state.listVariableFields.plugin,\n      },\n    };\n\n    return listVariableDefinition;\n  }\n  throw new Error(`Unknown variable kind: ${kind}`);\n}\n"],"names":["getInitialState","initialVariableDefinition","textVariableFields","value","spec","listVariableFields","allowMultiple","allowAll","plugin","kind","allow_all_value","name","title","display","description","getVariableDefinitionFromState","state","commonSpec","textVariableDefinition","listVariableDefinition","allow_multiple","Error"],"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;AAIjC,OAAO,SAASA,eAAe,CAACC,yBAA6C,EAAE;QAqBpEA,GAAsC;QAnBtC,MAAgE;IADzE,MAAMC,kBAAkB,GAAG;QACzBC,KAAK,EAAE,CAAA,MAAgE,GAAhE,AAACF,yBAAyB,CAA4BG,IAAI,CAACD,KAAK,cAAhE,MAAgE,cAAhE,MAAgE,GAAI,EAAE;KAC9E,AAAC;IAEF,MAAME,kBAAkB,GAAG;QACzBC,aAAa,EAAE,KAAK;QACpBC,QAAQ,EAAE,KAAK;QACfC,MAAM,EAAE;YACNC,IAAI,EAAE,EAAE;YACRL,IAAI,EAAE,EAAE;SACT;KACF,AAAC;IACF,IAAIH,yBAAyB,CAACQ,IAAI,KAAK,cAAc,EAAE;YAClBR,gBAA8C;QAAjFI,kBAAkB,CAACC,aAAa,GAAGL,CAAAA,gBAA8C,GAA9CA,yBAAyB,CAACG,IAAI,CAACM,eAAe,cAA9CT,gBAA8C,cAA9CA,gBAA8C,GAAI,KAAK,CAAC;YAC7DA,iBAA8C;QAA5EI,kBAAkB,CAACE,QAAQ,GAAGN,CAAAA,iBAA8C,GAA9CA,yBAAyB,CAACG,IAAI,CAACM,eAAe,cAA9CT,iBAA8C,cAA9CA,iBAA8C,GAAI,KAAK,CAAC;QACtFI,kBAAkB,CAACG,MAAM,GAAGP,yBAAyB,CAACG,IAAI,CAACI,MAAM,CAAC;IACpE,CAAC;IAED,OAAO;QACLG,IAAI,EAAEV,yBAAyB,CAACG,IAAI,CAACO,IAAI;QACzCC,KAAK,EAAEX,CAAAA,GAAsC,GAAtCA,yBAAyB,CAACG,IAAI,CAACS,OAAO,cAAtCZ,GAAsC,WAAM,GAA5CA,KAAAA,CAA4C,GAA5CA,GAAsC,CAAEU,IAAI;QACnDF,IAAI,EAAER,yBAAyB,CAACQ,IAAI;QACpCK,WAAW,EAAE,EAAE;QACfT,kBAAkB;QAClBH,kBAAkB;KACnB,CAAC;AACJ,CAAC;AAID,OAAO,SAASa,8BAA8B,CAACC,KAA0B,EAAsB;IAC7F,MAAM,EAAEL,IAAI,CAAA,EAAEC,KAAK,CAAA,EAAEH,IAAI,CAAA,EAAE,GAAGO,KAAK,AAAC;IAEpC,MAAMC,UAAU,GAAG;QACjBN,IAAI;QACJE,OAAO,EAAE;YACPF,IAAI,EAAEC,KAAK;SACZ;KACF,AAAC;IAEF,IAAIH,IAAI,KAAK,cAAc,EAAE;QAC3B,MAAMS,sBAAsB,GAA2B;YACrDT,IAAI;YACJL,IAAI,EAAE;gBACJ,GAAGa,UAAU;gBACb,GAAGD,KAAK,CAACd,kBAAkB;aAC5B;SACF,AAAC;QACF,OAAOgB,sBAAsB,CAAC;IAChC,CAAC;IAED,IAAIT,IAAI,KAAK,cAAc,EAAE;QAC3B,MAAMU,sBAAsB,GAA2B;YACrDV,IAAI;YACJL,IAAI,EAAE;gBACJ,GAAGa,UAAU;gBACbG,cAAc,EAAEJ,KAAK,CAACX,kBAAkB,CAACC,aAAa;gBACtDI,eAAe,EAAEM,KAAK,CAACX,kBAAkB,CAACE,QAAQ;gBAClDC,MAAM,EAAEQ,KAAK,CAACX,kBAAkB,CAACG,MAAM;aACxC;SACF,AAAC;QAEF,OAAOW,sBAAsB,CAAC;IAChC,CAAC;IACD,MAAM,IAAIE,KAAK,CAAC,CAAC,uBAAuB,EAAEZ,IAAI,CAAC,CAAC,CAAC,CAAC;AACpD,CAAC"}

package/dist/components/Variables/VariableList.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-export declare function TemplateVariableList(): JSX.Element;
+interface TemplateVariableListProps {
+    initialVariableIsSticky?: boolean;
+}
+export declare function TemplateVariableList(props: TemplateVariableListProps): JSX.Element;
+export {};
 //# sourceMappingURL=VariableList.d.ts.map

package/dist/components/Variables/VariableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAsBA,wBAAgB,oBAAoB,gBA4CnC"}
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAuBA,UAAU,yBAAyB;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAoDpE"}

package/dist/components/Variables/VariableList.js

@@ -11,25 +11,37 @@
 // 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 { useState } from 'react';
-import { Button, Stack, Box, Drawer } from '@mui/material';
+import React, { useState } from 'react';
+import { Button, Stack, Box, Drawer, AppBar, useScrollTrigger, IconButton } from '@mui/material';
 import EyeIcon from 'mdi-material-ui/Eye';
 import PencilIcon from 'mdi-material-ui/Pencil';
+import PinOutline from 'mdi-material-ui/PinOutline';
+import PinOffOutline from 'mdi-material-ui/PinOffOutline';
 import { useTemplateVariableDefinitions, useEditMode, useTemplateVariableActions } from '../../context';
 import { TemplateVariable } from './Variable';
 import { VariableEditor } from './VariableEditor';
-export function TemplateVariableList() {
+export function TemplateVariableList(props) {
     const [isEditing, setIsEditing] = useState(false);
+    const [isPin, setIsPin] = useState(props.initialVariableIsSticky);
     const variableDefinitions = useTemplateVariableDefinitions();
     const { isEditMode  } = useEditMode();
     const [showVariablesInEditMode, setShowVariablesInEditMode] = useState(true);
     const showVariables = isEditMode ? showVariablesInEditMode : true;
     const { setVariableDefinitions  } = useTemplateVariableActions();
+    const scrollTrigger = useScrollTrigger({
+        disableHysteresis: true
+    });
+    const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
     return /*#__PURE__*/ _jsxs(Box, {
         children: [
             /*#__PURE__*/ _jsx(Drawer, {
                 anchor: 'right',
                 open: isEditing,
+                PaperProps: {
+                    sx: {
+                        width: '50%'
+                    }
+                },
                 children: /*#__PURE__*/ _jsx(VariableEditor, {
                     onCancel: ()=>{
                         setIsEditing(false);
@@ -59,21 +71,34 @@ export function TemplateVariableList() {
                     })
                 ]
             }),
-            /*#__PURE__*/ _jsx(Box, {
-                display: 'flex',
-                justifyContent: "space-between",
-                children: /*#__PURE__*/ _jsx(Stack, {
-                    direction: 'row',
-                    spacing: 2,
-                    children: showVariables && variableDefinitions.map((v)=>{
-                        var ref;
-                        /*#__PURE__*/ return _jsx(Box, {
-                            display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
-                            children: /*#__PURE__*/ _jsx(TemplateVariable, {
-                                name: v.spec.name
-                            }, v.spec.name)
-                        }, v.spec.name);
-                    })
+            /*#__PURE__*/ _jsx(AppBar, {
+                color: 'inherit',
+                position: isSticky ? 'fixed' : 'static',
+                elevation: isSticky ? 4 : 0,
+                children: /*#__PURE__*/ _jsxs(Box, {
+                    display: 'flex',
+                    justifyContent: "space-between",
+                    my: isSticky ? 2 : 0,
+                    ml: isSticky ? 2 : 0,
+                    children: [
+                        /*#__PURE__*/ _jsx(Stack, {
+                            direction: 'row',
+                            spacing: 2,
+                            children: showVariables && variableDefinitions.map((v)=>{
+                                var ref;
+                                /*#__PURE__*/ return _jsx(Box, {
+                                    display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
+                                    children: /*#__PURE__*/ _jsx(TemplateVariable, {
+                                        name: v.spec.name
+                                    }, v.spec.name)
+                                }, v.spec.name);
+                            })
+                        }),
+                        props.initialVariableIsSticky && /*#__PURE__*/ _jsx(IconButton, {
+                            onClick: ()=>setIsPin(!isPin),
+                            children: isPin ? /*#__PURE__*/ _jsx(PinOutline, {}) : /*#__PURE__*/ _jsx(PinOffOutline, {})
+                        })
+                    ]
                 })
             })
         ]

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

@@ -1 +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 { Button, Stack, Box, Drawer } from '@mui/material';\nimport EyeIcon from 'mdi-material-ui/Eye';\nimport PencilIcon from 'mdi-material-ui/Pencil';\n\nimport { useTemplateVariableDefinitions, useEditMode, useTemplateVariableActions } from '../../context';\nimport { TemplateVariable } from './Variable';\nimport { VariableEditor } from './VariableEditor';\n\nexport function TemplateVariableList() {\n  const [isEditing, setIsEditing] = useState(false);\n  const variableDefinitions = useTemplateVariableDefinitions();\n  const { isEditMode } = useEditMode();\n  const [showVariablesInEditMode, setShowVariablesInEditMode] = useState(true);\n  const showVariables = isEditMode ? showVariablesInEditMode : true;\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  return (\n    <Box>\n      <Drawer anchor={'right'} open={isEditing}>\n        <VariableEditor\n          onCancel={() => {\n            setIsEditing(false);\n          }}\n          variableDefinitions={variableDefinitions}\n          onChange={(v) => {\n            setVariableDefinitions(v);\n            setIsEditing(false);\n          }}\n        />\n      </Drawer>\n      {isEditMode && (\n        <Box pb={2}>\n          <Button onClick={() => setShowVariablesInEditMode(!showVariablesInEditMode)} startIcon={<EyeIcon />}>\n            {showVariablesInEditMode ? 'Hide' : 'Show'} Variables\n          </Button>\n          <Button onClick={() => setIsEditing(true)} startIcon={<PencilIcon />}>\n            Edit Variables\n          </Button>\n        </Box>\n      )}\n      <Box display={'flex'} justifyContent=\"space-between\">\n        <Stack direction={'row'} spacing={2}>\n          {showVariables &&\n            variableDefinitions.map((v) => (\n              <Box key={v.spec.name} display={v.spec.display?.hidden ? 'none' : undefined}>\n                <TemplateVariable key={v.spec.name} name={v.spec.name} />\n              </Box>\n            ))}\n        </Stack>\n      </Box>\n    </Box>\n  );\n}\n"],"names":["useState","Button","Stack","Box","Drawer","EyeIcon","PencilIcon","useTemplateVariableDefinitions","useEditMode","useTemplateVariableActions","TemplateVariable","VariableEditor","TemplateVariableList","isEditing","setIsEditing","variableDefinitions","isEditMode","showVariablesInEditMode","setShowVariablesInEditMode","showVariables","setVariableDefinitions","anchor","open","onCancel","onChange","v","pb","onClick","startIcon","display","justifyContent","direction","spacing","map","spec","hidden","undefined","name"],"mappings":"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"}
+{"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 React, { useState } from 'react';\nimport { Button, Stack, Box, Drawer, AppBar, useScrollTrigger, IconButton } from '@mui/material';\nimport EyeIcon from 'mdi-material-ui/Eye';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { useTemplateVariableDefinitions, useEditMode, useTemplateVariableActions } from '../../context';\nimport { TemplateVariable } from './Variable';\nimport { VariableEditor } from './VariableEditor';\n\ninterface TemplateVariableListProps {\n  initialVariableIsSticky?: boolean;\n}\n\nexport function TemplateVariableList(props: TemplateVariableListProps) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n  const variableDefinitions = useTemplateVariableDefinitions();\n  const { isEditMode } = useEditMode();\n  const [showVariablesInEditMode, setShowVariablesInEditMode] = useState(true);\n  const showVariables = isEditMode ? showVariablesInEditMode : true;\n  const { setVariableDefinitions } = useTemplateVariableActions();\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n  return (\n    <Box>\n      <Drawer anchor={'right'} open={isEditing} PaperProps={{ sx: { width: '50%' } }}>\n        <VariableEditor\n          onCancel={() => {\n            setIsEditing(false);\n          }}\n          variableDefinitions={variableDefinitions}\n          onChange={(v) => {\n            setVariableDefinitions(v);\n            setIsEditing(false);\n          }}\n        />\n      </Drawer>\n      {isEditMode && (\n        <Box pb={2}>\n          <Button onClick={() => setShowVariablesInEditMode(!showVariablesInEditMode)} startIcon={<EyeIcon />}>\n            {showVariablesInEditMode ? 'Hide' : 'Show'} Variables\n          </Button>\n          <Button onClick={() => setIsEditing(true)} startIcon={<PencilIcon />}>\n            Edit Variables\n          </Button>\n        </Box>\n      )}\n\n      <AppBar color={'inherit'} position={isSticky ? 'fixed' : 'static'} elevation={isSticky ? 4 : 0}>\n        <Box display={'flex'} justifyContent=\"space-between\" my={isSticky ? 2 : 0} ml={isSticky ? 2 : 0}>\n          <Stack direction={'row'} spacing={2}>\n            {showVariables &&\n              variableDefinitions.map((v) => (\n                <Box key={v.spec.name} display={v.spec.display?.hidden ? 'none' : undefined}>\n                  <TemplateVariable key={v.spec.name} name={v.spec.name} />\n                </Box>\n              ))}\n          </Stack>\n          {props.initialVariableIsSticky && (\n            <IconButton onClick={() => setIsPin(!isPin)}>{isPin ? <PinOutline /> : <PinOffOutline />}</IconButton>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["React","useState","Button","Stack","Box","Drawer","AppBar","useScrollTrigger","IconButton","EyeIcon","PencilIcon","PinOutline","PinOffOutline","useTemplateVariableDefinitions","useEditMode","useTemplateVariableActions","TemplateVariable","VariableEditor","TemplateVariableList","props","isEditing","setIsEditing","isPin","setIsPin","initialVariableIsSticky","variableDefinitions","isEditMode","showVariablesInEditMode","setShowVariablesInEditMode","showVariables","setVariableDefinitions","scrollTrigger","disableHysteresis","isSticky","anchor","open","PaperProps","sx","width","onCancel","onChange","v","pb","onClick","startIcon","color","position","elevation","display","justifyContent","my","ml","direction","spacing","map","spec","hidden","undefined","name"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './Dashboard';
 export * from './DashboardToolbar';
 export * from './DeletePanelDialog';
 export * from './DeletePanelGroupDialog';
+export * from './DownloadButton';
 export * from './GridLayout';
 export * from './Panel';
 export * from './PanelDrawer';

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,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oCAAoC,CAAC;AACnD,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oCAAoC,CAAC;AACnD,cAAc,aAAa,CAAC"}

package/dist/components/index.js

@@ -14,6 +14,7 @@ export * from './Dashboard';
 export * from './DashboardToolbar';
 export * from './DeletePanelDialog';
 export * from './DeletePanelGroupDialog';
+export * from './DownloadButton';
 export * from './GridLayout';
 export * from './Panel';
 export * from './PanelDrawer';

package/dist/components/index.js.map

@@ -1 +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 './DashboardToolbar';\nexport * from './DeletePanelDialog';\nexport * from './DeletePanelGroupDialog';\nexport * from './GridLayout';\nexport * from './Panel';\nexport * from './PanelDrawer';\nexport * from './PanelGroupDialog';\nexport * from './TimeRangeControls';\nexport * from './UnsavedChangesConfirmationDialog';\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,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oCAAoC,CAAC;AACnD,cAAc,aAAa,CAAC"}
+{"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 './DashboardToolbar';\nexport * from './DeletePanelDialog';\nexport * from './DeletePanelGroupDialog';\nexport * from './DownloadButton';\nexport * from './GridLayout';\nexport * from './Panel';\nexport * from './PanelDrawer';\nexport * from './PanelGroupDialog';\nexport * from './TimeRangeControls';\nexport * from './UnsavedChangesConfirmationDialog';\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,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oCAAoC,CAAC;AACnD,cAAc,aAAa,CAAC"}

package/dist/context/DashboardProvider/DashboardProvider.js

@@ -60,8 +60,9 @@ function initStore(props) {
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            setDashboard: ({ spec: { panels , layouts  }  })=>{
+            setDashboard: ({ metadata , spec: { panels , layouts  }  })=>{
                 set((state)=>{
+                    state.metadata = metadata;
                     const { panelGroups , panelGroupOrder  } = convertLayoutsToPanelGroups(layouts);
                     state.panels = panels;
                     state.panelGroups = panelGroups;

package/dist/context/DashboardProvider/DashboardProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.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 { createStore, useStore } from 'zustand';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport shallow from 'zustand/shallow';\nimport { createContext, useCallback, useContext, useState } from 'react';\nimport { DashboardResource, ProjectMetadata, RelativeTimeRange } from '@perses-dev/core';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { convertLayoutsToPanelGroups, createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\nimport { createPanelSlice, PanelSlice } from './panel-slice';\nimport { createDeletePanelGroupSlice, DeletePanelGroupSlice } from './delete-panel-group-slice';\nimport { createDeletePanelSlice, DeletePanelSlice } from './delete-panel-slice';\n\nexport interface DashboardStoreState\n  extends PanelGroupSlice,\n    PanelSlice,\n    PanelGroupEditorSlice,\n    DeletePanelGroupSlice,\n    PanelEditorSlice,\n    DeletePanelSlice {\n  isEditMode: boolean;\n  setEditMode: (isEditMode: boolean) => void;\n  defaultTimeRange: RelativeTimeRange;\n  setDashboard: (dashboard: DashboardResource) => void;\n  metadata: ProjectMetadata;\n}\n\nexport interface DashboardStoreProps {\n  dashboardResource: DashboardResource;\n  isEditMode?: boolean;\n}\n\nexport interface DashboardProviderProps {\n  initialState: DashboardStoreProps;\n  children?: React.ReactNode;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T) {\n  const store = useContext(DashboardContext);\n  if (store === undefined) {\n    throw new Error('No DashboardContext found. Did you forget a Provider?');\n  }\n  return useStore(store, selector, shallow);\n}\n\nexport function DashboardProvider(props: DashboardProviderProps) {\n  const createDashboardStore = useCallback(initStore, [props]);\n\n  const [store] = useState(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders\n\n  return (\n    <DashboardContext.Provider value={store as StoreApi<DashboardStoreState>}>\n      {props.children}\n    </DashboardContext.Provider>\n  );\n}\n\nfunction initStore(props: DashboardProviderProps) {\n  const {\n    initialState: { dashboardResource, isEditMode },\n  } = props;\n\n  const {\n    spec: { layouts, panels, duration },\n    metadata,\n  } = dashboardResource;\n  const store = createStore<DashboardStoreState>()(\n    immer(\n      devtools((...args) => {\n        const [set] = args;\n        return {\n          ...createPanelGroupSlice(layouts)(...args),\n          ...createPanelSlice(panels)(...args),\n          ...createPanelGroupEditorSlice(...args),\n          ...createDeletePanelGroupSlice(...args),\n          ...createPanelEditorSlice()(...args),\n          ...createDeletePanelSlice()(...args),\n          metadata,\n          defaultTimeRange: { pastDuration: duration },\n          isEditMode: !!isEditMode,\n          setEditMode: (isEditMode: boolean) => set({ isEditMode }),\n          setDashboard: ({ spec: { panels, layouts } }) => {\n            set((state) => {\n              const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n              state.panels = panels;\n              state.panelGroups = panelGroups;\n              state.panelGroupOrder = panelGroupOrder;\n            });\n          },\n        };\n      })\n    )\n  );\n\n  return store;\n}\n"],"names":["createStore","useStore","devtools","immer","shallow","createContext","useCallback","useContext","useState","createPanelGroupEditorSlice","convertLayoutsToPanelGroups","createPanelGroupSlice","createPanelEditorSlice","createPanelSlice","createDeletePanelGroupSlice","createDeletePanelSlice","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","createDashboardStore","initStore","Provider","value","children","initialState","dashboardResource","isEditMode","spec","layouts","panels","duration","metadata","args","set","defaultTimeRange","pastDuration","setEditMode","setDashboard","state","panelGroups","panelGroupOrder"],"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,QAAQ,QAAQ,SAAS,CAAC;AAEhD,SAASC,QAAQ,QAAQ,oBAAoB,CAAC;AAC9C,SAASC,KAAK,QAAQ,0BAA0B,CAAC;AACjD,OAAOC,OAAO,MAAM,iBAAiB,CAAC;AACtC,SAASC,aAAa,EAAEC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAEzE,SAASC,2BAA2B,QAA+B,4BAA4B,CAAC;AAChG,SAASC,2BAA2B,EAAEC,qBAAqB,QAAyB,qBAAqB,CAAC;AAC1G,SAASC,sBAAsB,QAA0B,sBAAsB,CAAC;AAChF,SAASC,gBAAgB,QAAoB,eAAe,CAAC;AAC7D,SAASC,2BAA2B,QAA+B,4BAA4B,CAAC;AAChG,SAASC,sBAAsB,QAA0B,sBAAsB,CAAC;AA0BhF,OAAO,MAAMC,gBAAgB,iBAAGX,aAAa,CAA4CY,SAAS,CAAC,CAAC;AAEpG,OAAO,SAASC,iBAAiB,CAAIC,QAA2C,EAAE;IAChF,MAAMC,KAAK,GAAGb,UAAU,CAACS,gBAAgB,CAAC,AAAC;IAC3C,IAAII,KAAK,KAAKH,SAAS,EAAE;QACvB,MAAM,IAAII,KAAK,CAAC,uDAAuD,CAAC,CAAC;IAC3E,CAAC;IACD,OAAOpB,QAAQ,CAACmB,KAAK,EAAED,QAAQ,EAAEf,OAAO,CAAC,CAAC;AAC5C,CAAC;AAED,OAAO,SAASkB,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAMC,oBAAoB,GAAGlB,WAAW,CAACmB,SAAS,EAAE;QAACF,KAAK;KAAC,CAAC,AAAC;IAE7D,MAAM,CAACH,KAAK,CAAC,GAAGZ,QAAQ,CAACgB,oBAAoB,CAACD,KAAK,CAAC,CAAC,AAAC,EAAC,+DAA+D;IAEtH,qBACE,KAACP,gBAAgB,CAACU,QAAQ;QAACC,KAAK,EAAEP,KAAK;kBACpCG,KAAK,CAACK,QAAQ;MACW,CAC5B;AACJ,CAAC;AAED,SAASH,SAAS,CAACF,KAA6B,EAAE;IAChD,MAAM,EACJM,YAAY,EAAE,EAAEC,iBAAiB,CAAA,EAAEC,UAAU,CAAA,EAAE,CAAA,IAChD,GAAGR,KAAK,AAAC;IAEV,MAAM,EACJS,IAAI,EAAE,EAAEC,OAAO,CAAA,EAAEC,MAAM,CAAA,EAAEC,QAAQ,CAAA,EAAE,CAAA,EACnCC,QAAQ,CAAA,IACT,GAAGN,iBAAiB,AAAC;IACtB,MAAMV,KAAK,GAAGpB,WAAW,EAAuB,CAC9CG,KAAK,CACHD,QAAQ,CAAC,CAAImC,GAAAA,IAAI,GAAK;QACpB,MAAM,CAACC,GAAG,CAAC,GAAGD,IAAI,AAAC;QACnB,OAAO;YACL,GAAG1B,qBAAqB,CAACsB,OAAO,CAAC,IAAII,IAAI,CAAC;YAC1C,GAAGxB,gBAAgB,CAACqB,MAAM,CAAC,IAAIG,IAAI,CAAC;YACpC,GAAG5B,2BAA2B,IAAI4B,IAAI,CAAC;YACvC,GAAGvB,2BAA2B,IAAIuB,IAAI,CAAC;YACvC,GAAGzB,sBAAsB,EAAE,IAAIyB,IAAI,CAAC;YACpC,GAAGtB,sBAAsB,EAAE,IAAIsB,IAAI,CAAC;YACpCD,QAAQ;YACRG,gBAAgB,EAAE;gBAAEC,YAAY,EAAEL,QAAQ;aAAE;YAC5CJ,UAAU,EAAE,CAAC,CAACA,UAAU;YACxBU,WAAW,EAAE,CAACV,UAAmB,GAAKO,GAAG,CAAC;oBAAEP,UAAU;iBAAE,CAAC;YACzDW,YAAY,EAAE,CAAC,EAAEV,IAAI,EAAE,EAAEE,MAAM,CAAA,EAAED,OAAO,CAAA,EAAE,CAAA,EAAE,GAAK;gBAC/CK,GAAG,CAAC,CAACK,KAAK,GAAK;oBACb,MAAM,EAAEC,WAAW,CAAA,EAAEC,eAAe,CAAA,EAAE,GAAGnC,2BAA2B,CAACuB,OAAO,CAAC,AAAC;oBAC9EU,KAAK,CAACT,MAAM,GAAGA,MAAM,CAAC;oBACtBS,KAAK,CAACC,WAAW,GAAGA,WAAW,CAAC;oBAChCD,KAAK,CAACE,eAAe,GAAGA,eAAe,CAAC;gBAC1C,CAAC,CAAC,CAAC;YACL,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CACH,CACF,AAAC;IAEF,OAAOzB,KAAK,CAAC;AACf,CAAC"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.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 { createStore, useStore } from 'zustand';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport shallow from 'zustand/shallow';\nimport { createContext, useCallback, useContext, useState } from 'react';\nimport { DashboardResource, ProjectMetadata, RelativeTimeRange } from '@perses-dev/core';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { convertLayoutsToPanelGroups, createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\nimport { createPanelSlice, PanelSlice } from './panel-slice';\nimport { createDeletePanelGroupSlice, DeletePanelGroupSlice } from './delete-panel-group-slice';\nimport { createDeletePanelSlice, DeletePanelSlice } from './delete-panel-slice';\n\nexport interface DashboardStoreState\n  extends PanelGroupSlice,\n    PanelSlice,\n    PanelGroupEditorSlice,\n    DeletePanelGroupSlice,\n    PanelEditorSlice,\n    DeletePanelSlice {\n  isEditMode: boolean;\n  setEditMode: (isEditMode: boolean) => void;\n  defaultTimeRange: RelativeTimeRange;\n  setDashboard: (dashboard: DashboardResource) => void;\n  metadata: ProjectMetadata;\n}\n\nexport interface DashboardStoreProps {\n  dashboardResource: DashboardResource;\n  isEditMode?: boolean;\n}\n\nexport interface DashboardProviderProps {\n  initialState: DashboardStoreProps;\n  children?: React.ReactNode;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T) {\n  const store = useContext(DashboardContext);\n  if (store === undefined) {\n    throw new Error('No DashboardContext found. Did you forget a Provider?');\n  }\n  return useStore(store, selector, shallow);\n}\n\nexport function DashboardProvider(props: DashboardProviderProps) {\n  const createDashboardStore = useCallback(initStore, [props]);\n\n  const [store] = useState(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders\n\n  return (\n    <DashboardContext.Provider value={store as StoreApi<DashboardStoreState>}>\n      {props.children}\n    </DashboardContext.Provider>\n  );\n}\n\nfunction initStore(props: DashboardProviderProps) {\n  const {\n    initialState: { dashboardResource, isEditMode },\n  } = props;\n\n  const {\n    spec: { layouts, panels, duration },\n    metadata,\n  } = dashboardResource;\n  const store = createStore<DashboardStoreState>()(\n    immer(\n      devtools((...args) => {\n        const [set] = args;\n        return {\n          ...createPanelGroupSlice(layouts)(...args),\n          ...createPanelSlice(panels)(...args),\n          ...createPanelGroupEditorSlice(...args),\n          ...createDeletePanelGroupSlice(...args),\n          ...createPanelEditorSlice()(...args),\n          ...createDeletePanelSlice()(...args),\n          metadata,\n          defaultTimeRange: { pastDuration: duration },\n          isEditMode: !!isEditMode,\n          setEditMode: (isEditMode: boolean) => set({ isEditMode }),\n          setDashboard: ({ metadata, spec: { panels, layouts } }) => {\n            set((state) => {\n              state.metadata = metadata;\n              const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n              state.panels = panels;\n              state.panelGroups = panelGroups;\n              state.panelGroupOrder = panelGroupOrder;\n            });\n          },\n        };\n      })\n    )\n  );\n\n  return store;\n}\n"],"names":["createStore","useStore","devtools","immer","shallow","createContext","useCallback","useContext","useState","createPanelGroupEditorSlice","convertLayoutsToPanelGroups","createPanelGroupSlice","createPanelEditorSlice","createPanelSlice","createDeletePanelGroupSlice","createDeletePanelSlice","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","createDashboardStore","initStore","Provider","value","children","initialState","dashboardResource","isEditMode","spec","layouts","panels","duration","metadata","args","set","defaultTimeRange","pastDuration","setEditMode","setDashboard","state","panelGroups","panelGroupOrder"],"mappings":"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"}

package/dist/context/DashboardProvider/dashboard-provider-api.d.ts

@@ -43,9 +43,9 @@ export declare function usePanelGroupEditor(): import("./panel-group-editor-slic
  */
 export declare function useDeletePanelGroupDialog(): {
     deletePanelGroupDialog: import("./delete-panel-group-slice").DeletePanelGroupDialogState | undefined;
+    deletePanelGroup: (panelGroupId: number) => void;
     openDeletePanelGroupDialog: (panelGroupId: number) => void;
     closeDeletePanelGroupDialog: () => void;
-    deletePanelGroup: (panelGroupId: number) => void;
 };
 /**
  * Gets an individual panel in the store. Throws if the panel can't be found.

package/dist/context/DashboardProvider/dashboard-provider-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-provider-api.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAE3F,wBAAgB,WAAW;;;EAE1B;AAED;;GAEG;AACH,wBAAgB,mBAAmB;;;;EAUlC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,aAE/B;AAED;;GAEG;AACH,wBAAgB,kBAAkB,yDAYjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,YAAY,sDAMvD;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,YAAY;;;;;;2CAapB,oBAAoB,EAAE;EAGhE;AAuBD;;GAEG;AACH,wBAAgB,mBAAmB,sEAElC;AAED;;GAEG;AACH,wBAAgB,yBAAyB;;;;;EASxC;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,sFAa1D;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,gBAAgB,EAAE,gBAAgB;;;EAOjE;AAED;;GAEG;AACH,wBAAgB,cAAc,gEAE7B;AAED;;GAEG;AACH,wBAAgB,oBAAoB;;;;EAWnC;AAED,wBAAgB,mBAAmB,iDAElC"}
+{"version":3,"file":"dashboard-provider-api.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAG3F,wBAAgB,WAAW;;;EAE1B;AAOD;;GAEG;AACH,wBAAgB,mBAAmB;;;;EAOlC;AAGD;;GAEG;AACH,wBAAgB,gBAAgB,aAE/B;AAGD;;GAEG;AACH,wBAAgB,kBAAkB,yDAYjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,YAAY,sDAMvD;AAaD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,YAAY;;;;;;2CAWpB,oBAAoB,EAAE;EAGhE;AA4BD;;GAEG;AACH,wBAAgB,mBAAmB,sEAElC;AAaD;;GAEG;AACH,wBAAgB,yBAAyB;;;;;EASxC;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,sFAiB1D;AAMD;;GAEG;AACH,wBAAgB,eAAe,CAAC,gBAAgB,EAAE,gBAAgB;;;EAMjE;AAGD;;GAEG;AACH,wBAAgB,cAAc,gEAE7B;AAQD;;GAEG;AACH,wBAAgB,oBAAoB;;;;EAGnC;AAGD,wBAAgB,mBAAmB,iDAElC"}