feat: Adjustable grid density

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>
   );
 }
 

packages/app-utils/src/components/ThemeBootstrap.tsx

@@ -4,8 +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 { useSelector } from 'react-redux';
-import { getSettings, type RootState } from '@deephaven/redux';
+import { getSettings } from '@deephaven/redux';
+import { useAppSelector } from '@deephaven/dashboard';
 
 export interface ThemeBootstrapProps {
   children: React.ReactNode;
@@ -23,9 +23,7 @@ export function ThemeBootstrap({ children }: ThemeBootstrapProps): JSX.Element {
     [pluginModules]
   );
 
-  const settings = useSelector<RootState, ReturnType<typeof getSettings>>(
-    getSettings
-  );
+  const settings = useAppSelector(getSettings);
 
   return (
     <ThemeProvider themes={themes}>

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) {

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';

packages/code-studio/src/index.tsx

@@ -1,11 +1,11 @@
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
-import '@deephaven/components/scss/BaseStyleSheet.scss';
+import { Provider } from 'react-redux';
 import { LoadingOverlay, preloadTheme } from '@deephaven/components';
 import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
-import logInit from './log/LogInit';
-import { Provider } from 'react-redux';
 import { store } from '@deephaven/redux';
+import '@deephaven/components/scss/BaseStyleSheet.scss';
+import logInit from './log/LogInit';
 
 logInit();
 

packages/code-studio/src/settings/SettingsMenu.tsx

@@ -15,11 +15,7 @@ import {
   Button,
   CopyButton,
   GLOBAL_SHORTCUTS,
-  Item,
   Logo,
-  Picker,
-  ThemeContext,
-  ThemePicker,
   Tooltip,
 } from '@deephaven/components';
 import { ServerConfigValues, User } from '@deephaven/redux';
@@ -28,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';

packages/code-studio/src/settings/ThemeSectionContent.tsx

@@ -7,20 +7,19 @@ import {
   useTheme,
 } from '@deephaven/components';
 import { assertNotNull } from '@deephaven/utils';
-import { useDispatch, useSelector } from 'react-redux';
-import { getSettings, updateSettings, type RootState } from '@deephaven/redux';
+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 = useSelector<RootState, ReturnType<typeof getSettings>>(
-    getSettings
-  );
+  const settings = useAppSelector(getSettings);
   const dispatch = useDispatch();
 
   const updateDensity = useCallback(
     (density: ItemKey | null) => {
       if (
-        density !== 'normal' &&
+        density !== 'regular' &&
         density !== 'compact' &&
         density !== 'spacious'
       ) {
@@ -31,19 +30,19 @@ export function ThemeSectionContent(): JSX.Element {
     [dispatch]
   );
 
-  const density = settings.gridDensity ?? 'normal';
+  const density = settings.gridDensity;
 
   assertNotNull(theme, 'ThemeContext value is null');
 
   return (
     <>
       <ThemePicker />
       <Picker
-        label="Choose grid density"
+        label="Default table density"
         selectedKey={density}
         onChange={updateDensity}
       >
-        <Item key="normal">Normal</Item>
+        <Item key="regular">Regular</Item>
         <Item key="compact">Compact</Item>
         <Item key="spacious">Spacious</Item>
       </Picker>

packages/code-studio/src/styleguide/Grids.tsx

@@ -74,14 +74,14 @@ 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" component={Flex} height={500}>
+        <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" component={Flex} height={500}>
+        <SampleSection name="grids-iris-spacious" component={Flex} height={500}>
           <IrisGrid model={irisGridSpaciousModel} density="spacious" />
         </SampleSection>
       </ThemeContext.Provider>

packages/embed-widget/src/index.tsx

@@ -1,7 +1,5 @@
 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 { LoadingOverlay, preloadTheme } from '@deephaven/components';
 import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
@@ -56,9 +54,7 @@ ReactDOM.render(
         serverUrl={apiURL.origin}
         pluginsUrl={pluginsURL.href}
       >
-        <Provider store={store}>
-          <App />
-        </Provider>
+        <App />
       </AppBootstrap>
     </Suspense>
   </ApiBootstrap>,

packages/iris-grid/src/IrisGrid.tsx

@@ -126,13 +126,7 @@ import ToastBottomBar from './ToastBottomBar';
 import IrisGridMetricCalculator from './IrisGridMetricCalculator';
 import IrisGridModelUpdater from './IrisGridModelUpdater';
 import IrisGridRenderer from './IrisGridRenderer';
-import {
-  createDefaultIrisGridTheme,
-  IrisGridThemeType,
-  NORMAL_DENSITY_THEME,
-  COMPACT_DENSITY_THEME,
-  SPACIOUS_DENSITY_THEME,
-} from './IrisGridTheme';
+import { createDefaultIrisGridTheme, IrisGridThemeType } from './IrisGridTheme';
 import ColumnStatistics from './ColumnStatistics';
 import './IrisGrid.scss';
 import AdvancedFilterCreator from './AdvancedFilterCreator';
@@ -359,7 +353,7 @@ export interface IrisGridProps {
   // Pass in a custom renderer to the grid for advanced use cases
   renderer?: IrisGridRenderer;
 
-  density?: 'compact' | 'normal' | 'spacious';
+  density?: 'compact' | 'regular' | 'spacious';
 }
 
 export interface IrisGridState {
@@ -463,6 +457,9 @@ export interface IrisGridState {
 class IrisGrid extends Component<IrisGridProps, IrisGridState> {
   static contextType = IrisGridThemeContext;
 
+  // eslint-disable-next-line react/static-property-placement, react/sort-comp
+  declare context: React.ContextType<typeof IrisGridThemeContext>;
+
   static minDebounce = 150;
 
   static maxDebounce = 500;
@@ -537,6 +534,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     canDownloadCsv: true,
     frozenColumns: null,
     theme: null,
+    // Do not set a default density prop since we need to know if it overrides the global density setting
+    density: undefined,
     canToggleSearch: true,
     mouseHandlers: EMPTY_ARRAY,
     keyHandlers: EMPTY_ARRAY,
@@ -1401,12 +1400,12 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       contextTheme: IrisGridThemeType | null,
       theme: Partial<IrisGridThemeType> | null,
       isEditable: boolean,
-      floatingRowCount: number
+      floatingRowCount: number,
+      density: 'compact' | 'regular' | 'spacious'
     ): IrisGridThemeType => {
       // If a theme is available via context, use that as the base theme.
       // If iris-grid is standalone without a context, use the default theme.
-      const defaultTheme = createDefaultIrisGridTheme();
-      const baseTheme = contextTheme ?? defaultTheme;
+      const baseTheme = contextTheme ?? createDefaultIrisGridTheme();
 
       // We only show the row footers when we have floating rows for aggregations
       const rowFooterWidth =
@@ -1420,15 +1419,17 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
         metricCalculator.resetCalculatedRowHeights();
       }
 
-      const { density } = this.props;
+      let densityTheme = {};
+      if (density === 'compact') {
+        densityTheme = baseTheme.density.compact;
+      }
+      if (density === 'spacious') {
+        densityTheme = baseTheme.density.spacious;
+      }
 
       return {
-        // Base theme includes global density settings
         ...baseTheme,
-        // Explicitly set density overrides base theme
-        ...(density === 'normal' ? NORMAL_DENSITY_THEME : {}),
-        ...(density === 'compact' ? COMPACT_DENSITY_THEME : {}),
-        ...(density === 'spacious' ? SPACIOUS_DENSITY_THEME : {}),
+        ...densityTheme,
         ...theme,
         autoSelectRow: !isEditable,
         rowFooterWidth,
@@ -1521,13 +1522,15 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
   }
 
   getTheme(): IrisGridThemeType {
-    const { model, theme } = this.props;
+    const { model, theme, density } = this.props;
+    const { theme: contextTheme, density: contextDensity } = this.context;
 
     return this.getCachedTheme(
-      this.context,
+      contextTheme,
       theme,
       (isEditableGridModel(model) && model.isEditable) ?? false,
-      model.floatingTopRowCount + model.floatingBottomRowCount
+      model.floatingTopRowCount + model.floatingBottomRowCount,
+      density ?? contextDensity
     );
   }
 

packages/iris-grid/src/IrisGridTheme.test.ts

@@ -1,12 +1,18 @@
-import { resolveCssVariablesInRecord } from '@deephaven/components';
-import { TestUtils } from '@deephaven/utils';
 import { createDefaultIrisGridTheme } from './IrisGridTheme';
 
-const { asMock } = TestUtils;
-
 jest.mock('@deephaven/components', () => ({
   ...jest.requireActual('@deephaven/components'),
-  resolveCssVariablesInRecord: jest.fn(),
+  resolveCssVariablesInRecord: jest.fn(
+    () =>
+      new Proxy(
+        {},
+        {
+          get(_target, name) {
+            return `IrisGridTheme['${String(name)}']`;
+          },
+        }
+      )
+  ),
 }));
 
 beforeEach(() => {
@@ -15,25 +21,8 @@ beforeEach(() => {
 });
 
 describe('createDefaultIrisGridTheme', () => {
-  // Proxy for IrisGridTheme
-  const identityProxy = new Proxy(
-    {},
-    {
-      get(_target, name) {
-        return `IrisGridTheme['${String(name)}']`;
-      },
-    }
-  );
-
-  beforeEach(() => {
-    asMock(resolveCssVariablesInRecord)
-      .mockName('resolveCssVariablesInRecord')
-      .mockReturnValue(identityProxy);
-  });
-
   it('should derive the default Iris grid theme', () => {
     const theme = createDefaultIrisGridTheme();
-    expect(resolveCssVariablesInRecord).toHaveBeenCalled();
     expect(theme).toMatchSnapshot();
   });
 });