@perses-dev/components 0.55.0 → 0.56.0-beta.0

package/dist/TransformsEditor/TransformEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TransformsEditor/TransformEditor.tsx"],"sourcesContent":["// Copyright 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 type { StackProps } from '@mui/material';\nimport {\n  Autocomplete,\n  FormControlLabel,\n  MenuItem,\n  Stack,\n  Switch,\n  Typography,\n  TextField as MuiTextField,\n} from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { TextField } from '../controls';\nimport type {\n  JoinByColumnValueTransform,\n  MergeColumnsTransform,\n  MergeIndexedColumnsTransform,\n  MergeSeriesTransform,\n  PivotByLabelTransform,\n  Transform,\n} from '../model';\n\ninterface TransformSpecEditorProps<Spec> {\n  value: Spec;\n  onChange: (transform: Spec) => void;\n}\n\nfunction JoinByColumnValueTransformEditor({\n  value,\n  onChange,\n}: TransformSpecEditorProps<JoinByColumnValueTransform>): ReactElement {\n  return (\n    <Stack direction=\"row\">\n      <Autocomplete\n        freeSolo\n        multiple\n        id=\"join-columns\"\n        sx={{ width: '100%' }}\n        options={[]} // TODO: autofill columns name when query results is available to panel editors\n        value={value.spec.columns ?? []}\n        renderInput={(params) => <MuiTextField {...params} variant=\"outlined\" label=\"Columns\" required />}\n        onChange={(_, columns) => {\n          onChange({\n            ...value,\n            spec: {\n              ...value.spec,\n              columns: columns,\n            },\n          });\n        }}\n      />\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nfunction MergeColumnsTransformEditor({\n  value,\n  onChange,\n}: TransformSpecEditorProps<MergeColumnsTransform>): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} alignItems=\"center\">\n      <Autocomplete\n        freeSolo\n        multiple\n        id=\"merge-columns-columns\"\n        sx={{ width: '100%' }}\n        options={[]}\n        value={value.spec.columns ?? []}\n        renderInput={(params) => <MuiTextField {...params} variant=\"outlined\" label=\"Columns\" required />}\n        onChange={(_, columns) => {\n          onChange({\n            ...value,\n            spec: {\n              ...value.spec,\n              columns: columns,\n            },\n          });\n        }}\n      />\n\n      <TextField\n        id=\"merge-columns-name\"\n        variant=\"outlined\"\n        label=\"Output Name\"\n        value={value.spec.name ?? ''}\n        sx={{ width: '100%' }}\n        onChange={(name) => {\n          onChange({\n            ...value,\n            spec: {\n              ...value.spec,\n              name: name,\n            },\n          });\n        }}\n        required\n      />\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nfunction MergeIndexedColumnsTransformEditor({\n  value,\n  onChange,\n}: TransformSpecEditorProps<MergeIndexedColumnsTransform>): ReactElement {\n  return (\n    <Stack direction=\"row\">\n      <TextField\n        id=\"merge-indexed-columns\"\n        variant=\"outlined\"\n        label=\"Column\"\n        placeholder=\"Example: 'value' for merging 'value #1', 'value #2' and 'value #...'\"\n        value={value.spec.column ?? ''}\n        sx={{ width: '100%' }}\n        onChange={(column) => {\n          onChange({\n            ...value,\n            spec: { ...value.spec, column: column },\n          });\n        }}\n        required\n      />\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nfunction MergeSeriesTransformEditor({ value, onChange }: TransformSpecEditorProps<MergeSeriesTransform>): ReactElement {\n  return (\n    <Stack direction=\"row\">\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nexport interface TransformEditorProps extends Omit<StackProps, 'children' | 'value' | 'onChange'> {\n  value: Transform;\n  onChange: (transform: Transform) => void;\n}\n\nexport function TransformEditor({ value, onChange, ...props }: TransformEditorProps): ReactElement {\n  return (\n    <Stack gap={2} sx={{ width: '100%' }} mt={1} {...props}>\n      <TextField\n        select\n        label=\"Kind\"\n        value={value.kind}\n        onChange={(kind) => onChange({ ...value, kind: kind as unknown as Transform['kind'] } as Transform)}\n      >\n        <MenuItem value=\"JoinByColumnValue\">\n          <Stack>\n            <Typography>Join by column value</Typography>\n            <Typography variant=\"caption\">Regroup rows with equal cell value in a column</Typography>\n          </Stack>\n        </MenuItem>\n        <MenuItem value=\"MergeColumns\">\n          <Stack>\n            <Typography>Merge columns</Typography>\n            <Typography variant=\"caption\">Multiple columns are merged to one column</Typography>\n          </Stack>\n        </MenuItem>\n        <MenuItem value=\"MergeIndexedColumns\">\n          <Stack>\n            <Typography>Merge indexed columns</Typography>\n            <Typography variant=\"caption\">Indexed columns are merged to one column</Typography>\n          </Stack>\n        </MenuItem>\n        <MenuItem value=\"MergeSeries\">\n          <Stack>\n            <Typography>Merge series</Typography>\n            <Typography variant=\"caption\">Series will be merged by their labels</Typography>\n          </Stack>\n        </MenuItem>\n        <MenuItem value=\"PivotByLabel\">\n          <Stack>\n            <Typography>Pivot by label</Typography>\n            <Typography variant=\"caption\">Time × label matrix (rows = time, columns = label values)</Typography>\n          </Stack>\n        </MenuItem>\n      </TextField>\n      {value.kind === 'JoinByColumnValue' && <JoinByColumnValueTransformEditor value={value} onChange={onChange} />}\n      {value.kind === 'MergeColumns' && <MergeColumnsTransformEditor value={value} onChange={onChange} />}\n      {value.kind === 'MergeIndexedColumns' && <MergeIndexedColumnsTransformEditor value={value} onChange={onChange} />}\n      {value.kind === 'MergeSeries' && <MergeSeriesTransformEditor value={value} onChange={onChange} />}\n      {value.kind === 'PivotByLabel' && <PivotByLabelTransformEditor value={value} onChange={onChange} />}\n    </Stack>\n  );\n}\n\nfunction PivotByLabelTransformEditor({\n  value,\n  onChange,\n}: TransformSpecEditorProps<PivotByLabelTransform>): ReactElement {\n  return (\n    <Stack gap={2}>\n      <MuiTextField\n        label=\"Column label\"\n        fullWidth\n        value={value.spec.columnLabel ?? ''}\n        onChange={(e) => onChange({ ...value, spec: { ...value.spec, columnLabel: e.target.value } })}\n        helperText=\"Label that becomes dynamic column headers (e.g. farm_short)\"\n      />\n      <MuiTextField\n        label=\"Row field\"\n        fullWidth\n        value={value.spec.rowField ?? 'timestamp'}\n        onChange={(e) => onChange({ ...value, spec: { ...value.spec, rowField: e.target.value } })}\n        helperText=\"Field used for row identity (default: timestamp)\"\n      />\n      <MuiTextField\n        label=\"Value field\"\n        fullWidth\n        value={value.spec.valueField ?? 'value'}\n        onChange={(e) => onChange({ ...value, spec: { ...value.spec, valueField: e.target.value } })}\n      />\n      <MuiTextField\n        label=\"Row column name\"\n        fullWidth\n        value={value.spec.rowColumnName ?? ''}\n        onChange={(e) =>\n          onChange({\n            ...value,\n            spec: { ...value.spec, rowColumnName: e.target.value || undefined },\n          })\n        }\n        helperText=\"Optional display name for the row column (default: row field)\"\n      />\n      <FormControlLabel\n        control={\n          <Switch\n            checked={!!value.spec.disabled}\n            onChange={(_, checked) => onChange({ ...value, spec: { ...value.spec, disabled: checked } })}\n          />\n        }\n        label=\"Disabled\"\n      />\n    </Stack>\n  );\n}\n"],"names":["Autocomplete","FormControlLabel","MenuItem","Stack","Switch","Typography","TextField","MuiTextField","JoinByColumnValueTransformEditor","value","onChange","direction","freeSolo","multiple","id","sx","width","options","spec","columns","renderInput","params","variant","label","required","_","labelPlacement","control","disabled","checked","e","target","MergeColumnsTransformEditor","gap","alignItems","name","MergeIndexedColumnsTransformEditor","placeholder","column","MergeSeriesTransformEditor","TransformEditor","props","mt","select","kind","PivotByLabelTransformEditor","fullWidth","columnLabel","helperText","rowField","valueField","rowColumnName","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../src/TransformsEditor/TransformEditor.tsx"],"sourcesContent":["// Copyright 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 type { StackProps } from '@mui/material';\nimport {\n  Autocomplete,\n  FormControlLabel,\n  MenuItem,\n  Stack,\n  Switch,\n  Typography,\n  TextField as MuiTextField,\n} from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { TextField } from '../controls';\nimport type {\n  JoinByColumnValueTransform,\n  MergeColumnsTransform,\n  MergeIndexedColumnsTransform,\n  MergeSeriesTransform,\n  PivotByLabelTransform,\n  Transform,\n} from '../model';\n\ninterface TransformSpecEditorProps<Spec> {\n  value: Spec;\n  onChange: (transform: Spec) => void;\n}\n\nfunction JoinByColumnValueTransformEditor({\n  value,\n  onChange,\n}: TransformSpecEditorProps<JoinByColumnValueTransform>): ReactElement {\n  return (\n    <Stack direction=\"row\">\n      <Autocomplete\n        freeSolo\n        multiple\n        id=\"join-columns\"\n        sx={{ width: '100%' }}\n        options={[]} // TODO: autofill columns name when query results is available to panel editors\n        value={value.spec.columns ?? []}\n        renderInput={(params) => <MuiTextField {...params} variant=\"outlined\" label=\"Columns\" required />}\n        onChange={(_, columns) => {\n          onChange({\n            ...value,\n            spec: {\n              ...value.spec,\n              columns: columns,\n            },\n          });\n        }}\n      />\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nfunction MergeColumnsTransformEditor({\n  value,\n  onChange,\n}: TransformSpecEditorProps<MergeColumnsTransform>): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} alignItems=\"center\">\n      <Autocomplete\n        freeSolo\n        multiple\n        id=\"merge-columns-columns\"\n        sx={{ width: '100%' }}\n        options={[]}\n        value={value.spec.columns ?? []}\n        renderInput={(params) => <MuiTextField {...params} variant=\"outlined\" label=\"Columns\" required />}\n        onChange={(_, columns) => {\n          onChange({\n            ...value,\n            spec: {\n              ...value.spec,\n              columns: columns,\n            },\n          });\n        }}\n      />\n\n      <TextField\n        id=\"merge-columns-name\"\n        variant=\"outlined\"\n        label=\"Output Name\"\n        value={value.spec.name ?? ''}\n        sx={{ width: '100%' }}\n        onChange={(name) => {\n          onChange({\n            ...value,\n            spec: {\n              ...value.spec,\n              name: name,\n            },\n          });\n        }}\n        required\n      />\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nfunction MergeIndexedColumnsTransformEditor({\n  value,\n  onChange,\n}: TransformSpecEditorProps<MergeIndexedColumnsTransform>): ReactElement {\n  return (\n    <Stack direction=\"row\">\n      <TextField\n        id=\"merge-indexed-columns\"\n        variant=\"outlined\"\n        label=\"Column\"\n        placeholder=\"Example: 'value' for merging 'value #1', 'value #2' and 'value #...'\"\n        value={value.spec.column ?? ''}\n        sx={{ width: '100%' }}\n        onChange={(column) => {\n          onChange({\n            ...value,\n            spec: { ...value.spec, column: column },\n          });\n        }}\n        required\n      />\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nfunction MergeSeriesTransformEditor({ value, onChange }: TransformSpecEditorProps<MergeSeriesTransform>): ReactElement {\n  return (\n    <Stack direction=\"row\">\n      <FormControlLabel\n        label=\"Enabled\"\n        labelPlacement=\"start\"\n        control={\n          <Switch\n            value={!value.spec.disabled}\n            checked={!value.spec.disabled}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                spec: { ...value.spec, disabled: !e.target.checked },\n              })\n            }\n          />\n        }\n      />\n    </Stack>\n  );\n}\n\nexport interface TransformEditorProps extends Omit<StackProps, 'children' | 'value' | 'onChange'> {\n  value: Transform;\n  onChange: (transform: Transform) => void;\n}\n\nexport function TransformEditor({ value, onChange, ...props }: TransformEditorProps): ReactElement {\n  return (\n    <Stack gap={2} sx={{ width: '100%' }} mt={1} {...props}>\n      <TextField\n        select\n        label=\"Kind\"\n        value={value.kind}\n        onChange={(kind) => onChange({ ...value, kind: kind as unknown as Transform['kind'] } as Transform)}\n      >\n        <MenuItem value=\"JoinByColumnValue\">\n          <Stack>\n            <Typography>Join by column value</Typography>\n            <Typography variant=\"caption\">Regroup rows with equal cell value in a column</Typography>\n          </Stack>\n        </MenuItem>\n        <MenuItem value=\"MergeColumns\">\n          <Stack>\n            <Typography>Merge columns</Typography>\n            <Typography variant=\"caption\">Multiple columns are merged to one column</Typography>\n          </Stack>\n        </MenuItem>\n        <MenuItem value=\"MergeIndexedColumns\">\n          <Stack>\n            <Typography>Merge indexed columns</Typography>\n            <Typography variant=\"caption\">Indexed columns are merged to one column</Typography>\n          </Stack>\n        </MenuItem>\n        <MenuItem value=\"MergeSeries\">\n          <Stack>\n            <Typography>Merge series</Typography>\n            <Typography variant=\"caption\">Series will be merged by their labels</Typography>\n          </Stack>\n        </MenuItem>\n        <MenuItem value=\"PivotByLabel\">\n          <Stack>\n            <Typography>Pivot by label</Typography>\n            <Typography variant=\"caption\">Time × label matrix (rows = time, columns = label values)</Typography>\n          </Stack>\n        </MenuItem>\n      </TextField>\n      {value.kind === 'JoinByColumnValue' && <JoinByColumnValueTransformEditor value={value} onChange={onChange} />}\n      {value.kind === 'MergeColumns' && <MergeColumnsTransformEditor value={value} onChange={onChange} />}\n      {value.kind === 'MergeIndexedColumns' && <MergeIndexedColumnsTransformEditor value={value} onChange={onChange} />}\n      {value.kind === 'MergeSeries' && <MergeSeriesTransformEditor value={value} onChange={onChange} />}\n      {value.kind === 'PivotByLabel' && <PivotByLabelTransformEditor value={value} onChange={onChange} />}\n    </Stack>\n  );\n}\n\nfunction PivotByLabelTransformEditor({\n  value,\n  onChange,\n}: TransformSpecEditorProps<PivotByLabelTransform>): ReactElement {\n  return (\n    <Stack gap={2}>\n      <MuiTextField\n        label=\"Column label\"\n        fullWidth\n        value={value.spec.columnLabel ?? ''}\n        onChange={(e) => onChange({ ...value, spec: { ...value.spec, columnLabel: e.target.value } })}\n        helperText=\"Label that becomes dynamic column headers (e.g. farm_short)\"\n      />\n      <MuiTextField\n        label=\"Row field\"\n        fullWidth\n        value={value.spec.rowField ?? 'timestamp'}\n        onChange={(e) => onChange({ ...value, spec: { ...value.spec, rowField: e.target.value } })}\n        helperText=\"Field used for row identity (default: timestamp)\"\n      />\n      <MuiTextField\n        label=\"Value field\"\n        fullWidth\n        value={value.spec.valueField ?? 'value'}\n        onChange={(e) => onChange({ ...value, spec: { ...value.spec, valueField: e.target.value } })}\n      />\n      <MuiTextField\n        label=\"Row column name\"\n        fullWidth\n        value={value.spec.rowColumnName ?? ''}\n        onChange={(e) =>\n          onChange({\n            ...value,\n            spec: { ...value.spec, rowColumnName: e.target.value || undefined },\n          })\n        }\n        helperText=\"Optional display name for the row column (default: row field)\"\n      />\n      <FormControlLabel\n        control={\n          <Switch\n            checked={!!value.spec.disabled}\n            onChange={(_, checked) => onChange({ ...value, spec: { ...value.spec, disabled: checked } })}\n          />\n        }\n        label=\"Disabled\"\n      />\n    </Stack>\n  );\n}\n"],"names":["Autocomplete","FormControlLabel","MenuItem","Stack","Switch","Typography","TextField","MuiTextField"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;;AAGjC,SACEA,YAAY,EACZC,gBAAgB,EAChBC,QAAQ,EACRC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,aAAaC,YAAY,QACpB,gBAAgB;AAGvB,SAASD,SAAS,QAAQ,uBAAc;AAexC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDP"}

package/dist/TransformsEditor/TransformEditorContainer.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright 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.
@@ -19,100 +20,261 @@ import EyeOffIcon from "mdi-material-ui/EyeOffOutline";
 import EyeIcon from "mdi-material-ui/EyeOutline";
 import { TRANSFORM_TEXT } from "../model/index.js";
 import { TransformEditor } from "./TransformEditor.js";
-export function TransformEditorContainer({ index, value, isCollapsed, onChange, onCollapse, onDelete, ...props }) {
-    function handleTransformDisable() {
-        onChange({
-            ...value,
-            spec: {
-                ...value.spec,
-                disabled: !value.spec?.disabled
-            }
+export function TransformEditorContainer(t0) {
+    const $ = _c(48);
+    let index;
+    let isCollapsed;
+    let onChange;
+    let onCollapse;
+    let onDelete;
+    let props;
+    let value;
+    if ($[0] !== t0) {
+        ({ index, value, isCollapsed, onChange, onCollapse, onDelete, ...props } = t0);
+        $[0] = t0;
+        $[1] = index;
+        $[2] = isCollapsed;
+        $[3] = onChange;
+        $[4] = onCollapse;
+        $[5] = onDelete;
+        $[6] = props;
+        $[7] = value;
+    } else {
+        index = $[1];
+        isCollapsed = $[2];
+        onChange = $[3];
+        onCollapse = $[4];
+        onDelete = $[5];
+        props = $[6];
+        value = $[7];
+    }
+    let t1;
+    if ($[8] !== onChange || $[9] !== value) {
+        t1 = function handleTransformDisable() {
+            onChange({
+                ...value,
+                spec: {
+                    ...value.spec,
+                    disabled: !value.spec?.disabled
+                }
+            });
+        };
+        $[8] = onChange;
+        $[9] = value;
+        $[10] = t1;
+    } else {
+        t1 = $[10];
+    }
+    const handleTransformDisable = t1;
+    const t2 = `transform-toggle#${index}`;
+    let t3;
+    if ($[11] !== isCollapsed || $[12] !== onCollapse) {
+        t3 = ()=>onCollapse(!isCollapsed);
+        $[11] = isCollapsed;
+        $[12] = onCollapse;
+        $[13] = t3;
+    } else {
+        t3 = $[13];
+    }
+    let t4;
+    if ($[14] !== isCollapsed) {
+        t4 = isCollapsed ? /*#__PURE__*/ _jsx(ChevronRight, {}) : /*#__PURE__*/ _jsx(ChevronDown, {});
+        $[14] = isCollapsed;
+        $[15] = t4;
+    } else {
+        t4 = $[15];
+    }
+    let t5;
+    if ($[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+        t5 = /*#__PURE__*/ _jsx(IconButton, {
+            "data-testid": t2,
+            size: "small",
+            onClick: t3,
+            children: t4
         });
+        $[16] = t2;
+        $[17] = t3;
+        $[18] = t4;
+        $[19] = t5;
+    } else {
+        t5 = $[19];
     }
-    return /*#__PURE__*/ _jsxs(Stack, {
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsxs(Stack, {
-                direction: "row",
-                alignItems: "center",
-                borderBottom: 1,
-                borderColor: (theme)=>theme.palette.divider,
-                justifyContent: "space-between",
-                gap: 4,
-                children: [
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        direction: "row",
-                        gap: 1,
-                        children: [
-                            /*#__PURE__*/ _jsx(IconButton, {
-                                "data-testid": `transform-toggle#${index}`,
-                                size: "small",
-                                onClick: ()=>onCollapse(!isCollapsed),
-                                children: isCollapsed ? /*#__PURE__*/ _jsx(ChevronRight, {}) : /*#__PURE__*/ _jsx(ChevronDown, {})
-                            }),
-                            /*#__PURE__*/ _jsx(Typography, {
-                                variant: "overline",
-                                component: "h4",
-                                sx: {
-                                    textTransform: 'none'
-                                },
-                                children: value.kind ? /*#__PURE__*/ _jsx("span", {
-                                    children: /*#__PURE__*/ _jsx("strong", {
-                                        children: TRANSFORM_TEXT[value.kind]
-                                    })
-                                }) : /*#__PURE__*/ _jsx("strong", {
-                                    children: "Select a transformation kind"
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        direction: "row",
-                        gap: 1,
-                        children: [
-                            isCollapsed && /*#__PURE__*/ _jsxs(_Fragment, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(Tooltip, {
-                                        title: value.spec?.disabled ? 'Enable transformation' : 'Disable transformation',
-                                        placement: "top",
-                                        children: /*#__PURE__*/ _jsx(IconButton, {
-                                            size: "small",
-                                            sx: {
-                                                marginLeft: 'auto'
-                                            },
-                                            onClick: handleTransformDisable,
-                                            children: value.spec?.disabled ? /*#__PURE__*/ _jsx(EyeOffIcon, {}) : /*#__PURE__*/ _jsx(EyeIcon, {})
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx(Divider, {
-                                        flexItem: true,
-                                        orientation: "vertical",
-                                        variant: "middle"
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(Tooltip, {
-                                title: "Remove transformation",
-                                placement: "top",
-                                children: /*#__PURE__*/ _jsx(IconButton, {
-                                    size: "small",
-                                    sx: {
-                                        marginLeft: 'auto'
-                                    },
-                                    onClick: onDelete,
-                                    children: /*#__PURE__*/ _jsx(DeleteIcon, {})
-                                })
-                            })
-                        ]
+    let t6;
+    if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+        t6 = {
+            textTransform: "none"
+        };
+        $[20] = t6;
+    } else {
+        t6 = $[20];
+    }
+    let t7;
+    if ($[21] !== value.kind) {
+        t7 = /*#__PURE__*/ _jsx(Typography, {
+            variant: "overline",
+            component: "h4",
+            sx: t6,
+            children: value.kind ? /*#__PURE__*/ _jsx("span", {
+                children: /*#__PURE__*/ _jsx("strong", {
+                    children: TRANSFORM_TEXT[value.kind]
+                })
+            }) : /*#__PURE__*/ _jsx("strong", {
+                children: "Select a transformation kind"
+            })
+        });
+        $[21] = value.kind;
+        $[22] = t7;
+    } else {
+        t7 = $[22];
+    }
+    let t8;
+    if ($[23] !== t5 || $[24] !== t7) {
+        t8 = /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            gap: 1,
+            children: [
+                t5,
+                t7
+            ]
+        });
+        $[23] = t5;
+        $[24] = t7;
+        $[25] = t8;
+    } else {
+        t8 = $[25];
+    }
+    let t9;
+    if ($[26] !== handleTransformDisable || $[27] !== isCollapsed || $[28] !== value.spec?.disabled) {
+        t9 = isCollapsed && /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    title: value.spec?.disabled ? "Enable transformation" : "Disable transformation",
+                    placement: "top",
+                    children: /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        sx: {
+                            marginLeft: "auto"
+                        },
+                        onClick: handleTransformDisable,
+                        children: value.spec?.disabled ? /*#__PURE__*/ _jsx(EyeOffIcon, {}) : /*#__PURE__*/ _jsx(EyeIcon, {})
                     })
-                ]
-            }),
-            !isCollapsed && /*#__PURE__*/ _jsx(TransformEditor, {
-                value: value,
-                onChange: onChange
+                }),
+                /*#__PURE__*/ _jsx(Divider, {
+                    flexItem: true,
+                    orientation: "vertical",
+                    variant: "middle"
+                })
+            ]
+        });
+        $[26] = handleTransformDisable;
+        $[27] = isCollapsed;
+        $[28] = value.spec?.disabled;
+        $[29] = t9;
+    } else {
+        t9 = $[29];
+    }
+    let t10;
+    if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+        t10 = {
+            marginLeft: "auto"
+        };
+        $[30] = t10;
+    } else {
+        t10 = $[30];
+    }
+    let t11;
+    if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+        t11 = /*#__PURE__*/ _jsx(DeleteIcon, {});
+        $[31] = t11;
+    } else {
+        t11 = $[31];
+    }
+    let t12;
+    if ($[32] !== onDelete) {
+        t12 = /*#__PURE__*/ _jsx(Tooltip, {
+            title: "Remove transformation",
+            placement: "top",
+            children: /*#__PURE__*/ _jsx(IconButton, {
+                size: "small",
+                sx: t10,
+                onClick: onDelete,
+                children: t11
             })
-        ]
-    });
+        });
+        $[32] = onDelete;
+        $[33] = t12;
+    } else {
+        t12 = $[33];
+    }
+    let t13;
+    if ($[34] !== t12 || $[35] !== t9) {
+        t13 = /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            gap: 1,
+            children: [
+                t9,
+                t12
+            ]
+        });
+        $[34] = t12;
+        $[35] = t9;
+        $[36] = t13;
+    } else {
+        t13 = $[36];
+    }
+    let t14;
+    if ($[37] !== t13 || $[38] !== t8) {
+        t14 = /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            borderBottom: 1,
+            borderColor: _temp,
+            justifyContent: "space-between",
+            gap: 4,
+            children: [
+                t8,
+                t13
+            ]
+        });
+        $[37] = t13;
+        $[38] = t8;
+        $[39] = t14;
+    } else {
+        t14 = $[39];
+    }
+    let t15;
+    if ($[40] !== isCollapsed || $[41] !== onChange || $[42] !== value) {
+        t15 = !isCollapsed && /*#__PURE__*/ _jsx(TransformEditor, {
+            value: value,
+            onChange: onChange
+        });
+        $[40] = isCollapsed;
+        $[41] = onChange;
+        $[42] = value;
+        $[43] = t15;
+    } else {
+        t15 = $[43];
+    }
+    let t16;
+    if ($[44] !== props || $[45] !== t14 || $[46] !== t15) {
+        t16 = /*#__PURE__*/ _jsxs(Stack, {
+            ...props,
+            children: [
+                t14,
+                t15
+            ]
+        });
+        $[44] = props;
+        $[45] = t14;
+        $[46] = t15;
+        $[47] = t16;
+    } else {
+        t16 = $[47];
+    }
+    return t16;
+}
+function _temp(theme) {
+    return theme.palette.divider;
 }
 
 //# sourceMappingURL=TransformEditorContainer.js.map

package/dist/TransformsEditor/TransformEditorContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TransformsEditor/TransformEditorContainer.tsx"],"sourcesContent":["// Copyright 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 { Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport EyeOffIcon from 'mdi-material-ui/EyeOffOutline';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport type { ReactElement } from 'react';\n\nimport type { Transform } from '../model';\nimport { TRANSFORM_TEXT } from '../model';\nimport type { TransformEditorProps } from './TransformEditor';\nimport { TransformEditor } from './TransformEditor';\n\nexport interface TransformEditorContainerProps extends TransformEditorProps {\n  index?: number;\n  isCollapsed: boolean;\n  onCollapse: (collapsed: boolean) => void;\n  onDelete: () => void;\n}\n\nexport function TransformEditorContainer({\n  index,\n  value,\n  isCollapsed,\n  onChange,\n  onCollapse,\n  onDelete,\n  ...props\n}: TransformEditorContainerProps): ReactElement {\n  function handleTransformDisable(): void {\n    onChange({ ...value, spec: { ...value.spec, disabled: !value.spec?.disabled } } as Transform);\n  }\n\n  return (\n    <Stack {...props}>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        borderBottom={1}\n        borderColor={(theme) => theme.palette.divider}\n        justifyContent=\"space-between\"\n        gap={4}\n      >\n        <Stack direction=\"row\" gap={1}>\n          <IconButton data-testid={`transform-toggle#${index}`} size=\"small\" onClick={() => onCollapse(!isCollapsed)}>\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\" sx={{ textTransform: 'none' }}>\n            {value.kind ? (\n              <span>\n                <strong>{TRANSFORM_TEXT[value.kind]}</strong>\n              </span>\n            ) : (\n              <strong>Select a transformation kind</strong>\n            )}\n          </Typography>\n        </Stack>\n\n        <Stack direction=\"row\" gap={1}>\n          {isCollapsed && (\n            <>\n              <Tooltip\n                title={value.spec?.disabled ? 'Enable transformation' : 'Disable transformation'}\n                placement=\"top\"\n              >\n                <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={handleTransformDisable}>\n                  {value.spec?.disabled ? <EyeOffIcon /> : <EyeIcon />}\n                </IconButton>\n              </Tooltip>\n              <Divider flexItem orientation=\"vertical\" variant=\"middle\" />\n            </>\n          )}\n          <Tooltip title=\"Remove transformation\" placement=\"top\">\n            <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete}>\n              <DeleteIcon />\n            </IconButton>\n          </Tooltip>\n        </Stack>\n      </Stack>\n      {!isCollapsed && <TransformEditor value={value} onChange={onChange} />}\n    </Stack>\n  );\n}\n"],"names":["Divider","IconButton","Stack","Tooltip","Typography","ChevronDown","ChevronRight","DeleteIcon","EyeOffIcon","EyeIcon","TRANSFORM_TEXT","TransformEditor","TransformEditorContainer","index","value","isCollapsed","onChange","onCollapse","onDelete","props","handleTransformDisable","spec","disabled","direction","alignItems","borderBottom","borderColor","theme","palette","divider","justifyContent","gap","data-testid","size","onClick","variant","component","sx","textTransform","kind","span","strong","title","placement","marginLeft","flexItem","orientation"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAgB;AAChF,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,aAAa,6BAA6B;AAIjD,SAASC,cAAc,QAAQ,oBAAW;AAE1C,SAASC,eAAe,QAAQ,uBAAoB;AASpD,OAAO,SAASC,yBAAyB,EACvCC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACR,GAAGC,OAC2B;IAC9B,SAASC;QACPJ,SAAS;YAAE,GAAGF,KAAK;YAAEO,MAAM;gBAAE,GAAGP,MAAMO,IAAI;gBAAEC,UAAU,CAACR,MAAMO,IAAI,EAAEC;YAAS;QAAE;IAChF;IAEA,qBACE,MAACpB;QAAO,GAAGiB,KAAK;;0BACd,MAACjB;gBACCqB,WAAU;gBACVC,YAAW;gBACXC,cAAc;gBACdC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAC7CC,gBAAe;gBACfC,KAAK;;kCAEL,MAAC7B;wBAAMqB,WAAU;wBAAMQ,KAAK;;0CAC1B,KAAC9B;gCAAW+B,eAAa,CAAC,iBAAiB,EAAEnB,OAAO;gCAAEoB,MAAK;gCAAQC,SAAS,IAAMjB,WAAW,CAACF;0CAC3FA,4BAAc,KAACT,kCAAkB,KAACD;;0CAErC,KAACD;gCAAW+B,SAAQ;gCAAWC,WAAU;gCAAKC,IAAI;oCAAEC,eAAe;gCAAO;0CACvExB,MAAMyB,IAAI,iBACT,KAACC;8CACC,cAAA,KAACC;kDAAQ/B,cAAc,CAACI,MAAMyB,IAAI,CAAC;;mDAGrC,KAACE;8CAAO;;;;;kCAKd,MAACvC;wBAAMqB,WAAU;wBAAMQ,KAAK;;4BACzBhB,6BACC;;kDACE,KAACZ;wCACCuC,OAAO5B,MAAMO,IAAI,EAAEC,WAAW,0BAA0B;wCACxDqB,WAAU;kDAEV,cAAA,KAAC1C;4CAAWgC,MAAK;4CAAQI,IAAI;gDAAEO,YAAY;4CAAO;4CAAGV,SAASd;sDAC3DN,MAAMO,IAAI,EAAEC,yBAAW,KAACd,gCAAgB,KAACC;;;kDAG9C,KAACT;wCAAQ6C,QAAQ;wCAACC,aAAY;wCAAWX,SAAQ;;;;0CAGrD,KAAChC;gCAAQuC,OAAM;gCAAwBC,WAAU;0CAC/C,cAAA,KAAC1C;oCAAWgC,MAAK;oCAAQI,IAAI;wCAAEO,YAAY;oCAAO;oCAAGV,SAAShB;8CAC5D,cAAA,KAACX;;;;;;;YAKR,CAACQ,6BAAe,KAACJ;gBAAgBG,OAAOA;gBAAOE,UAAUA;;;;AAGhE"}
+{"version":3,"sources":["../../src/TransformsEditor/TransformEditorContainer.tsx"],"sourcesContent":["// Copyright 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 { Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport EyeOffIcon from 'mdi-material-ui/EyeOffOutline';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport type { ReactElement } from 'react';\n\nimport type { Transform } from '../model';\nimport { TRANSFORM_TEXT } from '../model';\nimport type { TransformEditorProps } from './TransformEditor';\nimport { TransformEditor } from './TransformEditor';\n\nexport interface TransformEditorContainerProps extends TransformEditorProps {\n  index?: number;\n  isCollapsed: boolean;\n  onCollapse: (collapsed: boolean) => void;\n  onDelete: () => void;\n}\n\nexport function TransformEditorContainer({\n  index,\n  value,\n  isCollapsed,\n  onChange,\n  onCollapse,\n  onDelete,\n  ...props\n}: TransformEditorContainerProps): ReactElement {\n  function handleTransformDisable(): void {\n    onChange({ ...value, spec: { ...value.spec, disabled: !value.spec?.disabled } } as Transform);\n  }\n\n  return (\n    <Stack {...props}>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        borderBottom={1}\n        borderColor={(theme) => theme.palette.divider}\n        justifyContent=\"space-between\"\n        gap={4}\n      >\n        <Stack direction=\"row\" gap={1}>\n          <IconButton data-testid={`transform-toggle#${index}`} size=\"small\" onClick={() => onCollapse(!isCollapsed)}>\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\" sx={{ textTransform: 'none' }}>\n            {value.kind ? (\n              <span>\n                <strong>{TRANSFORM_TEXT[value.kind]}</strong>\n              </span>\n            ) : (\n              <strong>Select a transformation kind</strong>\n            )}\n          </Typography>\n        </Stack>\n\n        <Stack direction=\"row\" gap={1}>\n          {isCollapsed && (\n            <>\n              <Tooltip\n                title={value.spec?.disabled ? 'Enable transformation' : 'Disable transformation'}\n                placement=\"top\"\n              >\n                <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={handleTransformDisable}>\n                  {value.spec?.disabled ? <EyeOffIcon /> : <EyeIcon />}\n                </IconButton>\n              </Tooltip>\n              <Divider flexItem orientation=\"vertical\" variant=\"middle\" />\n            </>\n          )}\n          <Tooltip title=\"Remove transformation\" placement=\"top\">\n            <IconButton size=\"small\" sx={{ marginLeft: 'auto' }} onClick={onDelete}>\n              <DeleteIcon />\n            </IconButton>\n          </Tooltip>\n        </Stack>\n      </Stack>\n      {!isCollapsed && <TransformEditor value={value} onChange={onChange} />}\n    </Stack>\n  );\n}\n"],"names":["Divider","IconButton","Stack","Tooltip","Typography","ChevronDown","ChevronRight","DeleteIcon","EyeOffIcon","EyeIcon","TRANSFORM_TEXT","TransformEditor"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAgB;AAChF,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,aAAa,6BAA6B;AAIjD,SAASC,cAAc,QAAQ,oBAAW;AAE1C,SAASC,eAAe,QAAQ,uBAAoB;AASpD,OAAO"}