@perses-dev/plugin-system 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

package/dist/components/ProjectSelect.js

@@ -17,8 +17,8 @@ import { useProjectList } from '../context';
  * Displays a MUI input for selecting a Project of a particular kind. Note: The 'value' and `onChange` handler for
  * the input deal with a `ProjectSelector`.
  */ export function ProjectSelect(props) {
-    const { onChange , value , ...others } = props;
-    const { data , isLoading  } = useProjectList();
+    const { onChange, value, ...others } = props;
+    const { data, isLoading } = useProjectList();
     // While loading available values, just use an empty string so MUI select doesn't warn about values out of range
     const optionValue = isLoading ? '' : projectToOptionValue(value);
     // When the user makes a selection, convert the string option value back to a DatasourceSelector

package/dist/components/ProjectSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ProjectSelect.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Select, SelectProps, MenuItem, Stack, ListItemText } from '@mui/material';\nimport { ProjectResource } from '@perses-dev/core';\nimport { useProjectList } from '../context';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface ProjectSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  onChange: (next: ProjectResource) => void;\n  value: ProjectResource;\n}\n\n/**\n * Displays a MUI input for selecting a Project of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `ProjectSelector`.\n */\nexport function ProjectSelect(props: ProjectSelectProps) {\n  const { onChange, value, ...others } = props;\n\n  const { data, isLoading } = useProjectList();\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : projectToOptionValue(value);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // TODO:\n  //  - Does this need a loading indicator of some kind?\n  //  - The group's edit link is not clickable once selected.\n  //  - The group's edit link is disabled if datasource is overridden.\n  //    Ref: https://github.com/mui/material-ui/issues/36572\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      <MenuItem value={'none'}>\n        <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\" height={32}>\n          <ListItemText>None</ListItemText>\n        </Stack>\n      </MenuItem>\n      {data?.map((project: ProjectResource) => [\n        <MenuItem key={project.metadata.name} value={project.metadata.name}>\n          <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\" height={32}>\n            <ListItemText>{project.metadata.name}</ListItemText>\n          </Stack>\n        </MenuItem>,\n      ])}\n    </Select>\n  );\n}\n\n/**\n * Given a ProjectSelectItemSelector,\n * returns a string value that can be used as a Select input value.\n * @param selector\n */\nfunction projectToOptionValue(project: ProjectResource): string {\n  return project.metadata.name ?? 'none';\n}\n\n/**\n * Given an option value name,\n * returns a ProjectResource to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelector(optionValue: string): ProjectResource {\n  return {\n    kind: 'Project',\n    metadata: {\n      name: optionValue,\n    },\n  };\n}\n"],"names":["Select","MenuItem","Stack","ListItemText","useProjectList","ProjectSelect","props","onChange","value","others","data","isLoading","optionValue","projectToOptionValue","handleChange","e","next","optionValueToSelector","target","direction","alignItems","justifyContent","width","height","map","project","metadata","name","kind"],"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,MAAM,EAAeC,QAAQ,EAAEC,KAAK,EAAEC,YAAY,QAAQ,gBAAgB;AAEnF,SAASC,cAAc,QAAQ,aAAa;AAW5C;;;CAGC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EAAEC,SAAQ,EAAEC,MAAK,EAAE,GAAGC,QAAQ,GAAGH;IAEvC,MAAM,EAAEI,KAAI,EAAEC,UAAS,EAAE,GAAGP;IAE5B,gHAAgH;IAChH,MAAMQ,cAAcD,YAAY,KAAKE,qBAAqBL;IAE1D,gGAAgG;IAChG,MAAMM,eAAgD,CAACC;QACrD,MAAMC,OAAOC,sBAAsBF,EAAEG,OAAOV;QAC5CD,SAASS;IACX;IAEA,QAAQ;IACR,sDAAsD;IACtD,2DAA2D;IAC3D,oEAAoE;IACpE,0DAA0D;IAC1D,qBACE,MAAChB;QAAQ,GAAGS,MAAM;QAAED,OAAOI;QAAaL,UAAUO;;0BAChD,KAACb;gBAASO,OAAO;0BACf,cAAA,KAACN;oBAAMiB,WAAU;oBAAMC,YAAW;oBAASC,gBAAe;oBAAgBC,OAAM;oBAAOC,QAAQ;8BAC7F,cAAA,KAACpB;kCAAa;;;;YAGjBO,iBAAAA,kBAAAA,KAAAA,IAAAA,KAAMc,IAAI,CAACC,UAA6B;kCACvC,KAACxB;wBAAqCO,OAAOiB,QAAQC,SAASC;kCAC5D,cAAA,KAACzB;4BAAMiB,WAAU;4BAAMC,YAAW;4BAASC,gBAAe;4BAAgBC,OAAM;4BAAOC,QAAQ;sCAC7F,cAAA,KAACpB;0CAAcsB,QAAQC,SAASC;;;uBAFrBF,QAAQC,SAASC;iBAKjC;;;AAGP;AAEA;;;;CAIC,GACD,SAASd,qBAAqBY,OAAwB;QAC7CA;IAAP,OAAOA,CAAAA,yBAAAA,QAAQC,SAASC,kBAAjBF,oCAAAA,yBAAyB;AAClC;AAEA;;;;CAIC,GACD,SAASR,sBAAsBL,WAAmB;IAChD,OAAO;QACLgB,MAAM;QACNF,UAAU;YACRC,MAAMf;QACR;IACF;AACF"}
+{"version":3,"sources":["../../src/components/ProjectSelect.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Select, SelectProps, MenuItem, Stack, ListItemText } from '@mui/material';\nimport { ProjectResource } from '@perses-dev/core';\nimport { useProjectList } from '../context';\n\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface ProjectSelectProps extends Omit<SelectProps<string>, OmittedMuiProps> {\n  onChange: (next: ProjectResource) => void;\n  value: ProjectResource;\n}\n\n/**\n * Displays a MUI input for selecting a Project of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `ProjectSelector`.\n */\nexport function ProjectSelect(props: ProjectSelectProps) {\n  const { onChange, value, ...others } = props;\n\n  const { data, isLoading } = useProjectList();\n\n  // While loading available values, just use an empty string so MUI select doesn't warn about values out of range\n  const optionValue = isLoading ? '' : projectToOptionValue(value);\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange: SelectProps<string>['onChange'] = (e) => {\n    const next = optionValueToSelector(e.target.value);\n    onChange(next);\n  };\n\n  // TODO:\n  //  - Does this need a loading indicator of some kind?\n  //  - The group's edit link is not clickable once selected.\n  //  - The group's edit link is disabled if datasource is overridden.\n  //    Ref: https://github.com/mui/material-ui/issues/36572\n  return (\n    <Select {...others} value={optionValue} onChange={handleChange}>\n      <MenuItem value={'none'}>\n        <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\" height={32}>\n          <ListItemText>None</ListItemText>\n        </Stack>\n      </MenuItem>\n      {data?.map((project: ProjectResource) => [\n        <MenuItem key={project.metadata.name} value={project.metadata.name}>\n          <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\" height={32}>\n            <ListItemText>{project.metadata.name}</ListItemText>\n          </Stack>\n        </MenuItem>,\n      ])}\n    </Select>\n  );\n}\n\n/**\n * Given a ProjectSelectItemSelector,\n * returns a string value that can be used as a Select input value.\n * @param selector\n */\nfunction projectToOptionValue(project: ProjectResource): string {\n  return project.metadata.name ?? 'none';\n}\n\n/**\n * Given an option value name,\n * returns a ProjectResource to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelector(optionValue: string): ProjectResource {\n  return {\n    kind: 'Project',\n    metadata: {\n      name: optionValue,\n    },\n  };\n}\n"],"names":["Select","MenuItem","Stack","ListItemText","useProjectList","ProjectSelect","props","onChange","value","others","data","isLoading","optionValue","projectToOptionValue","handleChange","e","next","optionValueToSelector","target","direction","alignItems","justifyContent","width","height","map","project","metadata","name","kind"],"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,MAAM,EAAeC,QAAQ,EAAEC,KAAK,EAAEC,YAAY,QAAQ,gBAAgB;AAEnF,SAASC,cAAc,QAAQ,aAAa;AAW5C;;;CAGC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGC,QAAQ,GAAGH;IAEvC,MAAM,EAAEI,IAAI,EAAEC,SAAS,EAAE,GAAGP;IAE5B,gHAAgH;IAChH,MAAMQ,cAAcD,YAAY,KAAKE,qBAAqBL;IAE1D,gGAAgG;IAChG,MAAMM,eAAgD,CAACC;QACrD,MAAMC,OAAOC,sBAAsBF,EAAEG,MAAM,CAACV,KAAK;QACjDD,SAASS;IACX;IAEA,QAAQ;IACR,sDAAsD;IACtD,2DAA2D;IAC3D,oEAAoE;IACpE,0DAA0D;IAC1D,qBACE,MAAChB;QAAQ,GAAGS,MAAM;QAAED,OAAOI;QAAaL,UAAUO;;0BAChD,KAACb;gBAASO,OAAO;0BACf,cAAA,KAACN;oBAAMiB,WAAU;oBAAMC,YAAW;oBAASC,gBAAe;oBAAgBC,OAAM;oBAAOC,QAAQ;8BAC7F,cAAA,KAACpB;kCAAa;;;;YAGjBO,iBAAAA,2BAAAA,KAAMc,GAAG,CAAC,CAACC,UAA6B;kCACvC,KAACxB;wBAAqCO,OAAOiB,QAAQC,QAAQ,CAACC,IAAI;kCAChE,cAAA,KAACzB;4BAAMiB,WAAU;4BAAMC,YAAW;4BAASC,gBAAe;4BAAgBC,OAAM;4BAAOC,QAAQ;sCAC7F,cAAA,KAACpB;0CAAcsB,QAAQC,QAAQ,CAACC,IAAI;;;uBAFzBF,QAAQC,QAAQ,CAACC,IAAI;iBAKrC;;;AAGP;AAEA;;;;CAIC,GACD,SAASd,qBAAqBY,OAAwB;QAC7CA;IAAP,OAAOA,CAAAA,yBAAAA,QAAQC,QAAQ,CAACC,IAAI,cAArBF,oCAAAA,yBAAyB;AAClC;AAEA;;;;CAIC,GACD,SAASR,sBAAsBL,WAAmB;IAChD,OAAO;QACLgB,MAAM;QACNF,UAAU;YACRC,MAAMf;QACR;IACF;AACF"}

package/dist/components/TimeRangeControls/TimeRangeControls.d.ts

@@ -0,0 +1,13 @@
+import { TimeOption } from '@perses-dev/components';
+export declare const DEFAULT_TIME_RANGE_OPTIONS: TimeOption[];
+export declare const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[];
+interface TimeRangeControlsProps {
+    heightPx?: number;
+    showTimeRangeSelector?: boolean;
+    showRefreshButton?: boolean;
+    showRefreshInterval?: boolean;
+    timePresets?: TimeOption[];
+}
+export declare function TimeRangeControls({ heightPx, showTimeRangeSelector, showRefreshButton, showRefreshInterval, timePresets, }: TimeRangeControlsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TimeRangeControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":"AAeA,OAAO,EAIL,UAAU,EAEX,MAAM,wBAAwB,CAAC;AAMhC,eAAO,MAAM,0BAA0B,EAAE,UAAU,EAUlD,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,UAAU,EAOxD,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,qBAA4B,EAC5B,iBAAwB,EACxB,mBAA0B,EAC1B,WAAwC,GACzC,EAAE,sBAAsB,2CAiDxB"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -0,0 +1,168 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import RefreshIcon from 'mdi-material-ui/Refresh';
+import { Stack } from '@mui/material';
+import { DateTimeRangePicker, RefreshIntervalPicker, InfoTooltip, ToolbarIconButton } from '@perses-dev/components';
+import { useCallback } from 'react';
+import { TOOLTIP_TEXT } from '../../constants';
+import { useTimeRange } from '../../runtime';
+export const DEFAULT_TIME_RANGE_OPTIONS = [
+    {
+        value: {
+            pastDuration: '5m'
+        },
+        display: 'Last 5 minutes'
+    },
+    {
+        value: {
+            pastDuration: '15m'
+        },
+        display: 'Last 15 minutes'
+    },
+    {
+        value: {
+            pastDuration: '30m'
+        },
+        display: 'Last 30 minutes'
+    },
+    {
+        value: {
+            pastDuration: '1h'
+        },
+        display: 'Last 1 hour'
+    },
+    {
+        value: {
+            pastDuration: '6h'
+        },
+        display: 'Last 6 hours'
+    },
+    {
+        value: {
+            pastDuration: '12h'
+        },
+        display: 'Last 12 hours'
+    },
+    {
+        value: {
+            pastDuration: '24h'
+        },
+        display: 'Last 1 day'
+    },
+    {
+        value: {
+            pastDuration: '7d'
+        },
+        display: 'Last 7 days'
+    },
+    {
+        value: {
+            pastDuration: '14d'
+        },
+        display: 'Last 14 days'
+    }
+];
+export const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
+    {
+        value: {
+            pastDuration: '0s'
+        },
+        display: 'Off'
+    },
+    {
+        value: {
+            pastDuration: '5s'
+        },
+        display: '5s'
+    },
+    {
+        value: {
+            pastDuration: '10s'
+        },
+        display: '10s'
+    },
+    {
+        value: {
+            pastDuration: '15s'
+        },
+        display: '15s'
+    },
+    {
+        value: {
+            pastDuration: '30s'
+        },
+        display: '30s'
+    },
+    {
+        value: {
+            pastDuration: '60s'
+        },
+        display: '1m'
+    }
+];
+const DEFAULT_HEIGHT = '34px';
+export function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, timePresets = DEFAULT_TIME_RANGE_OPTIONS }) {
+    const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();
+    // Convert height to a string, then use the string for styling
+    const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
+    // add time preset if one does not match duration given in time range
+    if ('pastDuration' in timeRange && !timePresets.some((option)=>option.value.pastDuration === timeRange['pastDuration'])) {
+        timePresets.push({
+            value: {
+                pastDuration: timeRange['pastDuration']
+            },
+            display: `Last ${timeRange['pastDuration']}`
+        });
+    }
+    // set the new refresh interval both in the dashboard context & as query param
+    const handleRefreshIntervalChange = useCallback((duration)=>{
+        setRefreshInterval(duration);
+    }, [
+        setRefreshInterval
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        children: [
+            showTimeRangeSelector && /*#__PURE__*/ _jsx(DateTimeRangePicker, {
+                timeOptions: timePresets,
+                value: timeRange,
+                onChange: setTimeRange,
+                height: height
+            }),
+            showRefreshButton && /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.refresh,
+                children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
+                    "aria-label": TOOLTIP_TEXT.refresh,
+                    onClick: refresh,
+                    sx: {
+                        height
+                    },
+                    children: /*#__PURE__*/ _jsx(RefreshIcon, {})
+                })
+            }),
+            showRefreshInterval && /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.refreshInterval,
+                children: /*#__PURE__*/ _jsx(RefreshIntervalPicker, {
+                    timeOptions: DEFAULT_REFRESH_INTERVAL_OPTIONS,
+                    value: refreshInterval,
+                    onChange: handleRefreshIntervalChange,
+                    height: height
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TimeRangeControls.js.map

package/dist/components/TimeRangeControls/TimeRangeControls.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport { Stack } from '@mui/material';\nimport {\n  DateTimeRangePicker,\n  RefreshIntervalPicker,\n  InfoTooltip,\n  TimeOption,\n  ToolbarIconButton,\n} from '@perses-dev/components';\nimport { DurationString } from '@perses-dev/core';\nimport { useCallback } from 'react';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useTimeRange } from '../../runtime';\n\nexport const DEFAULT_TIME_RANGE_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nexport const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '0s' }, display: 'Off' },\n  { value: { pastDuration: '5s' }, display: '5s' },\n  { value: { pastDuration: '10s' }, display: '10s' },\n  { value: { pastDuration: '15s' }, display: '15s' },\n  { value: { pastDuration: '30s' }, display: '30s' },\n  { value: { pastDuration: '60s' }, display: '1m' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n  showTimeRangeSelector?: boolean;\n  showRefreshButton?: boolean;\n  showRefreshInterval?: boolean;\n  timePresets?: TimeOption[];\n}\n\nexport function TimeRangeControls({\n  heightPx,\n  showTimeRangeSelector = true,\n  showRefreshButton = true,\n  showRefreshInterval = true,\n  timePresets = DEFAULT_TIME_RANGE_OPTIONS,\n}: TimeRangeControlsProps) {\n  const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time preset if one does not match duration given in time range\n  if (\n    'pastDuration' in timeRange &&\n    !timePresets.some((option) => option.value.pastDuration === timeRange['pastDuration'])\n  ) {\n    timePresets.push({\n      value: { pastDuration: timeRange['pastDuration'] },\n      display: `Last ${timeRange['pastDuration']}`,\n    });\n  }\n\n  // set the new refresh interval both in the dashboard context & as query param\n  const handleRefreshIntervalChange = useCallback(\n    (duration: DurationString) => {\n      setRefreshInterval(duration);\n    },\n    [setRefreshInterval]\n  );\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      {showTimeRangeSelector && (\n        <DateTimeRangePicker timeOptions={timePresets} value={timeRange} onChange={setTimeRange} height={height} />\n      )}\n      {showRefreshButton && (\n        <InfoTooltip description={TOOLTIP_TEXT.refresh}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refresh} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshInterval && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshInterval}>\n          <RefreshIntervalPicker\n            timeOptions={DEFAULT_REFRESH_INTERVAL_OPTIONS}\n            value={refreshInterval}\n            onChange={handleRefreshIntervalChange}\n            height={height}\n          />\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["RefreshIcon","Stack","DateTimeRangePicker","RefreshIntervalPicker","InfoTooltip","ToolbarIconButton","useCallback","TOOLTIP_TEXT","useTimeRange","DEFAULT_TIME_RANGE_OPTIONS","value","pastDuration","display","DEFAULT_REFRESH_INTERVAL_OPTIONS","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showTimeRangeSelector","showRefreshButton","showRefreshInterval","timePresets","timeRange","setTimeRange","refresh","refreshInterval","setRefreshInterval","height","undefined","some","option","push","handleRefreshIntervalChange","duration","direction","spacing","timeOptions","onChange","description","aria-label","onClick","sx"],"mappings":"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"}

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

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

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

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

package/dist/components/TimeRangeControls/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TimeRangeControls/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './TimeRangeControls';\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,sBAAsB"}

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { TimeSeriesQueryDefinition, QueryDefinition } from '@perses-dev/core';
 export interface TimeSeriesQueryEditorProps {
     queries?: TimeSeriesQueryDefinition[];
     onChange: (queries: QueryDefinition[]) => void;
 }
-export declare function TimeSeriesQueryEditor({ queries, onChange }: TimeSeriesQueryEditorProps): JSX.Element;
+export declare function TimeSeriesQueryEditor({ queries, onChange }: TimeSeriesQueryEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TimeSeriesQueryEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAM9E,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,qBAAqB,CAAC,EAAE,OAAY,EAAE,QAAQ,EAAE,EAAE,0BAA0B,eA0G3F"}
+{"version":3,"file":"TimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAI9E,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,qBAAqB,CAAC,EAAE,OAAY,EAAE,QAAQ,EAAE,EAAE,0BAA0B,2CA+F3F"}

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.js

@@ -15,18 +15,30 @@ import { useState } from 'react';
 import { produce } from 'immer';
 import { Button, Stack } from '@mui/material';
 import AddIcon from 'mdi-material-ui/Plus';
-import { usePlugin, usePluginRegistry } from '../../runtime';
+import { TIME_SERIES_QUERY_KEY, useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';
 import { TimeSeriesQueryInput } from './TimeSeriesQueryInput';
-const DEFAULT_QUERY_PLUGIN_TYPE = 'TimeSeriesQuery';
-export function TimeSeriesQueryEditor({ queries =[] , onChange  }) {
-    const hasMoreThanOneQuery = queries.length > 1;
-    const { defaultPluginKinds  } = usePluginRegistry();
-    var _defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE;
-    const defaultTimeSeriesQueryKind = (_defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[DEFAULT_QUERY_PLUGIN_TYPE]) !== null && _defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE !== void 0 ? _defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE : '';
-    const { data: defaultQueryPlugin  } = usePlugin(DEFAULT_QUERY_PLUGIN_TYPE, defaultTimeSeriesQueryKind, {
+export function TimeSeriesQueryEditor({ queries = [], onChange }) {
+    var _timeSeriesPlugins_;
+    // Build the default query plugin
+    // Use as default the plugin kind explicitly set as default or the first in the list
+    const { defaultPluginKinds } = usePluginRegistry();
+    const { data: timeSeriesPlugins } = useListPluginMetadata(TIME_SERIES_QUERY_KEY);
+    var _defaultPluginKinds_TIME_SERIES_QUERY_KEY, _ref;
+    const defaultTimeSeriesQueryKind = (_ref = (_defaultPluginKinds_TIME_SERIES_QUERY_KEY = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[TIME_SERIES_QUERY_KEY]) !== null && _defaultPluginKinds_TIME_SERIES_QUERY_KEY !== void 0 ? _defaultPluginKinds_TIME_SERIES_QUERY_KEY : timeSeriesPlugins === null || timeSeriesPlugins === void 0 ? void 0 : (_timeSeriesPlugins_ = timeSeriesPlugins[0]) === null || _timeSeriesPlugins_ === void 0 ? void 0 : _timeSeriesPlugins_.kind) !== null && _ref !== void 0 ? _ref : '';
+    const { data: defaultQueryPlugin } = usePlugin(TIME_SERIES_QUERY_KEY, defaultTimeSeriesQueryKind, {
         useErrorBoundary: true,
         enabled: true
     });
+    // This default query definition is used if no query is provided initially or when we add a new query
+    const defaultInitialQueryDefinition = {
+        kind: TIME_SERIES_QUERY_KEY,
+        spec: {
+            plugin: {
+                kind: defaultTimeSeriesQueryKind,
+                spec: (defaultQueryPlugin === null || defaultQueryPlugin === void 0 ? void 0 : defaultQueryPlugin.createInitialOptions()) || {}
+            }
+        }
+    };
     // State for which queries are collapsed
     // TODO: Would be easier if we had IDs for queries.
     const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(()=>false));
@@ -45,21 +57,12 @@ export function TimeSeriesQueryEditor({ queries =[] , onChange  }) {
     const handleQueryAdd = ()=>{
         if (!defaultQueryPlugin) return;
         onChange(produce(queries, (draft)=>{
-            const queryDef = {
-                kind: DEFAULT_QUERY_PLUGIN_TYPE,
-                spec: {
-                    plugin: {
-                        kind: defaultTimeSeriesQueryKind,
-                        spec: defaultQueryPlugin.createInitialOptions()
-                    }
-                }
-            };
             if (draft) {
-                draft.push(queryDef);
+                draft.push(defaultInitialQueryDefinition);
             } else {
                 draft = [
                     ...queries,
-                    queryDef
+                    defaultInitialQueryDefinition
                 ];
             }
         }));
@@ -89,20 +92,9 @@ export function TimeSeriesQueryEditor({ queries =[] , onChange  }) {
             ];
         });
     };
-    var _defaultPluginKinds_TimeSeriesQuery;
     // show one query input if queries is empty
     const queryDefinitions = queries.length ? queries : [
-        {
-            kind: 'TimeSeriesQuery',
-            spec: {
-                plugin: {
-                    kind: (_defaultPluginKinds_TimeSeriesQuery = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds['TimeSeriesQuery']) !== null && _defaultPluginKinds_TimeSeriesQuery !== void 0 ? _defaultPluginKinds_TimeSeriesQuery : '',
-                    spec: {
-                        query: ''
-                    }
-                }
-            }
-        }
+        defaultInitialQueryDefinition
     ];
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
@@ -113,7 +105,7 @@ export function TimeSeriesQueryEditor({ queries =[] , onChange  }) {
                         query: query,
                         isCollapsed: !!queriesCollapsed[i],
                         onChange: handleQueryChange,
-                        onDelete: hasMoreThanOneQuery ? handleQueryDelete : undefined,
+                        onDelete: queries.length > 1 ? handleQueryDelete : undefined,
                         onCollapseExpand: handleQueryCollapseExpand
                     }, i))
             }),

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { TimeSeriesQueryDefinition, QueryDefinition } from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\nimport { TimeSeriesQueryInput } from './TimeSeriesQueryInput';\n\nconst DEFAULT_QUERY_PLUGIN_TYPE = 'TimeSeriesQuery';\n\nexport interface TimeSeriesQueryEditorProps {\n  queries?: TimeSeriesQueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nexport function TimeSeriesQueryEditor({ queries = [], onChange }: TimeSeriesQueryEditorProps) {\n  const hasMoreThanOneQuery = queries.length > 1;\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultTimeSeriesQueryKind = defaultPluginKinds?.[DEFAULT_QUERY_PLUGIN_TYPE] ?? '';\n\n  const { data: defaultQueryPlugin } = usePlugin(DEFAULT_QUERY_PLUGIN_TYPE, defaultTimeSeriesQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // State for which queries are collapsed\n  // TODO: Would be easier if we had IDs for queries.\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: TimeSeriesQueryDefinition) => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = () => {\n    if (!defaultQueryPlugin) return;\n    onChange(\n      produce(queries, (draft) => {\n        const queryDef: TimeSeriesQueryDefinition = {\n          kind: DEFAULT_QUERY_PLUGIN_TYPE,\n          spec: {\n            plugin: { kind: defaultTimeSeriesQueryKind, spec: defaultQueryPlugin.createInitialOptions() },\n          },\n        };\n        if (draft) {\n          draft.push(queryDef);\n        } else {\n          draft = [...queries, queryDef];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number) => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number) => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: TimeSeriesQueryDefinition[] = queries.length\n    ? queries\n    : [\n        {\n          kind: 'TimeSeriesQuery',\n          spec: {\n            plugin: {\n              kind: defaultPluginKinds?.['TimeSeriesQuery'] ?? '',\n              spec: {\n                query: '',\n              },\n            },\n          },\n        },\n      ];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: TimeSeriesQueryDefinition, i: number) => (\n          <TimeSeriesQueryInput\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={hasMoreThanOneQuery ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n}\n"],"names":["useState","produce","Button","Stack","AddIcon","usePlugin","usePluginRegistry","TimeSeriesQueryInput","DEFAULT_QUERY_PLUGIN_TYPE","TimeSeriesQueryEditor","queries","onChange","hasMoreThanOneQuery","length","defaultPluginKinds","defaultTimeSeriesQueryKind","data","defaultQueryPlugin","useErrorBoundary","enabled","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","kind","spec","plugin","createInitialOptions","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","query","spacing","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { TimeSeriesQueryDefinition, QueryDefinition } from '@perses-dev/core';\nimport { TIME_SERIES_QUERY_KEY, useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { TimeSeriesQueryInput } from './TimeSeriesQueryInput';\n\nexport interface TimeSeriesQueryEditorProps {\n  queries?: TimeSeriesQueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nexport function TimeSeriesQueryEditor({ queries = [], onChange }: TimeSeriesQueryEditorProps) {\n  // Build the default query plugin\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { defaultPluginKinds } = usePluginRegistry();\n  const { data: timeSeriesPlugins } = useListPluginMetadata(TIME_SERIES_QUERY_KEY);\n  const defaultTimeSeriesQueryKind = defaultPluginKinds?.[TIME_SERIES_QUERY_KEY] ?? timeSeriesPlugins?.[0]?.kind ?? '';\n  const { data: defaultQueryPlugin } = usePlugin(TIME_SERIES_QUERY_KEY, defaultTimeSeriesQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  const defaultInitialQueryDefinition: TimeSeriesQueryDefinition = {\n    kind: TIME_SERIES_QUERY_KEY,\n    spec: {\n      plugin: { kind: defaultTimeSeriesQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n    },\n  };\n\n  // State for which queries are collapsed\n  // TODO: Would be easier if we had IDs for queries.\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: TimeSeriesQueryDefinition) => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = () => {\n    if (!defaultQueryPlugin) return;\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number) => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number) => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: TimeSeriesQueryDefinition[] = queries.length ? queries : [defaultInitialQueryDefinition];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: TimeSeriesQueryDefinition, i: number) => (\n          <TimeSeriesQueryInput\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n}\n"],"names":["useState","produce","Button","Stack","AddIcon","TIME_SERIES_QUERY_KEY","useListPluginMetadata","usePlugin","usePluginRegistry","TimeSeriesQueryInput","TimeSeriesQueryEditor","queries","onChange","timeSeriesPlugins","defaultPluginKinds","data","defaultTimeSeriesQueryKind","kind","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","spec","plugin","createInitialOptions","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","length","spacing","query","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"mappings":"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"}

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TimeSeriesQueryDefinition } from '@perses-dev/core';
 interface TimeSeriesQueryInputProps {
     query: TimeSeriesQueryDefinition;
@@ -8,6 +7,6 @@ interface TimeSeriesQueryInputProps {
     isCollapsed?: boolean;
     onDelete?: (index: number) => void;
 }
-export declare const TimeSeriesQueryInput: ({ index, query, isCollapsed, onDelete, onChange, onCollapseExpand, }: TimeSeriesQueryInputProps) => JSX.Element;
+export declare const TimeSeriesQueryInput: ({ index, query, isCollapsed, onDelete, onChange, onCollapseExpand, }: TimeSeriesQueryInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TimeSeriesQueryInput.d.ts.map

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesQueryInput.d.ts","sourceRoot":"","sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAO7D,UAAU,yBAAyB;IACjC,KAAK,EAAE,yBAAyB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpE,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,oBAAoB,yEAO9B,yBAAyB,gBAsB3B,CAAC"}
+{"version":3,"file":"TimeSeriesQueryInput.d.ts","sourceRoot":"","sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAO7D,UAAU,yBAAyB;IACjC,KAAK,EAAE,yBAAyB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpE,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,oBAAoB,yEAO9B,yBAAyB,4CAsB3B,CAAC"}

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.js

@@ -17,7 +17,7 @@ import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import ChevronDown from 'mdi-material-ui/ChevronDown';
 import ChevronRight from 'mdi-material-ui/ChevronRight';
 import { PluginEditor } from '../PluginEditor';
-export const TimeSeriesQueryInput = ({ index , query , isCollapsed , onDelete , onChange , onCollapseExpand  })=>{
+export const TimeSeriesQueryInput = ({ index, query, isCollapsed, onDelete, onChange, onCollapseExpand })=>{
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1,
         children: [
@@ -62,8 +62,8 @@ export const TimeSeriesQueryInput = ({ index , query , isCollapsed , onDelete ,
 /**
  * Displays an editor for TimeSeriesQueryDefinition objects.
  */ function QueryEditor(props) {
-    const { value , onChange , ...others } = props;
-    const { spec: { plugin  }  } = value;
+    const { value, onChange, ...others } = props;
+    const { spec: { plugin } } = value;
     const handlePluginChange = (next)=>{
         onChange(produce(value, (draft)=>{
             draft.spec.plugin = next;

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport produce from 'immer';\nimport { TimeSeriesQueryDefinition } from '@perses-dev/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { PluginEditor, PluginEditorProps } from '../PluginEditor';\n\ninterface TimeSeriesQueryInputProps {\n  query: TimeSeriesQueryDefinition;\n  index: number;\n  onChange: (index: number, query: TimeSeriesQueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  isCollapsed?: boolean;\n  onDelete?: (index: number) => void;\n}\n\nexport const TimeSeriesQueryInput = ({\n  index,\n  query,\n  isCollapsed,\n  onDelete,\n  onChange,\n  onCollapseExpand,\n}: TimeSeriesQueryInputProps) => {\n  return (\n    <Stack key={index} spacing={1}>\n      <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\n        <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n          {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n        </IconButton>\n        <Typography variant=\"overline\" component=\"h4\">\n          Query {index + 1}\n        </Typography>\n        <IconButton\n          size=\"small\"\n          // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n          sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n          onClick={() => onDelete && onDelete(index)}\n        >\n          <DeleteIcon />\n        </IconButton>\n      </Stack>\n      {!isCollapsed && <QueryEditor value={query} onChange={(next) => onChange(index, next)} />}\n    </Stack>\n  );\n};\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  value: TimeSeriesQueryDefinition;\n  onChange: (next: TimeSeriesQueryDefinition) => void;\n}\n\n/**\n * Displays an editor for TimeSeriesQueryDefinition objects.\n */\nfunction QueryEditor(props: QueryEditorProps) {\n  const { value, onChange, ...others } = props;\n  const {\n    spec: { plugin },\n  } = value;\n\n  const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.spec.plugin = next;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      {/* If TimeSeriesQuery plugins ever have common props on the definition, the inputs could go here */}\n      <PluginEditor\n        pluginType=\"TimeSeriesQuery\"\n        pluginKindLabel=\"Query Type\"\n        value={plugin}\n        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n}\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","PluginEditor","TimeSeriesQueryInput","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","props","others","spec","plugin","handlePluginChange","draft","pluginType","pluginKindLabel"],"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,OAAOA,aAAa,QAAQ;AAE5B,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,SAASC,YAAY,QAA2B,kBAAkB;AAWlE,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,MAAK,EACLC,MAAK,EACLC,YAAW,EACXC,SAAQ,EACRC,SAAQ,EACRC,iBAAgB,EACU;IAC1B,qBACE,MAACd;QAAkBe,SAAS;;0BAC1B,MAACf;gBAAMgB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,QAAQC;;kCAChG,KAACrB;wBAAWsB,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACL,kCAAkB,KAACD;;kCAErC,MAACH;wBAAWuB,SAAQ;wBAAWC,WAAU;;4BAAK;4BACrCjB,QAAQ;;;kCAEjB,KAACR;wBACCsB,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,CAAC,EAAEjB,WAAW,YAAY,SAAS,CAAC;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACL;;;;YAGJ,CAACO,6BAAe,KAACmB;gBAAYC,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAjBtEvB;AAoBhB,EAAE;AAWF;;CAEC,GACD,SAASqB,YAAYG,KAAuB;IAC1C,MAAM,EAAEF,MAAK,EAAElB,SAAQ,EAAE,GAAGqB,QAAQ,GAAGD;IACvC,MAAM,EACJE,MAAM,EAAEC,OAAM,EAAE,CAAA,EACjB,GAAGL;IAEJ,MAAMM,qBAAoD,CAACL;QACzDnB,SACEd,QAAQgC,OAAO,CAACO;YACdA,MAAMH,KAAKC,SAASJ;QACtB;IAEJ;IAEA,qBACE,KAAC7B;QAAK,GAAG+B,MAAM;kBAEb,cAAA,KAAC3B;YACCgC,YAAW;YACXC,iBAAgB;YAChBT,OAAOK;YACPvB,UAAUwB;;;AAIlB"}
+{"version":3,"sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport produce from 'immer';\nimport { TimeSeriesQueryDefinition } from '@perses-dev/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { PluginEditor, PluginEditorProps } from '../PluginEditor';\n\ninterface TimeSeriesQueryInputProps {\n  query: TimeSeriesQueryDefinition;\n  index: number;\n  onChange: (index: number, query: TimeSeriesQueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  isCollapsed?: boolean;\n  onDelete?: (index: number) => void;\n}\n\nexport const TimeSeriesQueryInput = ({\n  index,\n  query,\n  isCollapsed,\n  onDelete,\n  onChange,\n  onCollapseExpand,\n}: TimeSeriesQueryInputProps) => {\n  return (\n    <Stack key={index} spacing={1}>\n      <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\n        <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n          {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n        </IconButton>\n        <Typography variant=\"overline\" component=\"h4\">\n          Query {index + 1}\n        </Typography>\n        <IconButton\n          size=\"small\"\n          // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n          sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n          onClick={() => onDelete && onDelete(index)}\n        >\n          <DeleteIcon />\n        </IconButton>\n      </Stack>\n      {!isCollapsed && <QueryEditor value={query} onChange={(next) => onChange(index, next)} />}\n    </Stack>\n  );\n};\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  value: TimeSeriesQueryDefinition;\n  onChange: (next: TimeSeriesQueryDefinition) => void;\n}\n\n/**\n * Displays an editor for TimeSeriesQueryDefinition objects.\n */\nfunction QueryEditor(props: QueryEditorProps) {\n  const { value, onChange, ...others } = props;\n  const {\n    spec: { plugin },\n  } = value;\n\n  const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.spec.plugin = next;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      {/* If TimeSeriesQuery plugins ever have common props on the definition, the inputs could go here */}\n      <PluginEditor\n        pluginType=\"TimeSeriesQuery\"\n        pluginKindLabel=\"Query Type\"\n        value={plugin}\n        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n}\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","PluginEditor","TimeSeriesQueryInput","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","props","others","spec","plugin","handlePluginChange","draft","pluginType","pluginKindLabel"],"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,OAAOA,aAAa,QAAQ;AAE5B,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,SAASC,YAAY,QAA2B,kBAAkB;AAWlE,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,gBAAgB,EACU;IAC1B,qBACE,MAACd;QAAkBe,SAAS;;0BAC1B,MAACf;gBAAMgB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAACrB;wBAAWsB,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACL,kCAAkB,KAACD;;kCAErC,MAACH;wBAAWuB,SAAQ;wBAAWC,WAAU;;4BAAK;4BACrCjB,QAAQ;;;kCAEjB,KAACR;wBACCsB,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,CAAC,EAAEjB,WAAW,YAAY,SAAS,CAAC;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACL;;;;YAGJ,CAACO,6BAAe,KAACmB;gBAAYC,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAjBtEvB;AAoBhB,EAAE;AAWF;;CAEC,GACD,SAASqB,YAAYG,KAAuB;IAC1C,MAAM,EAAEF,KAAK,EAAElB,QAAQ,EAAE,GAAGqB,QAAQ,GAAGD;IACvC,MAAM,EACJE,MAAM,EAAEC,MAAM,EAAE,EACjB,GAAGL;IAEJ,MAAMM,qBAAoD,CAACL;QACzDnB,SACEd,QAAQgC,OAAO,CAACO;YACdA,MAAMH,IAAI,CAACC,MAAM,GAAGJ;QACtB;IAEJ;IAEA,qBACE,KAAC7B;QAAK,GAAG+B,MAAM;kBAEb,cAAA,KAAC3B;YACCgC,YAAW;YACXC,iBAAgB;YAChBT,OAAOK;YACPvB,UAAUwB;;;AAIlB"}

package/dist/components/TraceQueryEditor/TraceQueryEditor.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { QueryDefinition } from '@perses-dev/core';
 import { TraceQueryDefinition } from '../../runtime';
 export interface TraceQueryEditorProps {
     queries?: TraceQueryDefinition[];
     onChange: (queries: QueryDefinition[]) => void;
 }
-export declare function TraceQueryEditor({ queries, onChange }: TraceQueryEditorProps): JSX.Element;
+export declare function TraceQueryEditor({ queries, onChange }: TraceQueryEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TraceQueryEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TraceQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TraceQueryEditor/TraceQueryEditor.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAKnD,OAAO,EAAa,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAKhE,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,gBAAgB,CAAC,EAAE,OAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,eAyGjF"}
+{"version":3,"file":"TraceQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TraceQueryEditor/TraceQueryEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAKnD,OAAO,EAAa,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAKhE,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,gBAAgB,CAAC,EAAE,OAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAyGjF"}

package/dist/components/TraceQueryEditor/TraceQueryEditor.js

@@ -18,13 +18,13 @@ import { produce } from 'immer';
 import { usePlugin } from '../../runtime';
 import { TraceQueryInput } from './TraceQueryInput';
 const DEFAULT_QUERY_PLUGIN_TYPE = 'TraceQuery';
-export function TraceQueryEditor({ queries =[] , onChange  }) {
+export function TraceQueryEditor({ queries = [], onChange }) {
     const hasMoreThanOneQuery = queries.length > 1;
     const defaultTraceQueryKind = 'TempoTraceQuery';
     // State for which queries are collapsed
     // TODO: Would be easier if we had IDs for queries.
     const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(()=>false));
-    const { data: defaultQueryPlugin  } = usePlugin(DEFAULT_QUERY_PLUGIN_TYPE, defaultTraceQueryKind, {
+    const { data: defaultQueryPlugin } = usePlugin(DEFAULT_QUERY_PLUGIN_TYPE, defaultTraceQueryKind, {
         useErrorBoundary: true,
         enabled: true
     });

package/dist/components/TraceQueryEditor/TraceQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TraceQueryEditor/TraceQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { QueryDefinition } from '@perses-dev/core';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { useState } from 'react';\nimport { produce } from 'immer';\nimport { usePlugin, TraceQueryDefinition } from '../../runtime';\nimport { TraceQueryInput } from './TraceQueryInput';\n\nconst DEFAULT_QUERY_PLUGIN_TYPE = 'TraceQuery';\n\nexport interface TraceQueryEditorProps {\n  queries?: TraceQueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nexport function TraceQueryEditor({ queries = [], onChange }: TraceQueryEditorProps) {\n  const hasMoreThanOneQuery = queries.length > 1;\n  const defaultTraceQueryKind = 'TempoTraceQuery';\n\n  // State for which queries are collapsed\n  // TODO: Would be easier if we had IDs for queries.\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  const { data: defaultQueryPlugin } = usePlugin(DEFAULT_QUERY_PLUGIN_TYPE, defaultTraceQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: TraceQueryDefinition) => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = () => {\n    if (!defaultQueryPlugin) return;\n    onChange(\n      produce(queries, (draft) => {\n        const queryDef: TraceQueryDefinition = {\n          kind: DEFAULT_QUERY_PLUGIN_TYPE,\n          spec: {\n            plugin: { kind: defaultTraceQueryKind, spec: defaultQueryPlugin.createInitialOptions() },\n          },\n        };\n        if (draft) {\n          draft.push(queryDef);\n        } else {\n          draft = [...queries, queryDef];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number) => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number) => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: TraceQueryDefinition[] = queries.length\n    ? queries\n    : [\n        {\n          kind: 'TraceQuery',\n          spec: {\n            plugin: {\n              kind: 'TempoTraceQuery',\n              spec: {\n                query: '',\n              },\n            },\n          },\n        },\n      ];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: TraceQueryDefinition, i: number) => (\n          <TraceQueryInput\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={hasMoreThanOneQuery ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n}\n"],"names":["Button","Stack","AddIcon","useState","produce","usePlugin","TraceQueryInput","DEFAULT_QUERY_PLUGIN_TYPE","TraceQueryEditor","queries","onChange","hasMoreThanOneQuery","length","defaultTraceQueryKind","queriesCollapsed","setQueriesCollapsed","map","data","defaultQueryPlugin","useErrorBoundary","enabled","handleQueryChange","index","queryDef","draft","handleQueryAdd","kind","spec","plugin","createInitialOptions","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","query","spacing","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"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;;AAGjC,SAASA,MAAM,EAAEC,KAAK,QAAQ,gBAAgB;AAC9C,OAAOC,aAAa,uBAAuB;AAC3C,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,SAAS,QAA8B,gBAAgB;AAChE,SAASC,eAAe,QAAQ,oBAAoB;AAEpD,MAAMC,4BAA4B;AAOlC,OAAO,SAASC,iBAAiB,EAAEC,SAAU,EAAE,CAAA,EAAEC,SAAQ,EAAyB;IAChF,MAAMC,sBAAsBF,QAAQG,SAAS;IAC7C,MAAMC,wBAAwB;IAE9B,wCAAwC;IACxC,mDAAmD;IACnD,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGZ,SAASM,QAAQO,IAAI,IAAM;IAE3E,MAAM,EAAEC,MAAMC,mBAAkB,EAAE,GAAGb,UAAUE,2BAA2BM,uBAAuB;QAC/FM,kBAAkB;QAClBC,SAAS;IACX;IAEA,iBAAiB;IACjB,MAAMC,oBAAoB,CAACC,OAAeC;QACxCb,SACEN,QAAQK,SAAS,CAACe;YAChB,IAAIA,OAAO;gBACTA,KAAK,CAACF,MAAM,GAAGC;YACjB,OAAO;gBACLC,QAAQ;oBAACD;iBAAS;YACpB;QACF;IAEJ;IAEA,MAAME,iBAAiB;QACrB,IAAI,CAACP,oBAAoB;QACzBR,SACEN,QAAQK,SAAS,CAACe;YAChB,MAAMD,WAAiC;gBACrCG,MAAMnB;gBACNoB,MAAM;oBACJC,QAAQ;wBAAEF,MAAMb;wBAAuBc,MAAMT,mBAAmBW;oBAAuB;gBACzF;YACF;YACA,IAAIL,OAAO;gBACTA,MAAMM,KAAKP;YACb,OAAO;gBACLC,QAAQ;uBAAIf;oBAASc;iBAAS;YAChC;QACF;QAEFR,oBAAoB,CAACD;YACnBA,iBAAiBgB,KAAK;YACtB,OAAO;mBAAIhB;aAAiB;QAC9B;IACF;IAEA,MAAMiB,oBAAoB,CAACT;QACzBZ,SACEN,QAAQK,SAAS,CAACe;YAChBA,MAAMQ,OAAOV,OAAO;QACtB;QAEFP,oBAAoB,CAACD;YACnBA,iBAAiBkB,OAAOV,OAAO;YAC/B,OAAO;mBAAIR;aAAiB;QAC9B;IACF;IAEA,MAAMmB,4BAA4B,CAACX;QACjCP,oBAAoB,CAACD;YACnBA,gBAAgB,CAACQ,MAAM,GAAG,CAACR,gBAAgB,CAACQ,MAAM;YAClD,OAAO;mBAAIR;aAAiB;QAC9B;IACF;IAEA,2CAA2C;IAC3C,MAAMoB,mBAA2CzB,QAAQG,SACrDH,UACA;QACE;YACEiB,MAAM;YACNC,MAAM;gBACJC,QAAQ;oBACNF,MAAM;oBACNC,MAAM;wBACJQ,OAAO;oBACT;gBACF;YACF;QACF;KACD;IAEL,qBACE;;0BACE,KAAClC;gBAAMmC,SAAS;0BACbF,iBAAiBlB,IAAI,CAACmB,OAA6BE,kBAClD,KAAC/B;wBAECgB,OAAOe;wBACPF,OAAOA;wBACPG,aAAa,CAAC,CAACxB,gBAAgB,CAACuB,EAAE;wBAClC3B,UAAUW;wBACVkB,UAAU5B,sBAAsBoB,oBAAoBS;wBACpDC,kBAAkBR;uBANbI;;0BAUX,KAACrC;gBAAO0C,SAAQ;gBAAYC,yBAAW,KAACzC;gBAAY0C,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASrB;0BAAgB;;;;AAKzG"}
+{"version":3,"sources":["../../../src/components/TraceQueryEditor/TraceQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { QueryDefinition } from '@perses-dev/core';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { useState } from 'react';\nimport { produce } from 'immer';\nimport { usePlugin, TraceQueryDefinition } from '../../runtime';\nimport { TraceQueryInput } from './TraceQueryInput';\n\nconst DEFAULT_QUERY_PLUGIN_TYPE = 'TraceQuery';\n\nexport interface TraceQueryEditorProps {\n  queries?: TraceQueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nexport function TraceQueryEditor({ queries = [], onChange }: TraceQueryEditorProps) {\n  const hasMoreThanOneQuery = queries.length > 1;\n  const defaultTraceQueryKind = 'TempoTraceQuery';\n\n  // State for which queries are collapsed\n  // TODO: Would be easier if we had IDs for queries.\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  const { data: defaultQueryPlugin } = usePlugin(DEFAULT_QUERY_PLUGIN_TYPE, defaultTraceQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: TraceQueryDefinition) => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = () => {\n    if (!defaultQueryPlugin) return;\n    onChange(\n      produce(queries, (draft) => {\n        const queryDef: TraceQueryDefinition = {\n          kind: DEFAULT_QUERY_PLUGIN_TYPE,\n          spec: {\n            plugin: { kind: defaultTraceQueryKind, spec: defaultQueryPlugin.createInitialOptions() },\n          },\n        };\n        if (draft) {\n          draft.push(queryDef);\n        } else {\n          draft = [...queries, queryDef];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number) => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number) => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: TraceQueryDefinition[] = queries.length\n    ? queries\n    : [\n        {\n          kind: 'TraceQuery',\n          spec: {\n            plugin: {\n              kind: 'TempoTraceQuery',\n              spec: {\n                query: '',\n              },\n            },\n          },\n        },\n      ];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: TraceQueryDefinition, i: number) => (\n          <TraceQueryInput\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={hasMoreThanOneQuery ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n}\n"],"names":["Button","Stack","AddIcon","useState","produce","usePlugin","TraceQueryInput","DEFAULT_QUERY_PLUGIN_TYPE","TraceQueryEditor","queries","onChange","hasMoreThanOneQuery","length","defaultTraceQueryKind","queriesCollapsed","setQueriesCollapsed","map","data","defaultQueryPlugin","useErrorBoundary","enabled","handleQueryChange","index","queryDef","draft","handleQueryAdd","kind","spec","plugin","createInitialOptions","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","query","spacing","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"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;;AAGjC,SAASA,MAAM,EAAEC,KAAK,QAAQ,gBAAgB;AAC9C,OAAOC,aAAa,uBAAuB;AAC3C,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,SAAS,QAA8B,gBAAgB;AAChE,SAASC,eAAe,QAAQ,oBAAoB;AAEpD,MAAMC,4BAA4B;AAOlC,OAAO,SAASC,iBAAiB,EAAEC,UAAU,EAAE,EAAEC,QAAQ,EAAyB;IAChF,MAAMC,sBAAsBF,QAAQG,MAAM,GAAG;IAC7C,MAAMC,wBAAwB;IAE9B,wCAAwC;IACxC,mDAAmD;IACnD,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGZ,SAASM,QAAQO,GAAG,CAAC,IAAM;IAE3E,MAAM,EAAEC,MAAMC,kBAAkB,EAAE,GAAGb,UAAUE,2BAA2BM,uBAAuB;QAC/FM,kBAAkB;QAClBC,SAAS;IACX;IAEA,iBAAiB;IACjB,MAAMC,oBAAoB,CAACC,OAAeC;QACxCb,SACEN,QAAQK,SAAS,CAACe;YAChB,IAAIA,OAAO;gBACTA,KAAK,CAACF,MAAM,GAAGC;YACjB,OAAO;gBACLC,QAAQ;oBAACD;iBAAS;YACpB;QACF;IAEJ;IAEA,MAAME,iBAAiB;QACrB,IAAI,CAACP,oBAAoB;QACzBR,SACEN,QAAQK,SAAS,CAACe;YAChB,MAAMD,WAAiC;gBACrCG,MAAMnB;gBACNoB,MAAM;oBACJC,QAAQ;wBAAEF,MAAMb;wBAAuBc,MAAMT,mBAAmBW,oBAAoB;oBAAG;gBACzF;YACF;YACA,IAAIL,OAAO;gBACTA,MAAMM,IAAI,CAACP;YACb,OAAO;gBACLC,QAAQ;uBAAIf;oBAASc;iBAAS;YAChC;QACF;QAEFR,oBAAoB,CAACD;YACnBA,iBAAiBgB,IAAI,CAAC;YACtB,OAAO;mBAAIhB;aAAiB;QAC9B;IACF;IAEA,MAAMiB,oBAAoB,CAACT;QACzBZ,SACEN,QAAQK,SAAS,CAACe;YAChBA,MAAMQ,MAAM,CAACV,OAAO;QACtB;QAEFP,oBAAoB,CAACD;YACnBA,iBAAiBkB,MAAM,CAACV,OAAO;YAC/B,OAAO;mBAAIR;aAAiB;QAC9B;IACF;IAEA,MAAMmB,4BAA4B,CAACX;QACjCP,oBAAoB,CAACD;YACnBA,gBAAgB,CAACQ,MAAM,GAAG,CAACR,gBAAgB,CAACQ,MAAM;YAClD,OAAO;mBAAIR;aAAiB;QAC9B;IACF;IAEA,2CAA2C;IAC3C,MAAMoB,mBAA2CzB,QAAQG,MAAM,GAC3DH,UACA;QACE;YACEiB,MAAM;YACNC,MAAM;gBACJC,QAAQ;oBACNF,MAAM;oBACNC,MAAM;wBACJQ,OAAO;oBACT;gBACF;YACF;QACF;KACD;IAEL,qBACE;;0BACE,KAAClC;gBAAMmC,SAAS;0BACbF,iBAAiBlB,GAAG,CAAC,CAACmB,OAA6BE,kBAClD,KAAC/B;wBAECgB,OAAOe;wBACPF,OAAOA;wBACPG,aAAa,CAAC,CAACxB,gBAAgB,CAACuB,EAAE;wBAClC3B,UAAUW;wBACVkB,UAAU5B,sBAAsBoB,oBAAoBS;wBACpDC,kBAAkBR;uBANbI;;0BAUX,KAACrC;gBAAO0C,SAAQ;gBAAYC,yBAAW,KAACzC;gBAAY0C,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAASrB;0BAAgB;;;;AAKzG"}

package/dist/components/TraceQueryEditor/TraceQueryInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TraceQueryDefinition } from '../../runtime';
 interface TraceQueryInputProps {
     query: TraceQueryDefinition;
@@ -8,6 +7,6 @@ interface TraceQueryInputProps {
     isCollapsed?: boolean;
     onDelete?: (index: number) => void;
 }
-export declare const TraceQueryInput: ({ index, query, isCollapsed, onDelete, onChange, onCollapseExpand, }: TraceQueryInputProps) => JSX.Element;
+export declare const TraceQueryInput: ({ index, query, isCollapsed, onDelete, onChange, onCollapseExpand, }: TraceQueryInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TraceQueryInput.d.ts.map

package/dist/components/TraceQueryEditor/TraceQueryInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TraceQueryInput.d.ts","sourceRoot":"","sources":["../../../src/components/TraceQueryEditor/TraceQueryInput.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,oBAAoB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/D,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAWD,eAAO,MAAM,eAAe,yEAOzB,oBAAoB,gBAsBtB,CAAC"}
+{"version":3,"file":"TraceQueryInput.d.ts","sourceRoot":"","sources":["../../../src/components/TraceQueryEditor/TraceQueryInput.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,oBAAoB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/D,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAWD,eAAO,MAAM,eAAe,yEAOzB,oBAAoB,4CAsBtB,CAAC"}