Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Adjustable grid density #2151

Merged
merged 8 commits into from
Jul 22, 2024
Merged

feat: Adjustable grid density #2151

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
288702a
feat: Adjustable grid density
mattrunyon Jul 17, 2024
9d34bc4
Address review comments
mattrunyon Jul 17, 2024
137a3b3
Fix jest tests
mattrunyon Jul 17, 2024
2389947
fix test errors
mattrunyon Jul 17, 2024
21a37ff
Change throw to warn
mattrunyon Jul 17, 2024
b52373f
Address review comments
mattrunyon Jul 18, 2024
a83f745
Address Don's suggestions
mattrunyon Jul 22, 2024
6ba4057
Address review comment
mattrunyon Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 30 additions & 23 deletions packages/app-utils/src/components/AppBootstrap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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>
);
}

Expand Down
8 changes: 7 additions & 1 deletion packages/app-utils/src/components/ThemeBootstrap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion packages/app-utils/src/storage/LocalWorkspaceStorage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export class LocalWorkspaceStorage implements WorkspaceStorage {
},
webgl: true,
webglEditable: true,
gridDensity: 'regular' as const,
};
const serverSettings = {
defaultDateTimeFormat: serverConfigValues?.get('dateTimeFormat'),
Expand Down Expand Up @@ -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
mattrunyon marked this conversation as resolved.
Show resolved Hide resolved
>;
for (let i = 0; i < keys.length; i += 1) {
const key = keys[i];
if (serverSettings[key] !== undefined) {
Expand Down
8 changes: 1 addition & 7 deletions packages/code-studio/src/AppRoot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
20 changes: 12 additions & 8 deletions packages/code-studio/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
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 { store } from '@deephaven/redux';
import '@deephaven/components/scss/BaseStyleSheet.scss';
import logInit from './log/LogInit';

logInit();
Expand Down Expand Up @@ -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')
Expand Down
48 changes: 18 additions & 30 deletions packages/code-studio/src/settings/SettingsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ import {
CopyButton,
GLOBAL_SHORTCUTS,
Logo,
ThemeContext,
ThemePicker,
Tooltip,
} from '@deephaven/components';
import { ServerConfigValues, User } from '@deephaven/redux';
Expand All @@ -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';
Expand All @@ -40,6 +37,7 @@ import {
getFormattedVersionInfo,
} from './SettingsUtils';
import AdvancedSectionContent from './AdvancedSectionContent';
import ThemeSectionContent from './ThemeSectionContent';

interface SettingsMenuProps {
serverConfigValues: ServerConfigValues;
Expand Down Expand Up @@ -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}
Expand Down
53 changes: 53 additions & 0 deletions packages/code-studio/src/settings/ThemeSectionContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useAppDispatch

Copy link
Collaborator Author

@mattrunyon mattrunyon Jul 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't seem to work with the thunk action I'm dispatching. Throws a TS error about the argument not being the right type

Copy link
Collaborator Author

@mattrunyon mattrunyon Jul 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this might be because we aren't using configureStore with redux and are using the old, deprecated createStore. Or how we register thunks, but that action is created in our redux package so the root store should know about it


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;
16 changes: 15 additions & 1 deletion packages/code-studio/src/styleguide/Grids.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 0 additions & 5 deletions packages/code-studio/src/styleguide/StyleGuide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,6 @@ function StyleGuide(): React.ReactElement {
>
<h1 style={{ paddingTop: '2rem' }}>Deephaven UI Components</h1>
</Flex>

{/* {isIsolatedSection ? null : ( */}
<Flex
{...stickyProps}
UNSAFE_className={
Expand All @@ -89,8 +87,6 @@ function StyleGuide(): React.ReactElement {
{hasMultipleThemes ? <ThemePicker /> : null}
<SamplesMenu />
</Flex>
{/* )} */}
{/* {isIsolatedSection ? null : ( */}
<Flex
{...stickyProps}
UNSAFE_className={
Expand All @@ -102,7 +98,6 @@ function StyleGuide(): React.ReactElement {
>
<GotoTopButton />
</Flex>
{/* )} */}

<Typograpy />

Expand Down
6 changes: 1 addition & 5 deletions packages/embed-widget/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -56,9 +54,7 @@ ReactDOM.render(
serverUrl={apiURL.origin}
pluginsUrl={pluginsURL.href}
>
<Provider store={store}>
<App />
</Provider>
<App />
</AppBootstrap>
</Suspense>
</ApiBootstrap>,
Expand Down
Loading
Loading