This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch fix/console-noise-cleanup
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/fix/console-noise-cleanup by
this push:
new 9f8d36aa889 fix(frontend): address ECharts init warning and
first-child SSR warnings
9f8d36aa889 is described below
commit 9f8d36aa889a94d5cbbea734881e41a84aed1b74
Author: Evan Rusackas <[email protected]>
AuthorDate: Tue Feb 10 23:31:30 2026 -0800
fix(frontend): address ECharts init warning and first-child SSR warnings
- Pass width/height to ECharts init() to prevent "Can't get DOM width
or height" warning when DOM element dimensions aren't yet available
- Replace :first-child with :first-of-type in CSS to address Emotion's
SSR safety warning across 13 files
Co-Authored-By: Claude Opus 4.5 <[email protected]>
---
.../plugins/plugin-chart-echarts/src/components/Echart.tsx | 4 +++-
superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx | 2 +-
superset-frontend/src/components/Modal/StandardModal.tsx | 2 +-
.../src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx | 4 ++--
superset-frontend/src/dashboard/components/DashboardGrid.tsx | 2 +-
.../src/dashboard/components/SliceHeaderControls/index.tsx | 2 +-
.../src/dashboard/components/gridComponents/Column/Column.tsx | 4 ++--
superset-frontend/src/dashboard/components/gridComponents/Row/Row.tsx | 4 ++--
.../nativeFilters/FilterBar/FilterControls/FilterDivider.tsx | 2 +-
.../components/controls/AnnotationLayerControl/AnnotationLayer.tsx | 2 +-
.../explore/components/controls/CurrencyControl/CurrencyControl.tsx | 4 ++--
.../src/features/alerts/components/NotificationMethod.tsx | 2 +-
.../src/features/reports/ReportModal/HeaderReportDropdown/index.tsx | 2 +-
superset-frontend/src/pages/AlertReportList/index.tsx | 2 +-
14 files changed, 20 insertions(+), 18 deletions(-)
diff --git
a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
index c62f5535a30..8a518d0b41f 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
@@ -173,7 +173,9 @@ function Echart(
}
if (!divRef.current) return;
if (!chartRef.current) {
- chartRef.current = init(divRef.current, null, { locale });
+ // Pass width and height to init to avoid "Can't get DOM width or
height" warning
+ // since the DOM element may not have its dimensions yet when init is
called
+ chartRef.current = init(divRef.current, null, { locale, width, height
});
}
// did mount
handleSizeChange({ width, height });
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 08f808bcf23..2e313615f50 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -799,7 +799,7 @@ export default function TableChart<D extends DataRecord =
DataRecord>(
th {
border-right: 1px solid ${theme.colorSplit};
}
- th:first-child {
+ th:first-of-type {
border-left: none;
}
th:last-child {
diff --git a/superset-frontend/src/components/Modal/StandardModal.tsx
b/superset-frontend/src/components/Modal/StandardModal.tsx
index 97e4f8d638e..5e7d33c5715 100644
--- a/superset-frontend/src/components/Modal/StandardModal.tsx
+++ b/superset-frontend/src/components/Modal/StandardModal.tsx
@@ -76,7 +76,7 @@ const StyledModal = styled(Modal)`
.ant-collapse {
border: none;
- > .ant-collapse-item:first-child {
+ > .ant-collapse-item:first-of-type {
border-top: none;
}
diff --git
a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index e9a04342264..ce4d55ca2ba 100644
---
a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++
b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -257,7 +257,7 @@ const DashboardContentWrapper = styled.div`
}
}
- & > .empty-droptarget:first-child:not(.empty-droptarget--full) {
+ & > .empty-droptarget:first-of-type:not(.empty-droptarget--full) {
height: ${theme.sizeUnit * 4}px;
top: 0;
}
@@ -303,7 +303,7 @@ const StyledDashboardContent = styled.div<{
`}
/* this is the ParentSize wrapper */
- & > div:first-child {
+ & > div:first-of-type {
height: 100% !important;
}
}
diff --git a/superset-frontend/src/dashboard/components/DashboardGrid.tsx
b/superset-frontend/src/dashboard/components/DashboardGrid.tsx
index 5dde8ab06ab..b200b745c7b 100644
--- a/superset-frontend/src/dashboard/components/DashboardGrid.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardGrid.tsx
@@ -101,7 +101,7 @@ const GridContent = styled.div<{ editMode?: boolean }>`
}
}
- & > .empty-droptarget:first-child {
+ & > .empty-droptarget:first-of-type {
height: ${theme.sizeUnit * 4}px;
margin-top: ${theme.sizeUnit * -4}px;
}
diff --git
a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index 6e73bec6f2b..450abd5adaa 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -144,7 +144,7 @@ type SliceHeaderControlsPropsWithRouter =
SliceHeaderControlsProps &
RouteComponentProps;
const dropdownIconsStyles = css`
- &&.anticon > .anticon:first-child {
+ &&.anticon > .anticon:first-of-type {
margin-right: 0;
vertical-align: 0;
}
diff --git
a/superset-frontend/src/dashboard/components/gridComponents/Column/Column.tsx
b/superset-frontend/src/dashboard/components/gridComponents/Column/Column.tsx
index cf934e6e84a..3e47ceed884 100644
---
a/superset-frontend/src/dashboard/components/gridComponents/Column/Column.tsx
+++
b/superset-frontend/src/dashboard/components/gridComponents/Column/Column.tsx
@@ -101,11 +101,11 @@ const ColumnStyles = styled.div<{ editMode: boolean }>`
&.droptarget-edge {
position: absolute;
z-index: ${EMPTY_CONTAINER_Z_INDEX};
- &:first-child {
+ &:first-of-type {
inset-block-start: 0;
}
}
- &:first-child:not(.droptarget-edge) {
+ &:first-of-type:not(.droptarget-edge) {
position: absolute;
z-index: ${EMPTY_CONTAINER_Z_INDEX};
width: 100%;
diff --git
a/superset-frontend/src/dashboard/components/gridComponents/Row/Row.tsx
b/superset-frontend/src/dashboard/components/gridComponents/Row/Row.tsx
index 5651712e29d..7c9cd790b96 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Row/Row.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Row/Row.tsx
@@ -100,7 +100,7 @@ const GridRow = styled.div<{ editMode: boolean }>`
&:not(:last-child) {
width: ${theme.sizeUnit * 4}px;
}
- &:first-child:not(.droptarget-side) {
+ &:first-of-type:not(.droptarget-side) {
z-index: ${EMPTY_CONTAINER_Z_INDEX};
position: absolute;
width: 100%;
@@ -111,7 +111,7 @@ const GridRow = styled.div<{ editMode: boolean }>`
z-index: ${EMPTY_CONTAINER_Z_INDEX};
position: absolute;
width: ${theme.sizeUnit * 4}px;
- &:first-child {
+ &:first-of-type {
inset-inline-start: 0;
}
}
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
index 52ac346264d..46c359c62a7 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
@@ -45,7 +45,7 @@ const HorizontalDivider = ({ title, description }:
FilterDividerProps) => {
border-left: 1px solid ${theme.colorSplit};
padding-left: ${4 * theme.sizeUnit}px;
- .filter-item-wrapper:first-child & {
+ .filter-item-wrapper:first-of-type & {
border-left: none;
padding-left: 0;
}
diff --git
a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.tsx
b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.tsx
index 9a8613cb96d..67c529a0d31 100644
---
a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.tsx
+++
b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.tsx
@@ -130,7 +130,7 @@ interface AnnotationLayerState {
const AUTOMATIC_COLOR = '';
const NotFoundContentWrapper = styled.div`
- && > div:first-child {
+ && > div:first-of-type {
padding-left: 0;
padding-right: 0;
}
diff --git
a/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx
b/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx
index 8ec68904440..a7dc8117963 100644
---
a/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx
+++
b/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx
@@ -41,7 +41,7 @@ const CurrencyControlContainer = styled.div`
display: flex;
align-items: center;
- & > :first-child {
+ & > :first-of-type {
margin-right: ${theme.sizeUnit * 4}px;
min-width: 0;
flex: 1;
@@ -141,7 +141,7 @@ export const CurrencyControl = ({
<ControlHeader {...props} />
<CurrencyControlContainer
css={css`
- & > :first-child {
+ & > :first-of-type {
${symbolSelectAdditionalStyles};
}
& > :nth-child(2) {
diff --git
a/superset-frontend/src/features/alerts/components/NotificationMethod.tsx
b/superset-frontend/src/features/alerts/components/NotificationMethod.tsx
index fdf035d6a07..7c714ba4195 100644
--- a/superset-frontend/src/features/alerts/components/NotificationMethod.tsx
+++ b/superset-frontend/src/features/alerts/components/NotificationMethod.tsx
@@ -100,7 +100,7 @@ const StyledNotificationMethod = styled.div`
margin-left: ${theme.sizeUnit * 4}px;
}
- .ghost-button:first-child[style*='none'] + .ghost-button {
+ .ghost-button:first-of-type[style*='none'] + .ghost-button {
margin-left: 0px; /* Remove margin when the first button is hidden */
}
`}
diff --git
a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
index b017033f76a..09fd90e4033 100644
---
a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
+++
b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
@@ -50,7 +50,7 @@ const StyledDropdownItemWithIcon = styled.div`
flex-direction: row;
justify-content: space-between;
align-items: center;
- > *:first-child {
+ > *:first-of-type {
margin-right: ${({ theme }) => theme.sizeUnit}px;
}
`;
diff --git a/superset-frontend/src/pages/AlertReportList/index.tsx
b/superset-frontend/src/pages/AlertReportList/index.tsx
index 274e4e318a1..0d3ca8d7050 100644
--- a/superset-frontend/src/pages/AlertReportList/index.tsx
+++ b/superset-frontend/src/pages/AlertReportList/index.tsx
@@ -102,7 +102,7 @@ const StyledHeaderWithIcon = styled.div`
flex-direction: row;
justify-content: space-between;
align-items: center;
- > *:first-child {
+ > *:first-of-type {
margin-right: ${({ theme }) => theme.sizeUnit}px;
}
`;
