Skip to content

Commit

Permalink
feat: add options in flat run (#9341)
Browse files Browse the repository at this point in the history
  • Loading branch information
@keita-determined
keita-determined authored May 13, 2024
1 parent 16a3f3b commit 989341c
Show file tree
Hide file tree
Showing 8 changed files with 31 additions and 131 deletions.
5 changes: 0 additions & 5 deletions webui/react/src/components/OptionsMenu.module.scss
View file

This file was deleted.

10 changes: 1 addition & 9 deletions webui/react/src/components/OptionsMenu.settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as t from 'io-ts';

import { SettingsConfig } from 'hooks/useSettings';

import { ioRowHeight, ioTableViewMode, RowHeight, TableViewMode } from './OptionsMenu';
import { ioRowHeight, RowHeight } from './OptionsMenu';

export const rowHeightMap: Record<RowHeight, number> = {
[RowHeight.EXTRA_TALL]: 44,
Expand All @@ -13,14 +13,12 @@ export const rowHeightMap: Record<RowHeight, number> = {

export interface DataGridGlobalSettings {
rowHeight: RowHeight;
tableViewMode: TableViewMode;
}

export const dataGridGlobalSettingsConfig = t.intersection([
t.type({}),
t.partial({
rowHeight: ioRowHeight,
tableViewMode: ioTableViewMode,
}),
]);

Expand All @@ -39,12 +37,6 @@ export const settingsConfigGlobal: SettingsConfig<DataGridGlobalSettings> = {
storageKey: 'rowHeight',
type: ioRowHeight,
},
tableViewMode: {
defaultValue: 'scroll',
skipUrlEncoding: true,
storageKey: 'tableViewMode',
type: ioTableViewMode,
},
},
storagePath: dataGridGlobalSettingsPath,
};
41 changes: 3 additions & 38 deletions webui/react/src/components/OptionsMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import Button from 'hew/Button';
import Dropdown, { MenuItem } from 'hew/Dropdown';
import Icon from 'hew/Icon';
// import Toggle from 'hew/Toggle';
import { literal, TypeOf, union } from 'io-ts';
import { TypeOf } from 'io-ts';
import { useMemo } from 'react';

import { valueof } from 'utils/valueof';

// import css from './OptionsMenu.module.scss';

export const RowHeight = {
EXTRA_TALL: 'EXTRA_TALL',
MEDIUM: 'MEDIUM',
Expand Down Expand Up @@ -43,23 +40,12 @@ export const rowHeightItems = [
},
];

export type TableViewMode = 'scroll' | 'paged';

export const ioTableViewMode = union([literal('scroll'), literal('paged')]);

interface OptionProps {
onRowHeightChange?: (r: RowHeight) => void;
// onTableViewModeChange?: (view: TableViewMode) => void;
rowHeight: RowHeight;
// tableViewMode: TableViewMode;
}

export const OptionsMenu: React.FC<OptionProps> = ({
rowHeight,
// tableViewMode,
onRowHeightChange,
// onTableViewModeChange,
}) => {
export const OptionsMenu: React.FC<OptionProps> = ({ rowHeight, onRowHeightChange }) => {
const dropdownItems: MenuItem[] = useMemo(
() => [
{
Expand All @@ -71,29 +57,8 @@ export const OptionsMenu: React.FC<OptionProps> = ({
label: 'Row height',
type: 'group',
},
// {
// children: [
// {
// icon: <Icon decorative name="scroll" />,
// key: 'scroll',
// label: (
// <div className={css.scrollSettingsRow}>
// <span>Infinite scroll</span>
// <Toggle checked={tableViewMode === 'scroll'} />
// </div>
// ),
// onClick: () => onTableViewModeChange?.(tableViewMode === 'scroll' ? 'paged' : 'scroll'),
// },
// ],
// label: 'Data',
// type: 'group',
// },
],
[
// tableViewMode,
onRowHeightChange,
// onTableViewModeChange
],
[onRowHeightChange],
);
const icon = (
<span className="anticon">
Expand Down
16 changes: 1 addition & 15 deletions webui/react/src/components/Searches/Searches.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,7 @@ import {
SpecialColumnNames,
} from 'components/FilterForm/components/type';
import { EMPTY_SORT, sortMenuItemsForColumn } from 'components/MultiSortMenu';
import {
RowHeight,
// TableViewMode
} from 'components/OptionsMenu';
import { RowHeight } from 'components/OptionsMenu';
import { DataGridGlobalSettings, settingsConfigGlobal } from 'components/OptionsMenu.settings';
import TableActionBar from 'components/TableActionBar';
import useUI from 'components/ThemeProvider';
Expand Down Expand Up @@ -567,15 +564,6 @@ const Searches: React.FC<Props> = ({ project }) => {
};
}, [handleSelectionChange]);

// const handleTableViewModeChange = useCallback(
// (mode: TableViewMode) => {
// // Reset page index when table view mode changes.
// resetPagination();
// updateGlobalSettings({ tableViewMode: mode });
// },
// [resetPagination, updateGlobalSettings],
// );

const onPageChange = useCallback(
(cPage: number, cPageSize: number) => {
updateSettings({ pageLimit: cPageSize });
Expand Down Expand Up @@ -846,14 +834,12 @@ const Searches: React.FC<Props> = ({ project }) => {
rowHeight={globalSettings.rowHeight}
selectedExperimentIds={allSelectedExperimentIds}
sorts={sorts}
// tableViewMode={globalSettings.tableViewMode}
total={total}
onActionComplete={handleActionComplete}
onActionSuccess={handleActionSuccess}
onIsOpenFilterChange={handleIsOpenFilterChange}
onRowHeightChange={handleRowHeightChange}
onSortChange={handleSortChange}
// onTableViewModeChange={handleTableViewModeChange}
onVisibleColumnChange={handleColumnsOrderChange}
/>
<div className={css.content} ref={contentRef}>
Expand Down
13 changes: 2 additions & 11 deletions webui/react/src/components/TableActionBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import ExperimentTensorBoardModal from 'components/ExperimentTensorBoardModal';
import { FilterFormStore } from 'components/FilterForm/components/FilterFormStore';
import TableFilter from 'components/FilterForm/TableFilter';
import MultiSortMenu from 'components/MultiSortMenu';
import { OptionsMenu, RowHeight, TableViewMode } from 'components/OptionsMenu';
import { OptionsMenu, RowHeight } from 'components/OptionsMenu';
import useMobile from 'hooks/useMobile';
import usePermissions from 'hooks/usePermissions';
import { BANNED_FILTER_COLUMNS } from 'pages/F_ExpList/F_ExperimentList';
Expand Down Expand Up @@ -95,15 +95,13 @@ interface Props {
onHeatmapToggle?: (heatmapOn: boolean) => void;
onIsOpenFilterChange?: (value: boolean) => void;
onRowHeightChange?: (rowHeight: RowHeight) => void;
onTableViewModeChange?: (mode: TableViewMode) => void;
onSortChange?: (sorts: Sort[]) => void;
onVisibleColumnChange?: (newColumns: string[]) => void;
project: Project;
projectColumns: Loadable<ProjectColumn[]>;
rowHeight: RowHeight;
selectedExperimentIds: number[];
sorts: Sort[];
// tableViewMode: TableViewMode;
total: Loadable<number>;
labelSingular: string;
labelPlural: string;
Expand All @@ -124,14 +122,12 @@ const TableActionBar: React.FC<Props> = ({
onIsOpenFilterChange,
onRowHeightChange,
onSortChange,
// onTableViewModeChange,
onVisibleColumnChange,
project,
projectColumns,
rowHeight,
selectedExperimentIds,
sorts,
// tableViewMode,
total,
labelSingular,
labelPlural,
Expand Down Expand Up @@ -416,12 +412,7 @@ const TableActionBar: React.FC<Props> = ({
tabs={columnGroups}
onVisibleColumnChange={onVisibleColumnChange}
/>
<OptionsMenu
rowHeight={rowHeight}
// tableViewMode={tableViewMode}
onRowHeightChange={onRowHeightChange}
// onTableViewModeChange={onTableViewModeChange}
/>
<OptionsMenu rowHeight={rowHeight} onRowHeightChange={onRowHeightChange} />
{selectedExperimentIds.length > 0 && (
<Dropdown menu={editMenuItems} onClick={handleAction}>
<Button hideChildren={isMobile}>Actions</Button>
Expand Down
28 changes: 1 addition & 27 deletions webui/react/src/components/UserSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,7 @@ import { Loadable } from 'hew/utils/loadable';
import React, { useCallback, useState } from 'react';

import Grid from 'components/Grid';
import {
RowHeight,
rowHeightItems,
// TableViewMode
} from 'components/OptionsMenu';
import { RowHeight, rowHeightItems } from 'components/OptionsMenu';
import PasswordChangeModalComponent from 'components/PasswordChangeModal';
import Section from 'components/Section';
import useUI, { Mode } from 'components/ThemeProvider';
Expand Down Expand Up @@ -234,28 +230,6 @@ const UserSettings: React.FC<Props> = ({ show, onClose }: Props) => {
))}
</Select>
</InlineForm>
{/* <InlineForm<TableViewMode>
initialValue={dataGridGlobalSettings.tableViewMode}
label="Infinite Scroll"
valueFormatter={(mode) => (mode === 'scroll' ? 'On' : 'Off')}
onSubmit={(mode) => {
userSettings.setPartial(
dataGridGlobalSettingsConfig,
dataGridGlobalSettingsPath,
{
tableViewMode: mode,
},
);
}}>
<Select searchable={false}>
<Option key="scroll" value="scroll">
On
</Option>
<Option key="paged" value="paged">
Off
</Option>
</Select>
</InlineForm> */}
</div>
</Section>
<Section divider title="Shortcuts">
Expand Down
18 changes: 2 additions & 16 deletions webui/react/src/pages/F_ExpList/F_ExperimentList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,7 @@ import {
SpecialColumnNames,
} from 'components/FilterForm/components/type';
import { EMPTY_SORT, sortMenuItemsForColumn } from 'components/MultiSortMenu';
import {
RowHeight,
// TableViewMode
} from 'components/OptionsMenu';
import { RowHeight } from 'components/OptionsMenu';
import {
DataGridGlobalSettings,
rowHeightMap,
Expand Down Expand Up @@ -626,15 +623,6 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
};
}, [handleSelectionChange]);

// const handleTableViewModeChange = useCallback(
// (mode: TableViewMode) => {
// // Reset page index when table view mode changes.
// resetPagination();
// updateGlobalSettings({ tableViewMode: mode });
// },
// [resetPagination, updateGlobalSettings],
// );

const onPageChange = useCallback(
(cPage: number, cPageSize: number) => {
updateSettings({ pageLimit: cPageSize });
Expand Down Expand Up @@ -1088,7 +1076,6 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
rowHeight={globalSettings.rowHeight}
selectedExperimentIds={allSelectedExperimentIds}
sorts={sorts}
// tableViewMode={globalSettings.tableViewMode}
total={total}
onActionComplete={handleActionComplete}
onActionSuccess={handleActionSuccess}
Expand All @@ -1097,7 +1084,6 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
onIsOpenFilterChange={handleIsOpenFilterChange}
onRowHeightChange={handleRowHeightChange}
onSortChange={handleSortChange}
// onTableViewModeChange={handleTableViewModeChange}
onVisibleColumnChange={handleColumnsOrderChange}
/>
<div className={css.content} ref={contentRef}>
Expand Down Expand Up @@ -1154,7 +1140,7 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
</ExperimentActionDropdown>
);
}}
rowHeight={rowHeightMap[globalSettings.rowHeight as RowHeight]}
rowHeight={rowHeightMap[globalSettings.rowHeight]}
selection={selection}
sorts={sorts}
staticColumns={STATIC_COLUMNS}
Expand Down
31 changes: 21 additions & 10 deletions webui/react/src/pages/FlatRuns/FlatRuns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import {
} from 'components/FilterForm/components/type';
import TableFilter from 'components/FilterForm/TableFilter';
import { EMPTY_SORT, sortMenuItemsForColumn } from 'components/MultiSortMenu';
import { RowHeight } from 'components/OptionsMenu';
import { OptionsMenu, RowHeight } from 'components/OptionsMenu';
import {
DataGridGlobalSettings,
rowHeightMap,
Expand Down Expand Up @@ -129,7 +129,8 @@ const FlatRuns: React.FC<Props> = ({ project }) => {
[flatRunsSettings],
);

const { settings: globalSettings } = useSettings<DataGridGlobalSettings>(settingsConfigGlobal);
const { settings: globalSettings, updateSettings: updateGlobalSettings } =
useSettings<DataGridGlobalSettings>(settingsConfigGlobal);

const [isOpenFilter, setIsOpenFilter] = useState<boolean>(false);
const [runs, setRuns] = useState<Loadable<FlatRun>[]>(INITIAL_LOADING_RUNS);
Expand Down Expand Up @@ -329,6 +330,13 @@ const FlatRuns: React.FC<Props> = ({ project }) => {
users,
]);

const onRowHeightChange = useCallback(
(newRowHeight: RowHeight) => {
updateGlobalSettings({ rowHeight: newRowHeight });
},
[updateGlobalSettings],
);

const onPageChange = useCallback(
(cPage: number, cPageSize: number) => {
updateSettings({ pageLimit: cPageSize });
Expand Down Expand Up @@ -723,14 +731,17 @@ const FlatRuns: React.FC<Props> = ({ project }) => {

return (
<div className={css.content} ref={contentRef}>
<TableFilter
bannedFilterColumns={BANNED_FILTER_COLUMNS}
formStore={formStore}
isMobile={isMobile}
isOpenFilter={isOpenFilter}
loadableColumns={projectColumns}
onIsOpenFilterChange={handleIsOpenFilterChange}
/>
<Row>
<TableFilter
bannedFilterColumns={BANNED_FILTER_COLUMNS}
formStore={formStore}
isMobile={isMobile}
isOpenFilter={isOpenFilter}
loadableColumns={projectColumns}
onIsOpenFilterChange={handleIsOpenFilterChange}
/>
<OptionsMenu rowHeight={globalSettings.rowHeight} onRowHeightChange={onRowHeightChange} />
</Row>
{!isLoading && total.isLoaded && total.data === 0 ? (
numFilters === 0 ? (
<Message
Expand Down

0 comments on commit 989341c

Please sign in to comment.