You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ms...@apache.org on 2026/03/09 14:33:32 UTC
(superset) 01/01: feat(matrixify): Switch control for feature
This is an automated email from the ASF dual-hosted git repository.
msyavuz pushed a commit to branch msyavuz/feat/matrixify-controls-revamp
in repository https://gitbox.apache.org/repos/asf/superset.git
commit cbcbbc55192666abb0e1c844d02cfecbb63d604f
Author: Mehmet Salih Yavuz <sa...@proton.me>
AuthorDate: Mon Mar 9 17:32:55 2026 +0300
feat(matrixify): Switch control for feature
---
.../src/sections/matrixify.tsx | 11 ++++
.../explore/components/controls/SwitchControl.tsx | 63 ++++++++++++++++++++++
.../src/explore/components/controls/index.ts | 2 +
.../src/explore/controlPanels/sections.tsx | 26 ++++++++-
4 files changed, 100 insertions(+), 2 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/sections/matrixify.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/sections/matrixify.tsx
index dde1f0431db..354347fa255 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/matrixify.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/sections/matrixify.tsx
@@ -23,6 +23,17 @@ export const matrixifyEnableSection: ControlPanelSectionConfig = {
label: t('Matrixify'),
expanded: true,
controlSetRows: [
+ [
+ {
+ name: 'matrixify_enable',
+ config: {
+ type: 'SwitchControl',
+ label: t('Enable matrixify'),
+ default: false,
+ renderTrigger: true,
+ },
+ },
+ ],
[
{
name: 'matrixify_enable_horizontal_layout',
diff --git a/superset-frontend/src/explore/components/controls/SwitchControl.tsx b/superset-frontend/src/explore/components/controls/SwitchControl.tsx
new file mode 100644
index 00000000000..5e8eeb44ac7
--- /dev/null
+++ b/superset-frontend/src/explore/components/controls/SwitchControl.tsx
@@ -0,0 +1,63 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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 { type ReactNode } from 'react';
+import { css } from '@apache-superset/core/theme';
+import { Switch } from '@superset-ui/core/components';
+import ControlHeader from '../ControlHeader';
+
+interface SwitchControlProps {
+ value?: boolean;
+ label?: ReactNode;
+ description?: ReactNode;
+ hovered?: boolean;
+ onChange?: (value: boolean) => void;
+ validationErrors?: string[];
+}
+
+export default function SwitchControl({
+ value = false,
+ onChange,
+ ...props
+}: SwitchControlProps) {
+ const handleChange = (checked: boolean) => {
+ onChange?.(checked);
+ };
+
+ const switchNode = <Switch size="small" checked={!!value} onChange={handleChange} />;
+
+ if (props.label) {
+ return (
+ <div
+ css={css`
+ .ControlHeader .pull-left {
+ display: flex;
+ align-items: center;
+ }
+ `}
+ >
+ <ControlHeader
+ {...props}
+ leftNode={switchNode}
+ onClick={() => handleChange(!value)}
+ />
+ </div>
+ );
+ }
+ return switchNode;
+}
diff --git a/superset-frontend/src/explore/components/controls/index.ts b/superset-frontend/src/explore/components/controls/index.ts
index 326da43ce84..11bd39f87b3 100644
--- a/superset-frontend/src/explore/components/controls/index.ts
+++ b/superset-frontend/src/explore/components/controls/index.ts
@@ -60,6 +60,7 @@ import TimeRangeControl from './TimeRangeControl';
import ColorBreakpointsControl from './ColorBreakpointsControl';
import MatrixifyDimensionControl from './MatrixifyDimensionControl';
import JSEditorControl from './JSEditorControl';
+import SwitchControl from './SwitchControl';
const extensionsRegistry = getExtensionsRegistry();
const DateFilterControlExtension = extensionsRegistry.get(
@@ -109,6 +110,7 @@ const controlMap = {
NumberControl,
TimeRangeControl,
MatrixifyDimensionControl,
+ SwitchControl,
...sharedControlComponents,
};
export default controlMap;
diff --git a/superset-frontend/src/explore/controlPanels/sections.tsx b/superset-frontend/src/explore/controlPanels/sections.tsx
index 816d3e18604..74f344af380 100644
--- a/superset-frontend/src/explore/controlPanels/sections.tsx
+++ b/superset-frontend/src/explore/controlPanels/sections.tsx
@@ -312,6 +312,8 @@ function buildMatrixifySection(
: t('Vertical layout (rows)'),
expanded: true,
tabOverride: 'matrixify',
+ visibility: ({ controls }) =>
+ controls?.matrixify_enable?.value === true,
controlSetRows: baseControls,
};
}
@@ -319,13 +321,33 @@ function buildMatrixifySection(
export const matrixifyRows = buildMatrixifySection('rows');
export const matrixifyColumns = buildMatrixifySection('columns');
+export const matrixifyEnableSection: ControlPanelSectionConfig = {
+ label: t('Matrixify'),
+ expanded: true,
+ tabOverride: 'matrixify',
+ controlSetRows: [
+ [
+ {
+ name: 'matrixify_enable',
+ config: {
+ type: 'SwitchControl',
+ label: t('Enable matrixify'),
+ default: false,
+ renderTrigger: true,
+ },
+ },
+ ],
+ ],
+};
+
export const matrixifyCells: ControlPanelSectionConfig = {
label: t('Cell layout & styling'),
expanded: true,
tabOverride: 'matrixify',
visibility: ({ controls }) =>
- controls?.matrixify_enable_vertical_layout?.value === true ||
- controls?.matrixify_enable_horizontal_layout?.value === true,
+ controls?.matrixify_enable?.value === true &&
+ (controls?.matrixify_enable_vertical_layout?.value === true ||
+ controls?.matrixify_enable_horizontal_layout?.value === true),
controlSetRows: [
['matrixify_row_height', 'matrixify_fit_columns_dynamically'],
['matrixify_charts_per_row'],