Skip to content

Commit 120097d

Browse files
longshuicylongshuicy
authored
1092 enhanced visualization layout (#1137)
* add expand * add fullscreen button
1 parent ced3e15 commit 120097d

File tree

6 files changed

+218
-66
lines changed

6 files changed

+218
-66
lines changed

‎frontend/src/components/visualizations/PublicVisualizationCard.tsx‎

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1-
import React, { useState } from "react";
2-
import { Button, Card, CardActions, CardContent, Grid } from "@mui/material";
1+
import React, { useEffect, useState } from "react";
2+
import {
3+
Button,
4+
Card,
5+
CardActions,
6+
CardContent,
7+
Grid,
8+
IconButton,
9+
} from "@mui/material";
310
import Collapse from "@mui/material/Collapse";
411
import { VisualizationDataDetail } from "./VisualizationDataDetail";
512
import { VisualizationDataOut } from "../../openapi/v2";
@@ -11,6 +18,8 @@ import {
1118
generatePublicVisPresignedUrl as generatePublicVisPresignedUrlAction,
1219
RESET_PUBLIC_VIS_DATA_PRESIGNED_URL,
1320
} from "../../actions/public_visualization";
21+
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
22+
import FullscreenIcon from "@mui/icons-material/Fullscreen";
1423

1524
type publicPreviewProps = {
1625
publicVisComponentDefinition: VisComponentDefinitions;
@@ -19,7 +28,8 @@ type publicPreviewProps = {
1928

2029
export const PublicVisualizationCard = (props: publicPreviewProps) => {
2130
const { publicVisComponentDefinition, publicVisualizationDataItem } = props;
22-
const [expanded, setExpanded] = React.useState(false);
31+
const [expandInfo, setExpandInfo] = React.useState(false);
32+
const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
2333
const [visShareModalOpen, setVisShareModalOpen] = useState(false);
2434
// share visualization
2535
const dispatch = useDispatch();
@@ -34,8 +44,12 @@ export const PublicVisualizationCard = (props: publicPreviewProps) => {
3444
(state: RootState) => state.publicVisualization.publicPresignedUrl
3545
);
3646

47+
useEffect(() => {
48+
if (expandInfo) setFullscreen(false);
49+
}, [expandInfo]);
50+
3751
const handleExpandClick = () => {
38-
setExpanded(!expanded);
52+
setExpandInfo(!expandInfo);
3953
};
4054

4155
const handleShareLinkClick = () => {
@@ -50,38 +64,46 @@ export const PublicVisualizationCard = (props: publicPreviewProps) => {
5064
dispatch({ type: RESET_PUBLIC_VIS_DATA_PRESIGNED_URL });
5165
};
5266

67+
const handleFullscreenToggle = () => {
68+
setFullscreen(!fullscreen);
69+
};
70+
5371
return (
54-
<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
55-
<Card>
72+
<Grid
73+
item
74+
xs={12}
75+
sm={fullscreen ? 12 : 4}
76+
md={fullscreen ? 12 : 4}
77+
lg={fullscreen ? 12 : 4}
78+
xl={fullscreen ? 12 : 4}
79+
>
80+
<Card sx={{ height: "100%" }}>
5681
<PresignedUrlShareModal
5782
presignedUrl={presignedUrl}
5883
presignedUrlShareModalOpen={visShareModalOpen}
5984
setPresignedUrlShareModalOpen={setVisShareModalOpen}
6085
setPresignedUrlShareModalClose={setVisShareModalClose}
6186
/>
62-
<Collapse in={!expanded} timeout="auto" unmountOnExit>
87+
<Collapse in={!expandInfo} timeout="auto" unmountOnExit>
6388
<CardContent>
6489
{React.cloneElement(publicVisComponentDefinition.component, {
6590
publicView: true,
6691
visualizationId: publicVisualizationDataItem.id,
6792
})}
6893
</CardContent>
6994
</Collapse>
70-
<CardActions sx={{ padding: "0 auto" }}>
71-
{!expanded ? (
72-
<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
73-
Learn More
74-
</Button>
75-
) : (
76-
<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
77-
View
95+
<CardActions sx={{ display: "flex", justifyContent: "space-between" }}>
96+
<div>
97+
<Button onClick={handleExpandClick}>
98+
{expandInfo ? "View" : "Learn More"}
7899
</Button>
79-
)}
80-
<Button onClick={handleShareLinkClick} sx={{ marginLeft: "auto" }}>
81-
Share Link
82-
</Button>
100+
<Button onClick={handleShareLinkClick}>Share Link</Button>
101+
</div>
102+
<IconButton onClick={handleFullscreenToggle}>
103+
{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
104+
</IconButton>
83105
</CardActions>
84-
<Collapse in={expanded} timeout="auto" unmountOnExit>
106+
<Collapse in={expandInfo} timeout="auto" unmountOnExit>
85107
<CardContent>
86108
<VisualizationDataDetail
87109
visualizationDataItem={publicVisualizationDataItem}

‎frontend/src/components/visualizations/PublicVisualizationRawBytesCard.tsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import React from "react";
2-
import { Card, CardContent, Grid } from "@mui/material";
2+
import {
3+
Card,
4+
CardActions,
5+
CardContent,
6+
Grid,
7+
IconButton,
8+
} from "@mui/material";
39
import { VisComponentDefinitions } from "../../visualization.config";
10+
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
11+
import FullscreenIcon from "@mui/icons-material/Fullscreen";
412

513
type publicPreviewProps = {
614
fileId?: string;
@@ -9,15 +17,32 @@ type publicPreviewProps = {
917

1018
export const PublicVisualizationRawBytesCard = (props: publicPreviewProps) => {
1119
const { visComponentDefinition, fileId } = props;
20+
const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
21+
const handleFullscreenToggle = () => {
22+
setFullscreen(!fullscreen);
23+
};
24+
1225
return (
13-
<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
14-
<Card>
26+
<Grid
27+
item
28+
xs={12}
29+
sm={fullscreen ? 12 : 4}
30+
md={fullscreen ? 12 : 4}
31+
lg={fullscreen ? 12 : 4}
32+
xl={fullscreen ? 12 : 4}
33+
>
34+
<Card sx={{ height: "100%" }}>
1535
<CardContent>
1636
{React.cloneElement(visComponentDefinition.component, {
1737
fileId: fileId,
1838
publicView: true,
1939
})}
2040
</CardContent>
41+
<CardActions sx={{ float: "right" }}>
42+
<IconButton onClick={handleFullscreenToggle}>
43+
{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
44+
</IconButton>
45+
</CardActions>
2146
</Card>
2247
</Grid>
2348
);

‎frontend/src/components/visualizations/PublicVisualizationSpecCard.tsx‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
1-
import React from "react";
2-
import { Button, Card, CardActions, CardContent, Grid } from "@mui/material";
1+
import React, { useEffect } from "react";
2+
import {
3+
Button,
4+
Card,
5+
CardActions,
6+
CardContent,
7+
Grid,
8+
IconButton,
9+
} from "@mui/material";
310
import Collapse from "@mui/material/Collapse";
411
import { VisualizationConfigOut } from "../../openapi/v2";
512
import { VisComponentDefinitions } from "../../visualization.config";
613
import { VisualizationParamDetail } from "./VisualizationParamDetail";
14+
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
15+
import FullscreenIcon from "@mui/icons-material/Fullscreen";
716

817
type publicPreviewProps = {
918
visComponentDefinition: VisComponentDefinitions;
@@ -12,22 +21,39 @@ type publicPreviewProps = {
1221

1322
export const PublicVisualizationSpecCard = (props: publicPreviewProps) => {
1423
const { visComponentDefinition, visConfigEntry } = props;
15-
const [expanded, setExpanded] = React.useState(false);
24+
const [expandInfo, setExpandInfo] = React.useState(false);
25+
const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
26+
useEffect(() => {
27+
if (expandInfo) setFullscreen(false);
28+
}, [expandInfo]);
29+
1630
const handleExpandClick = () => {
17-
setExpanded(!expanded);
31+
setExpandInfo(!expandInfo);
32+
};
33+
34+
const handleFullscreenToggle = () => {
35+
setFullscreen(!fullscreen);
1836
};
37+
1938
return (
20-
<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
21-
<Card>
22-
<Collapse in={!expanded} timeout="auto" unmountOnExit>
39+
<Grid
40+
item
41+
xs={12}
42+
sm={fullscreen ? 12 : 4}
43+
md={fullscreen ? 12 : 4}
44+
lg={fullscreen ? 12 : 4}
45+
xl={fullscreen ? 12 : 4}
46+
>
47+
<Card sx={{ height: "100%" }}>
48+
<Collapse in={!expandInfo} timeout="auto" unmountOnExit>
2349
<CardContent>
2450
{React.cloneElement(visComponentDefinition.component, {
2551
visConfigEntry: visConfigEntry,
2652
})}
2753
</CardContent>
2854
</Collapse>
29-
<CardActions sx={{ padding: "0 auto" }}>
30-
{!expanded ? (
55+
<CardActions sx={{ display: "flex", justifyContent: "space-between" }}>
56+
{!expandInfo ? (
3157
<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
3258
Learn More
3359
</Button>
@@ -36,8 +62,11 @@ export const PublicVisualizationSpecCard = (props: publicPreviewProps) => {
3662
View
3763
</Button>
3864
)}
65+
<IconButton onClick={handleFullscreenToggle}>
66+
{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
67+
</IconButton>
3968
</CardActions>
40-
<Collapse in={expanded} timeout="auto" unmountOnExit>
69+
<Collapse in={expandInfo} timeout="auto" unmountOnExit>
4170
<CardContent>
4271
<VisualizationParamDetail visConfigEntry={visConfigEntry} />
4372
</CardContent>

‎frontend/src/components/visualizations/VisualizationCard.tsx‎

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1-
import React, { useState } from "react";
2-
import { Button, Card, CardActions, CardContent, Grid } from "@mui/material";
1+
import React, { useState, useEffect } from "react";
2+
import {
3+
Button,
4+
Card,
5+
CardActions,
6+
CardContent,
7+
Grid,
8+
IconButton,
9+
} from "@mui/material";
310
import Collapse from "@mui/material/Collapse";
11+
import FullscreenIcon from "@mui/icons-material/Fullscreen";
12+
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
413
import { VisualizationDataDetail } from "./VisualizationDataDetail";
514
import { VisualizationDataOut } from "../../openapi/v2";
615
import { VisComponentDefinitions } from "../../visualization.config";
@@ -19,7 +28,8 @@ type previewProps = {
1928

2029
export const VisualizationCard = (props: previewProps) => {
2130
const { visComponentDefinition, visualizationDataItem } = props;
22-
const [expanded, setExpanded] = React.useState(false);
31+
const [expandInfo, setExpandInfo] = React.useState(false);
32+
const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
2333
const [visShareModalOpen, setVisShareModalOpen] = useState(false);
2434

2535
// share visualization
@@ -33,8 +43,12 @@ export const VisualizationCard = (props: previewProps) => {
3343
(state: RootState) => state.visualization.presignedUrl
3444
);
3545

46+
useEffect(() => {
47+
if (expandInfo) setFullscreen(false);
48+
}, [expandInfo]);
49+
3650
const handleExpandClick = () => {
37-
setExpanded(!expanded);
51+
setExpandInfo(!expandInfo);
3852
};
3953

4054
const handleShareLinkClick = () => {
@@ -46,37 +60,45 @@ export const VisualizationCard = (props: previewProps) => {
4660
dispatch({ type: RESET_VIS_DATA_PRESIGNED_URL });
4761
};
4862

63+
const handleFullscreenToggle = () => {
64+
setFullscreen(!fullscreen);
65+
};
66+
4967
return (
50-
<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
51-
<Card>
68+
<Grid
69+
item
70+
xs={12}
71+
sm={fullscreen ? 12 : 4}
72+
md={fullscreen ? 12 : 4}
73+
lg={fullscreen ? 12 : 4}
74+
xl={fullscreen ? 12 : 4}
75+
>
76+
<Card sx={{ height: "100%" }}>
5277
<PresignedUrlShareModal
5378
presignedUrl={presignedUrl}
5479
presignedUrlShareModalOpen={visShareModalOpen}
5580
setPresignedUrlShareModalOpen={setVisShareModalOpen}
5681
setPresignedUrlShareModalClose={setVisShareModalClose}
5782
/>
58-
<Collapse in={!expanded} timeout="auto" unmountOnExit>
83+
<Collapse in={!expandInfo} timeout="auto" unmountOnExit>
5984
<CardContent>
6085
{React.cloneElement(visComponentDefinition.component, {
6186
visualizationId: visualizationDataItem.id,
6287
})}
6388
</CardContent>
6489
</Collapse>
65-
<CardActions sx={{ padding: "0 auto" }}>
66-
{!expanded ? (
67-
<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
68-
Learn More
69-
</Button>
70-
) : (
71-
<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
72-
View
90+
<CardActions sx={{ display: "flex", justifyContent: "space-between" }}>
91+
<div>
92+
<Button onClick={handleExpandClick}>
93+
{expandInfo ? "View" : "Learn More"}
7394
</Button>
74-
)}
75-
<Button onClick={handleShareLinkClick} sx={{ marginLeft: "auto" }}>
76-
Share Link
77-
</Button>
95+
<Button onClick={handleShareLinkClick}>Share Link</Button>
96+
</div>
97+
<IconButton onClick={handleFullscreenToggle}>
98+
{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
99+
</IconButton>
78100
</CardActions>
79-
<Collapse in={expanded} timeout="auto" unmountOnExit>
101+
<Collapse in={expandInfo} timeout="auto" unmountOnExit>
80102
<CardContent>
81103
<VisualizationDataDetail
82104
visualizationDataItem={visualizationDataItem}

‎frontend/src/components/visualizations/VisualizationRawBytesCard.tsx‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import React from "react";
2-
import { Card, CardContent, Grid } from "@mui/material";
2+
import {
3+
Card,
4+
CardActions,
5+
CardContent,
6+
Grid,
7+
IconButton,
8+
} from "@mui/material";
39
import { VisComponentDefinitions } from "../../visualization.config";
10+
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
11+
import FullscreenIcon from "@mui/icons-material/Fullscreen";
412

513
type previewProps = {
614
fileId?: string;
@@ -9,15 +17,31 @@ type previewProps = {
917

1018
export const VisualizationRawBytesCard = (props: previewProps) => {
1119
const { visComponentDefinition, fileId } = props;
20+
const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
21+
const handleFullscreenToggle = () => {
22+
setFullscreen(!fullscreen);
23+
};
1224

1325
return (
14-
<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
15-
<Card>
26+
<Grid
27+
item
28+
xs={12}
29+
sm={fullscreen ? 12 : 4}
30+
md={fullscreen ? 12 : 4}
31+
lg={fullscreen ? 12 : 4}
32+
xl={fullscreen ? 12 : 4}
33+
>
34+
<Card sx={{ height: "100%" }}>
1635
<CardContent>
1736
{React.cloneElement(visComponentDefinition.component, {
1837
fileId: fileId,
1938
})}
2039
</CardContent>
40+
<CardActions sx={{ float: "right" }}>
41+
<IconButton onClick={handleFullscreenToggle}>
42+
{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
43+
</IconButton>
44+
</CardActions>
2145
</Card>
2246
</Grid>
2347
);

0 commit comments

Comments
 (0)