From e38b3d65da1aa12182d7b57c20a2aa6ab1e0cf5e Mon Sep 17 00:00:00 2001 From: mchen1107 Date: Fri, 27 Feb 2026 16:22:46 -0800 Subject: [PATCH 1/8] refactor: move DataProvider to app level with deferred loading --- src/app/App.tsx | 37 ++++++++++++++++++++++++++++++++----- src/pages/DataPage.tsx | 26 ++++++++++---------------- 2 files changed, 42 insertions(+), 21 deletions(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index d4469d67..2325343a 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import PageFooter from '@widgets/PageFooter'; import PageNavBar from '@widgets/PageNavBar'; @@ -9,12 +11,37 @@ import './index.css'; function App() { return ( - - - - - + + + + + + + ); } +const DeferredDataProviders: React.FC<{ children: React.ReactNode }> = ({ children }) => { + const [PageParamsProvider, setPageParamsProvider] = React.useState< + React.ComponentType<{ children: React.ReactNode }> | undefined + >(undefined); + const [DataProvider, setDataProvider] = React.useState< + React.ComponentType<{ children: React.ReactNode }> | undefined + >(undefined); + + React.useEffect(() => { + import('@features/params/PageParamsProvider').then((m) => + setPageParamsProvider(() => m.default), + ); + import('@features/data/context/DataProvider').then((m) => setDataProvider(() => m.default)); + }, []); + if (!PageParamsProvider || !DataProvider) return null; + + return ( + + {children} + + ); +}; + export default App; diff --git a/src/pages/DataPage.tsx b/src/pages/DataPage.tsx index ee31a8dd..5706a307 100644 --- a/src/pages/DataPage.tsx +++ b/src/pages/DataPage.tsx @@ -5,29 +5,23 @@ import Loading from '@widgets/Loading'; import HoverCardProvider from '@features/layers/hovercard/HoverCardProvider'; -const PageParamsProvider = React.lazy(() => import('@features/params/PageParamsProvider')); -const DataProvider = React.lazy(() => import('@features/data/context/DataProvider')); const DataPageBody = React.lazy(() => import('./DataPageBody')); const OptionsPanel = React.lazy(() => import('@widgets/controls/OptionsPanel')); const ViewModal = React.lazy(() => import('@features/layers/modal/ViewModal')); const DataPage: React.FC = () => { - /* DataProvider and many other data components have more lines of code so they are loaded lazily */ + /* Many data components have more lines of code so they are loaded lazily */ return ( }> - - - {/* HoverCardProvider is re-declared so it has access to page parameters, there may be a better way to organize it */} - -
- - - -
- - - - + + {/* HoverCardProvider is re-declared so it has access to page parameters, there may be a better way to organize it */} +
+ + + +
+ + ); }; From 77d8963aefe45741d2faec26baf1a935dbc9f247 Mon Sep 17 00:00:00 2001 From: Xumeiqi Chen <105175273+mchen11077@users.noreply.github.com> Date: Fri, 6 Mar 2026 12:32:07 -0800 Subject: [PATCH 2/8] Update src/app/App.tsx Co-authored-by: Conrad Nied --- src/app/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index 2325343a..f816585d 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -35,7 +35,7 @@ const DeferredDataProviders: React.FC<{ children: React.ReactNode }> = ({ childr ); import('@features/data/context/DataProvider').then((m) => setDataProvider(() => m.default)); }, []); - if (!PageParamsProvider || !DataProvider) return null; + if (!PageParamsProvider || !DataProvider) return children; return ( From 216cac195155a0e9005c3d715886596f0b29dc53 Mon Sep 17 00:00:00 2001 From: mchen1107 Date: Mon, 9 Mar 2026 13:04:13 -0700 Subject: [PATCH 3/8] Remove duplicate HoverCardProvider from DataPage --- src/features/params/ui/Selector.tsx | 2 +- src/pages/DataPage.tsx | 17 +++++-------- src/widgets/controls/HeaderControls.tsx | 24 +++++++++++++++++++ .../controls/selectors/ViewSelector.tsx | 1 + 4 files changed, 32 insertions(+), 12 deletions(-) create mode 100644 src/widgets/controls/HeaderControls.tsx diff --git a/src/features/params/ui/Selector.tsx b/src/features/params/ui/Selector.tsx index 3a159a2f..93fce7c7 100644 --- a/src/features/params/ui/Selector.tsx +++ b/src/features/params/ui/Selector.tsx @@ -133,7 +133,7 @@ const OptionsContainer: React.FC> display: 'flex', flexWrap: 'wrap', gap: '0.25em', - marginLeft: hasSelectorLabel ? '1em' : 'none', + marginLeft: 0, }} > {children} diff --git a/src/pages/DataPage.tsx b/src/pages/DataPage.tsx index 5706a307..89c5837d 100644 --- a/src/pages/DataPage.tsx +++ b/src/pages/DataPage.tsx @@ -3,8 +3,6 @@ import React, { Suspense } from 'react'; import DetailsPanel from '@widgets/details/DetailsPanel'; import Loading from '@widgets/Loading'; -import HoverCardProvider from '@features/layers/hovercard/HoverCardProvider'; - const DataPageBody = React.lazy(() => import('./DataPageBody')); const OptionsPanel = React.lazy(() => import('@widgets/controls/OptionsPanel')); const ViewModal = React.lazy(() => import('@features/layers/modal/ViewModal')); @@ -13,15 +11,12 @@ const DataPage: React.FC = () => { /* Many data components have more lines of code so they are loaded lazily */ return ( }> - - {/* HoverCardProvider is re-declared so it has access to page parameters, there may be a better way to organize it */} -
- - - -
- - +
+ + + +
+ ); }; diff --git a/src/widgets/controls/HeaderControls.tsx b/src/widgets/controls/HeaderControls.tsx new file mode 100644 index 00000000..d9eb156f --- /dev/null +++ b/src/widgets/controls/HeaderControls.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import SecondarySortBySelector from '@features/transforms/sorting/SecondarySortBySelector'; +import SortBySelector from '@features/transforms/sorting/SortBySelector'; +import SortDirectionSelector from '@features/transforms/sorting/SortDirectionSelector'; + +import ViewSelector from './selectors/ViewSelector'; + +const HeaderControls: React.FC = () => { + return ( +
+
+ +
+
+ + + +
+
+ ); +}; + +export default HeaderControls; diff --git a/src/widgets/controls/selectors/ViewSelector.tsx b/src/widgets/controls/selectors/ViewSelector.tsx index f67f7934..7c86519b 100644 --- a/src/widgets/controls/selectors/ViewSelector.tsx +++ b/src/widgets/controls/selectors/ViewSelector.tsx @@ -11,6 +11,7 @@ const ViewSelector: React.FC = () => { return ( } options={Object.values(View)} onChange={(view: View) => updatePageParams({ view })} From 99f41452ee7eeb5aed8c4105527482c5a9598cc0 Mon Sep 17 00:00:00 2001 From: mchen1107 Date: Tue, 10 Mar 2026 14:27:53 -0700 Subject: [PATCH 4/8] fix --- src/features/params/ui/Selector.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/features/params/ui/Selector.tsx b/src/features/params/ui/Selector.tsx index 93fce7c7..3dcc96c3 100644 --- a/src/features/params/ui/Selector.tsx +++ b/src/features/params/ui/Selector.tsx @@ -119,7 +119,6 @@ type OptionsContainerProps = { const OptionsContainer: React.FC> = ({ children, containerRef, - hasSelectorLabel, isExpanded, }) => { const { display } = useSelectorDisplay(); From d7705f432c69c6d50740796899ab7c96d4ac2355 Mon Sep 17 00:00:00 2001 From: mchen1107 Date: Fri, 27 Feb 2026 16:22:46 -0800 Subject: [PATCH 5/8] refactor: move DataProvider to app level with deferred loading --- src/pages/DataPage.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/pages/DataPage.tsx b/src/pages/DataPage.tsx index 89c5837d..4325ab99 100644 --- a/src/pages/DataPage.tsx +++ b/src/pages/DataPage.tsx @@ -3,6 +3,11 @@ import React, { Suspense } from 'react'; import DetailsPanel from '@widgets/details/DetailsPanel'; import Loading from '@widgets/Loading'; +<<<<<<< HEAD +======= +import HoverCardProvider from '@features/layers/hovercard/HoverCardProvider'; + +>>>>>>> 8cfeb22 (refactor: move DataProvider to app level with deferred loading) const DataPageBody = React.lazy(() => import('./DataPageBody')); const OptionsPanel = React.lazy(() => import('@widgets/controls/OptionsPanel')); const ViewModal = React.lazy(() => import('@features/layers/modal/ViewModal')); @@ -11,12 +16,24 @@ const DataPage: React.FC = () => { /* Many data components have more lines of code so they are loaded lazily */ return ( }> +<<<<<<< HEAD
+======= + + {/* HoverCardProvider is re-declared so it has access to page parameters, there may be a better way to organize it */} +
+ + + +
+ + +>>>>>>> 8cfeb22 (refactor: move DataProvider to app level with deferred loading) ); }; From 482c12fc14299011a8748a962acaab7563a52afd Mon Sep 17 00:00:00 2001 From: mchen1107 Date: Tue, 10 Mar 2026 15:06:59 -0700 Subject: [PATCH 6/8] remove fix/480 changes from feat/481 --- src/features/params/ui/Selector.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/features/params/ui/Selector.tsx b/src/features/params/ui/Selector.tsx index 3dcc96c3..93fce7c7 100644 --- a/src/features/params/ui/Selector.tsx +++ b/src/features/params/ui/Selector.tsx @@ -119,6 +119,7 @@ type OptionsContainerProps = { const OptionsContainer: React.FC> = ({ children, containerRef, + hasSelectorLabel, isExpanded, }) => { const { display } = useSelectorDisplay(); From ef78f3f2e3bed682da9dc45feedfa85cbaa315fa Mon Sep 17 00:00:00 2001 From: mchen1107 Date: Tue, 10 Mar 2026 15:14:35 -0700 Subject: [PATCH 7/8] revert unintended UI changes --- src/features/params/ui/Selector.tsx | 2 +- src/widgets/controls/HeaderControls.tsx | 24 ------------------- .../controls/selectors/ViewSelector.tsx | 1 - 3 files changed, 1 insertion(+), 26 deletions(-) delete mode 100644 src/widgets/controls/HeaderControls.tsx diff --git a/src/features/params/ui/Selector.tsx b/src/features/params/ui/Selector.tsx index 93fce7c7..3a159a2f 100644 --- a/src/features/params/ui/Selector.tsx +++ b/src/features/params/ui/Selector.tsx @@ -133,7 +133,7 @@ const OptionsContainer: React.FC> display: 'flex', flexWrap: 'wrap', gap: '0.25em', - marginLeft: 0, + marginLeft: hasSelectorLabel ? '1em' : 'none', }} > {children} diff --git a/src/widgets/controls/HeaderControls.tsx b/src/widgets/controls/HeaderControls.tsx deleted file mode 100644 index d9eb156f..00000000 --- a/src/widgets/controls/HeaderControls.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -import SecondarySortBySelector from '@features/transforms/sorting/SecondarySortBySelector'; -import SortBySelector from '@features/transforms/sorting/SortBySelector'; -import SortDirectionSelector from '@features/transforms/sorting/SortDirectionSelector'; - -import ViewSelector from './selectors/ViewSelector'; - -const HeaderControls: React.FC = () => { - return ( -
-
- -
-
- - - -
-
- ); -}; - -export default HeaderControls; diff --git a/src/widgets/controls/selectors/ViewSelector.tsx b/src/widgets/controls/selectors/ViewSelector.tsx index 7c86519b..f67f7934 100644 --- a/src/widgets/controls/selectors/ViewSelector.tsx +++ b/src/widgets/controls/selectors/ViewSelector.tsx @@ -11,7 +11,6 @@ const ViewSelector: React.FC = () => { return ( } options={Object.values(View)} onChange={(view: View) => updatePageParams({ view })} From 0d2ed924fbf7c690ebc425f703268fc518b58313 Mon Sep 17 00:00:00 2001 From: mchen1107 Date: Tue, 10 Mar 2026 15:20:07 -0700 Subject: [PATCH 8/8] fix conflicts --- src/pages/DataPage.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/pages/DataPage.tsx b/src/pages/DataPage.tsx index 4325ab99..89c5837d 100644 --- a/src/pages/DataPage.tsx +++ b/src/pages/DataPage.tsx @@ -3,11 +3,6 @@ import React, { Suspense } from 'react'; import DetailsPanel from '@widgets/details/DetailsPanel'; import Loading from '@widgets/Loading'; -<<<<<<< HEAD -======= -import HoverCardProvider from '@features/layers/hovercard/HoverCardProvider'; - ->>>>>>> 8cfeb22 (refactor: move DataProvider to app level with deferred loading) const DataPageBody = React.lazy(() => import('./DataPageBody')); const OptionsPanel = React.lazy(() => import('@widgets/controls/OptionsPanel')); const ViewModal = React.lazy(() => import('@features/layers/modal/ViewModal')); @@ -16,24 +11,12 @@ const DataPage: React.FC = () => { /* Many data components have more lines of code so they are loaded lazily */ return ( }> -<<<<<<< HEAD
-======= - - {/* HoverCardProvider is re-declared so it has access to page parameters, there may be a better way to organize it */} -
- - - -
- - ->>>>>>> 8cfeb22 (refactor: move DataProvider to app level with deferred loading) ); };