-
Notifications
You must be signed in to change notification settings - Fork 83
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Vector Visualization Page] Graph (#85)
* initial setup graph * single color visualise * random color * parsed data fuction * bug error management * id bug * multivector support and view point modal * intro for visualization query editor * visualize tab on the collection page, outlined dismiss button, removed unnecessary SnakbarProvider, updated visual design in ViewPointModal + small refactoring * a collection name title and a back to collection button on Visualize page * fix chart header * Resize Visulaize chart resolved --------- Co-authored-by: Kartik Gupta <[email protected]> Co-authored-by: generall <[email protected]> Co-authored-by: trean <[email protected]>
- Loading branch information
4 people
authored
Jul 29, 2023
1 parent
3b572a3
commit f83e560
Showing
15 changed files
with
599 additions
and
201 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { JsonViewer } from "@textea/json-viewer"; | ||
| import { useTheme } from "@mui/material/styles"; | ||
| import { Divider, Grid, Typography } from "@mui/material"; | ||
|
|
||
| export const PointPayloadList = function({data}) { | ||
| const theme = useTheme(); | ||
|
|
||
| return Object.keys(data.payload).map((key) => { | ||
| return ( | ||
| <div key={key}> | ||
| <Grid container spacing={2}> | ||
| <Grid item xs={3} my={1}> | ||
| <Typography | ||
| variant="subtitle1" | ||
| display={"inline"} | ||
| fontWeight={600} | ||
| sx={{wordBreak: "break-word"}} | ||
| > | ||
| {key} | ||
| </Typography> | ||
| </Grid> | ||
|
|
||
| <Grid item xs={9} my={1}> | ||
| {typeof data.payload[key] === "object" ? ( | ||
| <Typography variant="subtitle1"> | ||
| {" "} | ||
| <JsonViewer | ||
| theme={theme.palette.mode} | ||
| value={data.payload[key]} | ||
| displayDataTypes={false} | ||
| defaultInspectDepth={0} | ||
| rootName={false} | ||
| />{" "} | ||
| </Typography> | ||
| ) : ( | ||
| <Typography | ||
| variant="subtitle1" | ||
| color="text.secondary" | ||
| display={"inline"} | ||
| > | ||
| {"\t"} {data.payload[key].toString()} | ||
| </Typography> | ||
| )} | ||
| </Grid> | ||
| </Grid> | ||
| <Divider/> | ||
| </div> | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| PointPayloadList.propTypes = { | ||
| data: PropTypes.object.isRequired, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { | ||
| Alert, | ||
| Box, | ||
| Button, | ||
| Dialog, | ||
| DialogContent, | ||
| DialogActions, | ||
| DialogTitle, | ||
| IconButton, | ||
| Paper, | ||
| Tooltip, | ||
| Typography, | ||
| Snackbar, | ||
| } from "@mui/material"; | ||
| import { alpha } from "@mui/material"; | ||
| import { useTheme } from "@mui/material/styles"; | ||
| import { CopyAll } from "@mui/icons-material"; | ||
| import { PointPayloadList } from "../Points/PointPayloadList"; | ||
|
|
||
| const ViewPointModal = (props) => { | ||
| const theme = useTheme(); | ||
| const [openTooltip, setOpenTooltip] = React.useState(false); | ||
| const { openViewPoints, setOpenViewPoints, viewPoints } = props; | ||
|
|
||
| return ( | ||
| <> | ||
| <Dialog open={openViewPoints} onClose={() => setOpenViewPoints(false)} | ||
| scroll={"paper"} maxWidth={"lg"} fullWidth={true}> | ||
| <DialogTitle id="scroll-dialog-title">Selected Points</DialogTitle> | ||
| <DialogContent> | ||
| {viewPoints.length > 0 ? ( | ||
| <> | ||
| {viewPoints.map((point, index) => ( | ||
| <Paper key={`${index}-${point.id}`}> | ||
| <Box | ||
| sx={{ | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| background: alpha(theme.palette.primary.main, | ||
| 0.05), | ||
| px: 3, | ||
| py: 2, | ||
| }}> | ||
| <Typography variant="h6" component="h2" | ||
| > | ||
| Point {point.id} | ||
| </Typography> | ||
|
|
||
| <Tooltip title="Copy JSON" placement="left"> | ||
| <IconButton | ||
| aria-label="copy point" | ||
| onClick={() => { | ||
| navigator.clipboard.writeText( | ||
| JSON.stringify(point), | ||
| ); | ||
| setOpenTooltip(true); | ||
| }} | ||
| > | ||
| <CopyAll/> | ||
| </IconButton> | ||
| </Tooltip> | ||
| </Box> | ||
| <Box px={3} pt={1} pb={5}> | ||
| <PointPayloadList data={point} sx={{ px: 3, py: 4 }}/> | ||
| </Box> | ||
| </Paper> | ||
| ))} | ||
| </> | ||
| ) : ( | ||
| <Typography variant="h6" component="h2"> | ||
| no points selected | ||
| </Typography> | ||
| )} | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button onClick={() => setOpenViewPoints(false)}>Close</Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| <Snackbar | ||
| open={openTooltip} | ||
| severity="success" | ||
| autoHideDuration={3000} | ||
| onClose={() => setOpenTooltip(false)} | ||
| > | ||
| <Alert severity="success" sx={{ width: "100%" }}> | ||
| Point JSON copied to clipboard. | ||
| </Alert> | ||
| </Snackbar> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| ViewPointModal.propTypes = { | ||
| openViewPoints: PropTypes.bool.isRequired, | ||
| setOpenViewPoints: PropTypes.func.isRequired, | ||
| viewPoints: PropTypes.array.isRequired, | ||
| }; | ||
|
|
||
| export default ViewPointModal; |
Oops, something went wrong.