[arvados-workbench2] created: 2.4.0-323-g2e7cab4e
git repository hosting
git at public.arvados.org
Wed Oct 26 20:13:31 UTC 2022
at 2e7cab4ecaba7a2bc72af5881b36ecca161afa9e (commit)
commit 2e7cab4ecaba7a2bc72af5881b36ecca161afa9e
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Wed Oct 26 17:13:10 2022 -0300
19300: Fixes unit test warning.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/multi-panel-view/multi-panel-view.test.tsx b/src/components/multi-panel-view/multi-panel-view.test.tsx
index d690e82f..3f4911c2 100644
--- a/src/components/multi-panel-view/multi-panel-view.test.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.test.tsx
@@ -10,7 +10,7 @@ import { Button } from "@material-ui/core";
configure({ adapter: new Adapter() });
-const PanelMock = ({panelName, panelMaximized, doHidePanel, doMaximizePanel, panelIlluminated, panelRef, children, ...rest}) =>
+const PanelMock = ({panelName, panelMaximized, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelIlluminated, panelRef, children, ...rest}) =>
<div {...rest}>{children}</div>;
describe('<MPVContainer />', () => {
commit 8d491bda9abdc1a8d5f0ac8bcea3bf77eb221888
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Wed Oct 26 17:05:49 2022 -0300
19300: Adds un-maximize button to every maximizable panel.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 40617f73..4e14b996 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -11,7 +11,13 @@ import { SearchInput } from 'components/search-input/search-input';
import { ArvadosTheme } from "common/custom-theme";
import { createTree } from 'models/tree';
import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree';
-import { CloseIcon, IconType, MaximizeIcon, MoreOptionsIcon } from 'components/icon/icon';
+import {
+ CloseIcon,
+ IconType,
+ MaximizeIcon,
+ UnMaximizeIcon,
+ MoreOptionsIcon
+} from 'components/icon/icon';
import { PaperProps } from '@material-ui/core/Paper';
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
@@ -152,7 +158,7 @@ export const DataExplorer = withStyles(styles)(
items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
defaultViewIcon, defaultViewMessages, hideColumnSelector, actions, paperProps, hideSearchInput,
paperKey, fetchMode, currentItemUuid, title,
- doHidePanel, doMaximizePanel, panelName, panelMaximized, elementPath
+ doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName, panelMaximized, elementPath
} = this.props;
return <Paper className={classes.root} {...paperProps} key={paperKey} data-cy={this.props["data-cy"]}>
@@ -176,6 +182,10 @@ export const DataExplorer = withStyles(styles)(
columns={columns}
onColumnToggle={onColumnToggle} />}
</Grid>
+ { doUnMaximizePanel && panelMaximized &&
+ <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
+ <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
+ </Tooltip> }
{ doMaximizePanel && !panelMaximized &&
<Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
<IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index daa776a0..a6c118fc 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -66,7 +66,8 @@ import Computer from '@material-ui/icons/Computer';
import WrapText from '@material-ui/icons/WrapText';
import TextIncrease from '@material-ui/icons/ZoomIn';
import TextDecrease from '@material-ui/icons/ZoomOut';
-import CropFreeSharp from '@material-ui/icons/CropFreeSharp';
+import FullscreenSharp from '@material-ui/icons/FullscreenSharp';
+import FullscreenExitSharp from '@material-ui/icons/FullscreenExitSharp';
import ExitToApp from '@material-ui/icons/ExitToApp';
import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
@@ -167,7 +168,8 @@ export const FileInputIcon: IconType = (props) => <InsertDriveFile {...props} />
export const KeyIcon: IconType = (props) => <VpnKey {...props} />;
export const LogIcon: IconType = (props) => <SettingsEthernet {...props} />;
export const MailIcon: IconType = (props) => <Mail {...props} />;
-export const MaximizeIcon: IconType = (props) => <CropFreeSharp {...props} />;
+export const MaximizeIcon: IconType = (props) => <FullscreenSharp {...props} />;
+export const UnMaximizeIcon: IconType = (props) => <FullscreenExitSharp {...props} />;
export const MoreOptionsIcon: IconType = (props) => <MoreVert {...props} />;
export const MoveToIcon: IconType = (props) => <Input {...props} />;
export const NewProjectIcon: IconType = (props) => <CreateNewFolder {...props} />;
diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index 5fd444b5..28f0065a 100644
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -27,7 +27,15 @@ import {
CircularProgress,
} from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
-import { CloseIcon, ImageIcon, InputIcon, ImageOffIcon, OutputIcon, MaximizeIcon } from 'components/icon/icon';
+import {
+ CloseIcon,
+ ImageIcon,
+ InputIcon,
+ ImageOffIcon,
+ OutputIcon,
+ MaximizeIcon,
+ UnMaximizeIcon
+} from 'components/icon/icon';
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
import {
BooleanCommandInputParameter,
@@ -227,7 +235,7 @@ const mapDispatchToProps = (dispatch: Dispatch): ProcessIOCardActionProps => ({
type ProcessIOCardProps = ProcessIOCardDataProps & ProcessIOCardActionProps & WithStyles<CssRules> & MPVPanelProps;
export const ProcessIOCard = withStyles(styles)(connect(null, mapDispatchToProps)(
- ({ classes, label, params, raw, mounts, outputUuid, doHidePanel, doMaximizePanel, panelMaximized, panelName, process, navigateTo }: ProcessIOCardProps) => {
+ ({ classes, label, params, raw, mounts, outputUuid, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, navigateTo }: ProcessIOCardProps) => {
const [mainProcTabState, setMainProcTabState] = useState(0);
const handleMainProcTabChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
setMainProcTabState(value);
@@ -260,6 +268,10 @@ export const ProcessIOCard = withStyles(styles)(connect(null, mapDispatchToProps
{ mainProcess && <Tooltip title={"Toggle Image Preview"} disableFocusListener>
<IconButton data-cy="io-preview-image-toggle" onClick={() =>{setShowImagePreview(!showImagePreview)}}>{showImagePreview ? <ImageIcon /> : <ImageOffIcon />}</IconButton>
</Tooltip> }
+ { doUnMaximizePanel && panelMaximized &&
+ <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
+ <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
+ </Tooltip> }
{ doMaximizePanel && !panelMaximized &&
<Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
<IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
diff --git a/src/views/process-panel/process-log-card.tsx b/src/views/process-panel/process-log-card.tsx
index 936b31a5..f3b3831e 100644
--- a/src/views/process-panel/process-log-card.tsx
+++ b/src/views/process-panel/process-log-card.tsx
@@ -22,6 +22,7 @@ import {
CopyIcon,
LogIcon,
MaximizeIcon,
+ UnMaximizeIcon,
TextDecreaseIcon,
TextIncreaseIcon,
WordWrapOffIcon,
@@ -92,7 +93,7 @@ type ProcessLogsCardProps = ProcessLogsCardDataProps
export const ProcessLogsCard = withStyles(styles)(
({ classes, process, filters, selectedFilter, lines,
onLogFilterChange, navigateToLog, onCopy,
- doHidePanel, doMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) => {
+ doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) => {
const [wordWrap, setWordWrap] = useState<boolean>(true);
const [fontSize, setFontSize] = useState<number>(3);
const fontBaseSize = 10;
@@ -144,6 +145,10 @@ export const ProcessLogsCard = withStyles(styles)(
</IconButton>
</Tooltip>
</Grid>
+ { doUnMaximizePanel && panelMaximized &&
+ <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
+ <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
+ </Tooltip> }
{ doMaximizePanel && !panelMaximized &&
<Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
<IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
diff --git a/src/views/subprocess-panel/subprocess-panel-root.tsx b/src/views/subprocess-panel/subprocess-panel-root.tsx
index d4ccae9c..52fbc51f 100644
--- a/src/views/subprocess-panel/subprocess-panel-root.tsx
+++ b/src/views/subprocess-panel/subprocess-panel-root.tsx
@@ -91,6 +91,7 @@ export const SubprocessPanelRoot = (props: SubprocessPanelProps & MPVPanelProps)
defaultViewMessages={DEFAULT_VIEW_MESSAGES}
doHidePanel={props.doHidePanel}
doMaximizePanel={props.doMaximizePanel}
+ doUnMaximizePanel={props.doUnMaximizePanel}
panelMaximized={props.panelMaximized}
panelName={props.panelName} />;
};
commit 993c6c511af30163a2826d6992720b6be397943b
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Wed Oct 26 16:58:10 2022 -0300
19300: Adds un-maximize functionality to the MPV component suite.
When a panel is maximized, the un-maximize action restores the previous
panel state, unless another panel has been shown/hidden between the
maximize and un-maximize actions. In that edge case, the original panel
visibility state is restored.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index f4c3f3ba..6779bc35 100644
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -48,14 +48,15 @@ interface MPVHideablePanelDataProps {
interface MPVHideablePanelActionProps {
doHidePanel: () => void;
doMaximizePanel: () => void;
+ doUnMaximizePanel: () => void;
}
type MPVHideablePanelProps = MPVHideablePanelDataProps & MPVHideablePanelActionProps;
-const MPVHideablePanel = ({doHidePanel, doMaximizePanel, name, visible, maximized, illuminated, ...props}: MPVHideablePanelProps) =>
+const MPVHideablePanel = ({doHidePanel, doMaximizePanel, doUnMaximizePanel, name, visible, maximized, illuminated, ...props}: MPVHideablePanelProps) =>
visible
? <>
- {React.cloneElement((props.children as ReactElement), { doHidePanel, doMaximizePanel, panelName: name, panelMaximized: maximized, panelIlluminated: illuminated, panelRef: props.panelRef })}
+ {React.cloneElement((props.children as ReactElement), { doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName: name, panelMaximized: maximized, panelIlluminated: illuminated, panelRef: props.panelRef })}
</>
: null;
@@ -71,6 +72,7 @@ interface MPVPanelDataProps {
interface MPVPanelActionProps {
doHidePanel?: () => void;
doMaximizePanel?: () => void;
+ doUnMaximizePanel?: () => void;
}
// Props received by panel implementors
@@ -79,7 +81,7 @@ export type MPVPanelProps = MPVPanelDataProps & MPVPanelActionProps;
type MPVPanelContentProps = {children: ReactElement} & MPVPanelProps & GridProps;
// Grid item compatible component for layout and MPV props passing
-export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName,
+export const MPVPanelContent = ({doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName,
panelMaximized, panelIlluminated, panelRef, forwardProps, maxHeight,
...props}: MPVPanelContentProps) => {
useEffect(() => {
@@ -96,7 +98,7 @@ export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName,
<span ref={panelRef} /> {/* Element to scroll to when the panel is selected */}
<Paper style={{height: '100%'}} elevation={panelIlluminated ? 8 : 0}>
{ forwardProps
- ? React.cloneElement(props.children, { doHidePanel, doMaximizePanel, panelName, panelMaximized })
+ ? React.cloneElement(props.children, { doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName, panelMaximized })
: props.children }
</Paper>
</Grid>;
@@ -118,11 +120,12 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
} else if (!isArray(children)) {
children = [children];
}
- const visibility = (children as ReactNodeArray).map((_, idx) =>
+ const initialVisibility = (children as ReactNodeArray).map((_, idx) =>
!panelStates || // if panelStates wasn't passed, default to all visible panels
(panelStates[idx] &&
(panelStates[idx].visible || panelStates[idx].visible === undefined)));
- const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
+ const [panelVisibility, setPanelVisibility] = useState<boolean[]>(initialVisibility);
+ const [previousPanelVisibility, setPreviousPanelVisibility] = useState<boolean[]>(initialVisibility);
const [highlightedPanel, setHighlightedPanel] = useState<number>(-1);
const [selectedPanel, setSelectedPanel] = useState<number>(-1);
const panelRef = useRef<any>(null);
@@ -133,6 +136,7 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
if (isArray(children)) {
for (let idx = 0; idx < children.length; idx++) {
const showFn = (idx: number) => () => {
+ setPreviousPanelVisibility(initialVisibility);
setPanelVisibility([
...panelVisibility.slice(0, idx),
true,
@@ -141,6 +145,7 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
setSelectedPanel(idx);
};
const hideFn = (idx: number) => () => {
+ setPreviousPanelVisibility(initialVisibility);
setPanelVisibility([
...panelVisibility.slice(0, idx),
false,
@@ -148,13 +153,18 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
])
};
const maximizeFn = (idx: number) => () => {
+ setPreviousPanelVisibility(panelVisibility);
// Maximize X == hide all but X
setPanelVisibility([
...panelVisibility.slice(0, idx).map(() => false),
true,
...panelVisibility.slice(idx+1).map(() => false),
- ])
+ ]);
};
+ const unMaximizeFn = (idx: number) => () => {
+ setPanelVisibility(previousPanelVisibility);
+ setSelectedPanel(idx);
+ }
const panelName = panelStates === undefined
? `Panel ${idx+1}`
: (panelStates[idx] && panelStates[idx].name) || `Panel ${idx+1}`;
@@ -188,7 +198,7 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
<MPVHideablePanel key={idx} visible={panelVisibility[idx]} name={panelName}
panelRef={(idx === selectedPanel) ? panelRef : undefined}
maximized={panelIsMaximized} illuminated={idx === highlightedPanel}
- doHidePanel={hideFn(idx)} doMaximizePanel={maximizeFn(idx)}>
+ doHidePanel={hideFn(idx)} doMaximizePanel={maximizeFn(idx)} doUnMaximizePanel={panelIsMaximized ? unMaximizeFn(idx) : () => null}>
{children[idx]}
</MPVHideablePanel>;
panels = [...panels, aPanel];
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list