Skip to content

Commit

Permalink
CELE-32 style: Apply biome format
Browse files Browse the repository at this point in the history
  • Loading branch information
@afonsobspinto
afonsobspinto committed Aug 1, 2024
1 parent 914cea1 commit 34a8094
Show file tree
Hide file tree
Showing 15 changed files with 1,772 additions and 1,828 deletions.
2 changes: 1 addition & 1 deletion applications/visualizer/frontend/src/components/ViewerContainer/CompareWorkspaceDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Box, Button, Dialog, FormLabel, IconButton, TextField, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import { CaretIcon, CheckIcon, CloseIcon } from "../../icons";
import {Dataset, Neuron, NeuronsService} from "../../rest";
import { type Dataset, type Neuron, NeuronsService } from "../../rest";
import { vars as colors } from "../../theme/variables.ts";
import CustomAutocomplete from "../CustomAutocomplete.tsx";

Expand Down
2 changes: 1 addition & 1 deletion applications/visualizer/frontend/src/components/viewers/ThreeD/ThreeDViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import Gizmo from "./Gizmo.tsx";
import Loader from "./Loader.tsx";
import STLViewer from "./STLViewer.tsx";
import SceneControls from "./SceneControls.tsx";
import {Dataset} from "../../../rest";
import type { Dataset } from "../../../rest";

const { gray100, gray600 } = vars;
export interface Instance {
Expand Down
502 changes: 245 additions & 257 deletions applications/visualizer/frontend/src/components/viewers/TwoD/ContextMenu.tsx
View file

Large diffs are not rendered by default.

223 changes: 111 additions & 112 deletions applications/visualizer/frontend/src/components/viewers/TwoD/TwoDLegend.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,137 +1,136 @@
import {Box, Divider, IconButton, Typography} from "@mui/material";
import { Box, Divider, IconButton, Typography } from "@mui/material";
import type React from "react";
import {type ColoringOptions, getColorMap, legendNodeNameMapping} from "../../../helpers/twoD/coloringHelper";
import {LegendType, connectionsLegend, annotationLegend} from "../../../settings/twoDSettings";
import {vars} from "../../../theme/variables";
import { type ColoringOptions, getColorMap, legendNodeNameMapping } from "../../../helpers/twoD/coloringHelper";
import { LegendType, connectionsLegend, annotationLegend } from "../../../settings/twoDSettings";
import { vars } from "../../../theme/variables";

const {gray100} = vars;
const { gray100 } = vars;

interface LegendNodeProps {
name: string;
color: string;
onClick: () => void;
highlighted: boolean
name: string;
color: string;
onClick: () => void;
highlighted: boolean;
}

interface LegendConnectionProps {
name: string;
icon: JSX.Element;
onClick: () => void;
highlighted: boolean;
name: string;
icon: JSX.Element;
onClick: () => void;
highlighted: boolean;
}

const LegendNode: React.FC<LegendNodeProps> = ({ name, color, onClick, highlighted }) => (
<Box
sx={{
display: "flex",
alignItems: "center",
margin: ".75rem 0",
cursor: "pointer",
opacity: highlighted ? 1 : 0.3,
}}
onClick={onClick}
>
<Box sx={{ width: 16, height: 16, borderRadius: "50%", backgroundColor: color, marginRight: 1 }} />
<Typography variant="body2">{name}</Typography>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
margin: ".75rem 0",
cursor: "pointer",
opacity: highlighted ? 1 : 0.3,
}}
onClick={onClick}
>
<Box sx={{ width: 16, height: 16, borderRadius: "50%", backgroundColor: color, marginRight: 1 }} />
<Typography variant="body2">{name}</Typography>
</Box>
);

const LegendConnection: React.FC<LegendConnectionProps> = ({ name, icon, onClick, highlighted }) => (
<Box
sx={{
display: "flex",
alignItems: "center",
margin: ".75rem 0",
cursor: "pointer",
opacity: highlighted ? 1 : 0.3,
}}
onClick={onClick}
<Box
sx={{
display: "flex",
alignItems: "center",
margin: ".75rem 0",
cursor: "pointer",
opacity: highlighted ? 1 : 0.3,
}}
onClick={onClick}
>
<IconButton
size="small"
sx={{
marginRight: 1,
"&:hover": {
backgroundColor: "transparent",
},
}}
>
<IconButton
size="small"
sx={{
marginRight: 1,
"&:hover": {
backgroundColor: "transparent",
},
}}
>
{icon}
</IconButton>
<Typography variant="body2">{name}</Typography>
</Box>
{icon}
</IconButton>
<Typography variant="body2">{name}</Typography>
</Box>
);

interface LegendProps {
coloringOption: ColoringOptions;
setLegendHighlights: React.Dispatch<React.SetStateAction<Map<LegendType, string>>>;
legendHighlights: Map<LegendType, string>;
includeAnnotations: boolean
coloringOption: ColoringOptions;
setLegendHighlights: React.Dispatch<React.SetStateAction<Map<LegendType, string>>>;
legendHighlights: Map<LegendType, string>;
includeAnnotations: boolean;
}

const TwoDLegend: React.FC<LegendProps> = ({ coloringOption, setLegendHighlights, legendHighlights, includeAnnotations }) => {
const handleLegendClick = (type: LegendType, value: string) => {
setLegendHighlights((prevState) => {
const newMap = new Map([...prevState.entries()]);
if (newMap.get(type) === value) {
newMap.delete(type);
} else {
newMap.set(type, value);
}
return newMap;
});
};

const handleLegendClick = (type: LegendType, value: string) => {
setLegendHighlights(prevState => {
const newMap = new Map([...prevState.entries()]);
if (newMap.get(type) === value) {
newMap.delete(type);
} else {
newMap.set(type, value);
}
return newMap;
});
};
const colorMap = getColorMap(coloringOption);
const nodeHighlight = legendHighlights.has(LegendType.Node);
const connectionHighlight = legendHighlights.has(LegendType.Connection);
const annotationHighlight = legendHighlights.has(LegendType.Annotation);

const colorMap = getColorMap(coloringOption);
const nodeHighlight = legendHighlights.has(LegendType.Node);
const connectionHighlight = legendHighlights.has(LegendType.Connection);
const annotationHighlight = legendHighlights.has(LegendType.Annotation);

return (
<Box
sx={{
padding: "1rem",
borderRadius: "0.5rem",
backgroundColor: "rgba(245, 245, 244, 0.80)",
backdropFilter: "blur(20px)",
}}
>
{Object.entries(colorMap).map(([name, color]) => (
<LegendNode
key={name}
name={legendNodeNameMapping[name]}
color={color}
onClick={() => handleLegendClick(LegendType.Node, name)}
highlighted={!nodeHighlight || legendHighlights.get(LegendType.Node) === name}
/>
))}
<Divider sx={{ my: 1, borderColor: gray100 }} />
{Object.entries(connectionsLegend).map(([key, { name, icon }]) => (
<LegendConnection
key={key}
name={name}
icon={icon}
onClick={() => handleLegendClick(LegendType.Connection, key)}
highlighted={!connectionHighlight || legendHighlights.get(LegendType.Connection) === key}
/>
))}
{includeAnnotations && (
<>
<Divider sx={{ my: 1, borderColor: gray100 }} />
{Object.entries(annotationLegend).map(([key, { id, name, icon }]) => (
<LegendConnection
key={key}
name={name}
icon={icon}
onClick={() => handleLegendClick(LegendType.Annotation, id)}
highlighted={!annotationHighlight || legendHighlights.get(LegendType.Annotation) === id}
/>
))}
</>
)}
</Box>
);
return (
<Box
sx={{
padding: "1rem",
borderRadius: "0.5rem",
backgroundColor: "rgba(245, 245, 244, 0.80)",
backdropFilter: "blur(20px)",
}}
>
{Object.entries(colorMap).map(([name, color]) => (
<LegendNode
key={name}
name={legendNodeNameMapping[name]}
color={color}
onClick={() => handleLegendClick(LegendType.Node, name)}
highlighted={!nodeHighlight || legendHighlights.get(LegendType.Node) === name}
/>
))}
<Divider sx={{ my: 1, borderColor: gray100 }} />
{Object.entries(connectionsLegend).map(([key, { name, icon }]) => (
<LegendConnection
key={key}
name={name}
icon={icon}
onClick={() => handleLegendClick(LegendType.Connection, key)}
highlighted={!connectionHighlight || legendHighlights.get(LegendType.Connection) === key}
/>
))}
{includeAnnotations && (
<>
<Divider sx={{ my: 1, borderColor: gray100 }} />
{Object.entries(annotationLegend).map(([key, { id, name, icon }]) => (
<LegendConnection
key={key}
name={name}
icon={icon}
onClick={() => handleLegendClick(LegendType.Annotation, id)}
highlighted={!annotationHighlight || legendHighlights.get(LegendType.Annotation) === id}
/>
))}
</>
)}
</Box>
);
};

export default TwoDLegend;
Loading

0 comments on commit 34a8094

Please sign in to comment.