Skip to content

Commit

Permalink
1092 enhanced visualization layout (#1137)
Browse files Browse the repository at this point in the history 
* add expand

* add fullscreen button
  • Loading branch information
@longshuicy
longshuicy authored Jul 18, 2024
1 parent ced3e15 commit 120097d
Show file tree
Hide file tree
Showing 6 changed files with 218 additions and 66 deletions.
62 changes: 42 additions & 20 deletions frontend/src/components/visualizations/PublicVisualizationCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import React, { useState } from "react";
import { Button, Card, CardActions, CardContent, Grid } from "@mui/material";
import React, { useEffect, useState } from "react";
import {
Button,
Card,
CardActions,
CardContent,
Grid,
IconButton,
} from "@mui/material";
import Collapse from "@mui/material/Collapse";
import { VisualizationDataDetail } from "./VisualizationDataDetail";
import { VisualizationDataOut } from "../../openapi/v2";
Expand All @@ -11,6 +18,8 @@ import {
generatePublicVisPresignedUrl as generatePublicVisPresignedUrlAction,
RESET_PUBLIC_VIS_DATA_PRESIGNED_URL,
} from "../../actions/public_visualization";
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
import FullscreenIcon from "@mui/icons-material/Fullscreen";

type publicPreviewProps = {
publicVisComponentDefinition: VisComponentDefinitions;
Expand All @@ -19,7 +28,8 @@ type publicPreviewProps = {

export const PublicVisualizationCard = (props: publicPreviewProps) => {
const { publicVisComponentDefinition, publicVisualizationDataItem } = props;
const [expanded, setExpanded] = React.useState(false);
const [expandInfo, setExpandInfo] = React.useState(false);
const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
const [visShareModalOpen, setVisShareModalOpen] = useState(false);
// share visualization
const dispatch = useDispatch();
Expand All @@ -34,8 +44,12 @@ export const PublicVisualizationCard = (props: publicPreviewProps) => {
(state: RootState) => state.publicVisualization.publicPresignedUrl
);

useEffect(() => {
if (expandInfo) setFullscreen(false);
}, [expandInfo]);

const handleExpandClick = () => {
setExpanded(!expanded);
setExpandInfo(!expandInfo);
};

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

const handleFullscreenToggle = () => {
setFullscreen(!fullscreen);
};

return (
<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
<Card>
<Grid
item
xs={12}
sm={fullscreen ? 12 : 4}
md={fullscreen ? 12 : 4}
lg={fullscreen ? 12 : 4}
xl={fullscreen ? 12 : 4}
>
<Card sx={{ height: "100%" }}>
<PresignedUrlShareModal
presignedUrl={presignedUrl}
presignedUrlShareModalOpen={visShareModalOpen}
setPresignedUrlShareModalOpen={setVisShareModalOpen}
setPresignedUrlShareModalClose={setVisShareModalClose}
/>
<Collapse in={!expanded} timeout="auto" unmountOnExit>
<Collapse in={!expandInfo} timeout="auto" unmountOnExit>
<CardContent>
{React.cloneElement(publicVisComponentDefinition.component, {
publicView: true,
visualizationId: publicVisualizationDataItem.id,
})}
</CardContent>
</Collapse>
<CardActions sx={{ padding: "0 auto" }}>
{!expanded ? (
<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
Learn More
</Button>
) : (
<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
View
<CardActions sx={{ display: "flex", justifyContent: "space-between" }}>
<div>
<Button onClick={handleExpandClick}>
{expandInfo ? "View" : "Learn More"}
</Button>
)}
<Button onClick={handleShareLinkClick} sx={{ marginLeft: "auto" }}>
Share Link
</Button>
<Button onClick={handleShareLinkClick}>Share Link</Button>
</div>
<IconButton onClick={handleFullscreenToggle}>
{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
</IconButton>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<Collapse in={expandInfo} timeout="auto" unmountOnExit>
<CardContent>
<VisualizationDataDetail
visualizationDataItem={publicVisualizationDataItem}
Expand Down
31 changes: 28 additions & 3 deletions frontend/src/components/visualizations/PublicVisualizationRawBytesCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import React from "react";
import { Card, CardContent, Grid } from "@mui/material";
import {
Card,
CardActions,
CardContent,
Grid,
IconButton,
} from "@mui/material";
import { VisComponentDefinitions } from "../../visualization.config";
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
import FullscreenIcon from "@mui/icons-material/Fullscreen";

type publicPreviewProps = {
fileId?: string;
Expand All @@ -9,15 +17,32 @@ type publicPreviewProps = {

export const PublicVisualizationRawBytesCard = (props: publicPreviewProps) => {
const { visComponentDefinition, fileId } = props;
const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
const handleFullscreenToggle = () => {
setFullscreen(!fullscreen);
};

return (
<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
<Card>
<Grid
item
xs={12}
sm={fullscreen ? 12 : 4}
md={fullscreen ? 12 : 4}
lg={fullscreen ? 12 : 4}
xl={fullscreen ? 12 : 4}
>
<Card sx={{ height: "100%" }}>
<CardContent>
{React.cloneElement(visComponentDefinition.component, {
fileId: fileId,
publicView: true,
})}
</CardContent>
<CardActions sx={{ float: "right" }}>
<IconButton onClick={handleFullscreenToggle}>
{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
</IconButton>
</CardActions>
</Card>
</Grid>
);
Expand Down
49 changes: 39 additions & 10 deletions frontend/src/components/visualizations/PublicVisualizationSpecCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
import React from "react";
import { Button, Card, CardActions, CardContent, Grid } from "@mui/material";
import React, { useEffect } from "react";
import {
Button,
Card,
CardActions,
CardContent,
Grid,
IconButton,
} from "@mui/material";
import Collapse from "@mui/material/Collapse";
import { VisualizationConfigOut } from "../../openapi/v2";
import { VisComponentDefinitions } from "../../visualization.config";
import { VisualizationParamDetail } from "./VisualizationParamDetail";
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
import FullscreenIcon from "@mui/icons-material/Fullscreen";

type publicPreviewProps = {
visComponentDefinition: VisComponentDefinitions;
Expand All @@ -12,22 +21,39 @@ type publicPreviewProps = {

export const PublicVisualizationSpecCard = (props: publicPreviewProps) => {
const { visComponentDefinition, visConfigEntry } = props;
const [expanded, setExpanded] = React.useState(false);
const [expandInfo, setExpandInfo] = React.useState(false);
const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
useEffect(() => {
if (expandInfo) setFullscreen(false);
}, [expandInfo]);

const handleExpandClick = () => {
setExpanded(!expanded);
setExpandInfo(!expandInfo);
};

const handleFullscreenToggle = () => {
setFullscreen(!fullscreen);
};

return (
<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
<Card>
<Collapse in={!expanded} timeout="auto" unmountOnExit>
<Grid
item
xs={12}
sm={fullscreen ? 12 : 4}
md={fullscreen ? 12 : 4}
lg={fullscreen ? 12 : 4}
xl={fullscreen ? 12 : 4}
>
<Card sx={{ height: "100%" }}>
<Collapse in={!expandInfo} timeout="auto" unmountOnExit>
<CardContent>
{React.cloneElement(visComponentDefinition.component, {
visConfigEntry: visConfigEntry,
})}
</CardContent>
</Collapse>
<CardActions sx={{ padding: "0 auto" }}>
{!expanded ? (
<CardActions sx={{ display: "flex", justifyContent: "space-between" }}>
{!expandInfo ? (
<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
Learn More
</Button>
Expand All @@ -36,8 +62,11 @@ export const PublicVisualizationSpecCard = (props: publicPreviewProps) => {
View
</Button>
)}
<IconButton onClick={handleFullscreenToggle}>
{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
</IconButton>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<Collapse in={expandInfo} timeout="auto" unmountOnExit>
<CardContent>
<VisualizationParamDetail visConfigEntry={visConfigEntry} />
</CardContent>
Expand Down
62 changes: 42 additions & 20 deletions frontend/src/components/visualizations/VisualizationCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import React, { useState } from "react";
import { Button, Card, CardActions, CardContent, Grid } from "@mui/material";
import React, { useState, useEffect } from "react";
import {
Button,
Card,
CardActions,
CardContent,
Grid,
IconButton,
} from "@mui/material";
import Collapse from "@mui/material/Collapse";
import FullscreenIcon from "@mui/icons-material/Fullscreen";
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
import { VisualizationDataDetail } from "./VisualizationDataDetail";
import { VisualizationDataOut } from "../../openapi/v2";
import { VisComponentDefinitions } from "../../visualization.config";
Expand All @@ -19,7 +28,8 @@ type previewProps = {

export const VisualizationCard = (props: previewProps) => {
const { visComponentDefinition, visualizationDataItem } = props;
const [expanded, setExpanded] = React.useState(false);
const [expandInfo, setExpandInfo] = React.useState(false);
const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
const [visShareModalOpen, setVisShareModalOpen] = useState(false);

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

useEffect(() => {
if (expandInfo) setFullscreen(false);
}, [expandInfo]);

const handleExpandClick = () => {
setExpanded(!expanded);
setExpandInfo(!expandInfo);
};

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

const handleFullscreenToggle = () => {
setFullscreen(!fullscreen);
};

return (
<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
<Card>
<Grid
item
xs={12}
sm={fullscreen ? 12 : 4}
md={fullscreen ? 12 : 4}
lg={fullscreen ? 12 : 4}
xl={fullscreen ? 12 : 4}
>
<Card sx={{ height: "100%" }}>
<PresignedUrlShareModal
presignedUrl={presignedUrl}
presignedUrlShareModalOpen={visShareModalOpen}
setPresignedUrlShareModalOpen={setVisShareModalOpen}
setPresignedUrlShareModalClose={setVisShareModalClose}
/>
<Collapse in={!expanded} timeout="auto" unmountOnExit>
<Collapse in={!expandInfo} timeout="auto" unmountOnExit>
<CardContent>
{React.cloneElement(visComponentDefinition.component, {
visualizationId: visualizationDataItem.id,
})}
</CardContent>
</Collapse>
<CardActions sx={{ padding: "0 auto" }}>
{!expanded ? (
<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
Learn More
</Button>
) : (
<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
View
<CardActions sx={{ display: "flex", justifyContent: "space-between" }}>
<div>
<Button onClick={handleExpandClick}>
{expandInfo ? "View" : "Learn More"}
</Button>
)}
<Button onClick={handleShareLinkClick} sx={{ marginLeft: "auto" }}>
Share Link
</Button>
<Button onClick={handleShareLinkClick}>Share Link</Button>
</div>
<IconButton onClick={handleFullscreenToggle}>
{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
</IconButton>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<Collapse in={expandInfo} timeout="auto" unmountOnExit>
<CardContent>
<VisualizationDataDetail
visualizationDataItem={visualizationDataItem}
Expand Down
30 changes: 27 additions & 3 deletions frontend/src/components/visualizations/VisualizationRawBytesCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import React from "react";
import { Card, CardContent, Grid } from "@mui/material";
import {
Card,
CardActions,
CardContent,
Grid,
IconButton,
} from "@mui/material";
import { VisComponentDefinitions } from "../../visualization.config";
import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
import FullscreenIcon from "@mui/icons-material/Fullscreen";

type previewProps = {
fileId?: string;
Expand All @@ -9,15 +17,31 @@ type previewProps = {

export const VisualizationRawBytesCard = (props: previewProps) => {
const { visComponentDefinition, fileId } = props;
const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
const handleFullscreenToggle = () => {
setFullscreen(!fullscreen);
};

return (
<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
<Card>
<Grid
item
xs={12}
sm={fullscreen ? 12 : 4}
md={fullscreen ? 12 : 4}
lg={fullscreen ? 12 : 4}
xl={fullscreen ? 12 : 4}
>
<Card sx={{ height: "100%" }}>
<CardContent>
{React.cloneElement(visComponentDefinition.component, {
fileId: fileId,
})}
</CardContent>
<CardActions sx={{ float: "right" }}>
<IconButton onClick={handleFullscreenToggle}>
{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
</IconButton>
</CardActions>
</Card>
</Grid>
);
Expand Down
Loading

0 comments on commit 120097d

Please sign in to comment.