You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by mi...@apache.org on 2026/04/13 19:05:21 UTC
(superset) 16/45: fix(explore): add left-indentation to control panel hierarchy (#39177)
This is an automated email from the ASF dual-hosted git repository.
michaelsmolina pushed a commit to branch 6.1
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 04ca466c7732bf5d5dc68062bdef0d3b790801a9
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Wed Apr 8 12:25:36 2026 -0700
fix(explore): add left-indentation to control panel hierarchy (#39177)
Co-authored-by: Claude Opus 4.6 <no...@anthropic.com>
(cherry picked from commit a64609f4f39b0973bf21d17021881400c57a0975)
---
.../src/components/ControlSubSectionHeader.tsx | 4 ++++
.../explore/components/ControlPanelsContainer.tsx | 27 +++++++++++++++++++---
2 files changed, 28 insertions(+), 3 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
index 79be75e55dd..0022dfde3a4 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
@@ -21,7 +21,11 @@ import { styled, css } from '@apache-superset/core/theme';
export const ControlSubSectionHeader = styled.div`
${({ theme }) => css`
font-weight: ${theme.fontWeightStrong};
+ margin-top: ${theme.sizeUnit * 3}px;
margin-bottom: ${theme.sizeUnit}px;
font-size: ${theme.fontSizeSM}px;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: ${theme.colorTextSecondary};
`}
`;
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 0a1c79ab9fe..fa7719bd521 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -648,6 +648,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
</span>
);
+ let isInSubSection = false;
const PanelChildren = (
<>
<StashFormDataContainer
@@ -665,8 +666,19 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
.filter(Boolean)}
/>
{isVisible && (
- <>
+ <div style={{ paddingLeft: theme.sizeUnit * 2 }}>
{section.controlSetRows.map((controlSets, i) => {
+ // Detect sub-section header rows (React elements with no name prop)
+ const isSubSectionHeaderRow = controlSets.some(
+ item =>
+ isValidElement(item) &&
+ !(item as React.ReactElement<Record<string, unknown>>).props
+ ?.name,
+ );
+ if (isSubSectionHeaderRow) {
+ isInSubSection = true;
+ }
+
const renderedControls = controlSets
.map(controlItem => {
if (!controlItem) {
@@ -715,14 +727,23 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
if (renderedControls.length === 0) {
return null;
}
- return (
+ // Indent controls within sub-sections for visual hierarchy
+ const paddingLeft =
+ isInSubSection && !isSubSectionHeaderRow
+ ? theme.sizeUnit * 3
+ : 0;
+ return paddingLeft ? (
+ <div key={`controlsetrow-${i}`} style={{ paddingLeft }}>
+ <ControlRow controls={renderedControls} />
+ </div>
+ ) : (
<ControlRow
key={`controlsetrow-${i}`}
controls={renderedControls}
/>
);
})}
- </>
+ </div>
)}
</>
);