feat: Adjustable grid density (#2151)

Fixes #885 This adds a user setting for grid density in the theme section which applies to all grids without an explicit density prop. A separate dh.ui PR will allow setting the density per table and is not influenced by the global density setting.
deephaven · Jul 22, 2024 · 6bb11f9 · 6bb11f9
1 parent 7875d03
commit 6bb11f9
Show file tree

Hide file tree

Showing 25 changed files with 278 additions and 123 deletions.
diff --git a/packages/app-utils/src/components/AppBootstrap.tsx b/packages/app-utils/src/components/AppBootstrap.tsx
@@ -1,4 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
+import { Provider } from 'react-redux';
+import { store } from '@deephaven/redux';
 import '@deephaven/components/scss/BaseStyleSheet.scss';
 import { ClientBootstrap } from '@deephaven/jsapi-bootstrap';
 import {
@@ -56,29 +58,34 @@ export function AppBootstrap({
   }, []);
   useBroadcastLoginListener(onLogin, onLogout);
   return (
-    <FontBootstrap fontClassNames={fontClassNames}>
-      <PluginsBootstrap getCorePlugins={getCorePlugins} pluginsUrl={pluginsUrl}>
-        <ThemeBootstrap>
-          <ClientBootstrap
-            serverUrl={serverUrl}
-            options={clientOptions}
-            key={logoutCount}
-          >
-            <RefreshTokenBootstrap>
-              <AuthBootstrap>
-                <ServerConfigBootstrap>
-                  <UserBootstrap>
-                    <ConnectionBootstrap>
-                      <FontsLoaded>{children}</FontsLoaded>
-                    </ConnectionBootstrap>
-                  </UserBootstrap>
-                </ServerConfigBootstrap>
-              </AuthBootstrap>
-            </RefreshTokenBootstrap>
-          </ClientBootstrap>
-        </ThemeBootstrap>
-      </PluginsBootstrap>
-    </FontBootstrap>
+    <Provider store={store}>
+      <FontBootstrap fontClassNames={fontClassNames}>
+        <PluginsBootstrap
+          getCorePlugins={getCorePlugins}
+          pluginsUrl={pluginsUrl}
+        >
+          <ThemeBootstrap>
+            <ClientBootstrap
+              serverUrl={serverUrl}
+              options={clientOptions}
+              key={logoutCount}
+            >
+              <RefreshTokenBootstrap>
+                <AuthBootstrap>
+                  <ServerConfigBootstrap>
+                    <UserBootstrap>
+                      <ConnectionBootstrap>
+                        <FontsLoaded>{children}</FontsLoaded>
+                      </ConnectionBootstrap>
+                    </UserBootstrap>
+                  </ServerConfigBootstrap>
+                </AuthBootstrap>
+              </RefreshTokenBootstrap>
+            </ClientBootstrap>
+          </ThemeBootstrap>
+        </PluginsBootstrap>
+      </FontBootstrap>
+    </Provider>
   );
 }
 

diff --git a/packages/app-utils/src/components/ThemeBootstrap.tsx b/packages/app-utils/src/components/ThemeBootstrap.tsx
@@ -4,6 +4,8 @@ import { MonacoThemeProvider } from '@deephaven/console';
 import { ThemeProvider } from '@deephaven/components';
 import { IrisGridThemeProvider } from '@deephaven/iris-grid';
 import { getThemeDataFromPlugins, PluginsContext } from '@deephaven/plugin';
+import { getSettings } from '@deephaven/redux';
+import { useAppSelector } from '@deephaven/dashboard';
 
 export interface ThemeBootstrapProps {
   children: React.ReactNode;
@@ -21,11 +23,15 @@ export function ThemeBootstrap({ children }: ThemeBootstrapProps): JSX.Element {
     [pluginModules]
   );
 
+  const settings = useAppSelector(getSettings);
+
   return (
     <ThemeProvider themes={themes}>
       <ChartThemeProvider>
         <MonacoThemeProvider>
-          <IrisGridThemeProvider>{children}</IrisGridThemeProvider>
+          <IrisGridThemeProvider density={settings.gridDensity}>
+            {children}
+          </IrisGridThemeProvider>
         </MonacoThemeProvider>
       </ChartThemeProvider>
     </ThemeProvider>

diff --git a/packages/app-utils/src/storage/LocalWorkspaceStorage.ts b/packages/app-utils/src/storage/LocalWorkspaceStorage.ts
@@ -61,6 +61,7 @@ export class LocalWorkspaceStorage implements WorkspaceStorage {
       },
       webgl: true,
       webglEditable: true,
+      gridDensity: 'regular' as const,
     };
     const serverSettings = {
       defaultDateTimeFormat: serverConfigValues?.get('dateTimeFormat'),
@@ -121,7 +122,9 @@ export class LocalWorkspaceStorage implements WorkspaceStorage {
       ),
     };
 
-    const keys = Object.keys(serverSettings) as Array<keyof typeof settings>;
+    const keys = Object.keys(serverSettings) as Array<
+      keyof typeof serverSettings
+    >;
     for (let i = 0; i < keys.length; i += 1) {
       const key = keys[i];
       if (serverSettings[key] !== undefined) {

diff --git a/packages/code-studio/src/AppRoot.tsx b/packages/code-studio/src/AppRoot.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import { Provider } from 'react-redux';
 import { MonacoUtils } from '@deephaven/console';
-import { store } from '@deephaven/redux';
 import { DownloadServiceWorkerUtils } from '@deephaven/iris-grid';
 import MonacoWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import AppRouter from './main/AppRouter';
@@ -25,11 +23,7 @@ export function AppRoot(): JSX.Element {
   // @ts-ignore
   window['__react-beautiful-dnd-disable-dev-warnings'] = true;
 
-  return (
-    <Provider store={store}>
-      <AppRouter />
-    </Provider>
-  );
+  return <AppRouter />;
 }
 
 export default AppRoot;
diff --git a/packages/code-studio/src/index.tsx b/packages/code-studio/src/index.tsx
@@ -1,8 +1,10 @@
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
-import '@deephaven/components/scss/BaseStyleSheet.scss';
+import '@deephaven/components/scss/BaseStyleSheet.scss'; // Do NOT move any lower. This needs to be imported before any other styles
+import { Provider } from 'react-redux';
 import { LoadingOverlay, preloadTheme } from '@deephaven/components';
 import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
+import { store } from '@deephaven/redux';
 import logInit from './log/LogInit';
 
 logInit();
@@ -59,13 +61,15 @@ async function getCorePlugins() {
 ReactDOM.render(
   <ApiBootstrap apiUrl={apiURL.href} setGlobally>
     <Suspense fallback={<LoadingOverlay />}>
-      <AppBootstrap
-        getCorePlugins={getCorePlugins}
-        serverUrl={apiURL.origin}
-        pluginsUrl={pluginsURL.href}
-      >
-        <AppRoot />
-      </AppBootstrap>
+      <Provider store={store}>
+        <AppBootstrap
+          getCorePlugins={getCorePlugins}
+          serverUrl={apiURL.origin}
+          pluginsUrl={pluginsURL.href}
+        >
+          <AppRoot />
+        </AppBootstrap>
+      </Provider>
     </Suspense>
   </ApiBootstrap>,
   document.getElementById('root')

diff --git a/packages/code-studio/src/settings/SettingsMenu.tsx b/packages/code-studio/src/settings/SettingsMenu.tsx
@@ -16,8 +16,6 @@ import {
   CopyButton,
   GLOBAL_SHORTCUTS,
   Logo,
-  ThemeContext,
-  ThemePicker,
   Tooltip,
 } from '@deephaven/components';
 import { ServerConfigValues, User } from '@deephaven/redux';
@@ -26,7 +24,6 @@ import {
   BROADCAST_LOGOUT_MESSAGE,
   makeMessage,
 } from '@deephaven/jsapi-utils';
-import { assertNotNull } from '@deephaven/utils';
 import { PluginModuleMap } from '@deephaven/plugin';
 import FormattingSectionContent from './FormattingSectionContent';
 import LegalNotice from './LegalNotice';
@@ -40,6 +37,7 @@ import {
   getFormattedVersionInfo,
 } from './SettingsUtils';
 import AdvancedSectionContent from './AdvancedSectionContent';
+import ThemeSectionContent from './ThemeSectionContent';
 
 interface SettingsMenuProps {
   serverConfigValues: ServerConfigValues;
@@ -258,33 +256,23 @@ export class SettingsMenu extends Component<
             <ColumnSpecificSectionContent scrollTo={this.handleScrollTo} />
           </SettingsMenuSection>
 
-          <ThemeContext.Consumer>
-            {contextValue => {
-              assertNotNull(contextValue, 'ThemeContext value is null');
-
-              return contextValue.themes.length > 1 ? (
-                <SettingsMenuSection
-                  sectionKey={SettingsMenu.THEME_SECTION_KEY}
-                  isExpanded={this.isSectionExpanded(
-                    SettingsMenu.THEME_SECTION_KEY
-                  )}
-                  onToggle={this.handleSectionToggle}
-                  title={
-                    <>
-                      <FontAwesomeIcon
-                        icon={vsPaintcan}
-                        transform="grow-4"
-                        className="mr-2"
-                      />
-                      Theme
-                    </>
-                  }
-                >
-                  <ThemePicker />
-                </SettingsMenuSection>
-              ) : null;
-            }}
-          </ThemeContext.Consumer>
+          <SettingsMenuSection
+            sectionKey={SettingsMenu.THEME_SECTION_KEY}
+            isExpanded={this.isSectionExpanded(SettingsMenu.THEME_SECTION_KEY)}
+            onToggle={this.handleSectionToggle}
+            title={
+              <>
+                <FontAwesomeIcon
+                  icon={vsPaintcan}
+                  transform="grow-4"
+                  className="mr-2"
+                />
+                Theme
+              </>
+            }
+          >
+            <ThemeSectionContent />
+          </SettingsMenuSection>
 
           <SettingsMenuSection
             sectionKey={SettingsMenu.SHORTCUT_SECTION_KEY}

diff --git a/packages/code-studio/src/settings/ThemeSectionContent.tsx b/packages/code-studio/src/settings/ThemeSectionContent.tsx
@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import {
+  Item,
+  ItemKey,
+  Picker,
+  ThemePicker,
+  useTheme,
+} from '@deephaven/components';
+import { assertNotNull } from '@deephaven/utils';
+import { useDispatch } from 'react-redux';
+import { getSettings, updateSettings } from '@deephaven/redux';
+import { useAppSelector } from '@deephaven/dashboard';
+
+export function ThemeSectionContent(): JSX.Element {
+  const theme = useTheme();
+  const settings = useAppSelector(getSettings);
+  const dispatch = useDispatch();
+
+  const updateDensity = useCallback(
+    (density: ItemKey | null) => {
+      if (
+        density !== 'regular' &&
+        density !== 'compact' &&
+        density !== 'spacious'
+      ) {
+        throw new Error(`Invalid grid density value: ${density}`);
+      }
+      dispatch(updateSettings({ gridDensity: density }));
+    },
+    [dispatch]
+  );
+
+  const density = settings.gridDensity;
+
+  assertNotNull(theme, 'ThemeContext value is null');
+
+  return (
+    <>
+      <ThemePicker />
+      <Picker
+        label="Default table density"
+        selectedKey={density}
+        onChange={updateDensity}
+      >
+        <Item key="regular">Regular</Item>
+        <Item key="compact">Compact</Item>
+        <Item key="spacious">Spacious</Item>
+      </Picker>
+    </>
+  );
+}
+
+export default ThemeSectionContent;
diff --git a/packages/code-studio/src/styleguide/Grids.tsx b/packages/code-studio/src/styleguide/Grids.tsx
@@ -22,6 +22,12 @@ function Grids(): ReactElement {
   const [irisGridModel] = useState(
     new MockIrisGridTreeModel(dh, new MockTreeGridModel())
   );
+  const [irisGridCompactModel] = useState(
+    new MockIrisGridTreeModel(dh, new MockTreeGridModel())
+  );
+  const [irisGridSpaciousModel] = useState(
+    new MockIrisGridTreeModel(dh, new MockTreeGridModel())
+  );
   const [model] = useState(new MockGridModel());
   const [theme] = useState<Partial<GridThemeType>>({
     autoSelectRow: true,
@@ -68,7 +74,15 @@ function Grids(): ReactElement {
         </SampleSection>
         <h2 className="ui-title">Iris Grid</h2>
         <SampleSection name="grids-iris" component={Flex} height={500}>
-          <IrisGrid model={irisGridModel} />
+          <IrisGrid model={irisGridModel} density="regular" />
+        </SampleSection>
+        <h2 className="ui-title">Iris Grid Compact</h2>
+        <SampleSection name="grids-iris-compact" component={Flex} height={500}>
+          <IrisGrid model={irisGridCompactModel} density="compact" />
+        </SampleSection>
+        <h2 className="ui-title">Iris Grid Spacious</h2>
+        <SampleSection name="grids-iris-spacious" component={Flex} height={500}>
+          <IrisGrid model={irisGridSpaciousModel} density="spacious" />
         </SampleSection>
       </ThemeContext.Provider>
     </div>

diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx
@@ -75,8 +75,6 @@ function StyleGuide(): React.ReactElement {
         >
           <h1 style={{ paddingTop: '2rem' }}>Deephaven UI Components</h1>
         </Flex>
-
-        {/* {isIsolatedSection ? null : ( */}
         <Flex
           {...stickyProps}
           UNSAFE_className={
@@ -90,8 +88,6 @@ function StyleGuide(): React.ReactElement {
           {hasMultipleThemes ? <ThemePicker /> : null}
           <SamplesMenu />
         </Flex>
-        {/* )} */}
-        {/* {isIsolatedSection ? null : ( */}
         <Flex
           {...stickyProps}
           UNSAFE_className={
@@ -103,7 +99,6 @@ function StyleGuide(): React.ReactElement {
         >
           <GotoTopButton />
         </Flex>
-        {/* )} */}
 
         <Typograpy />
 

diff --git a/packages/embed-widget/src/index.tsx b/packages/embed-widget/src/index.tsx
@@ -1,8 +1,6 @@
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { store } from '@deephaven/redux';
-import '@deephaven/components/scss/BaseStyleSheet.scss';
+import '@deephaven/components/scss/BaseStyleSheet.scss'; // Do NOT move any lower. This needs to be imported before any other styles
 import { LoadingOverlay, preloadTheme } from '@deephaven/components';
 import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
 import './index.scss';
@@ -56,9 +54,7 @@ ReactDOM.render(
         serverUrl={apiURL.origin}
         pluginsUrl={pluginsURL.href}
       >
-        <Provider store={store}>
-          <App />
-        </Provider>
+        <App />
       </AppBootstrap>
     </Suspense>
   </ApiBootstrap>,