mirror of
https://github.com/openziti/zrok.git
synced 2025-06-22 10:41:40 +02:00
improvements to selection handling (#819, #823); side panel only consumes layout space when selected (#804)
This commit is contained in:
parent
2e839f104f
commit
cba3b95217
@ -1,4 +1,4 @@
|
|||||||
import {useCallback, useEffect, useRef, useState} from "react";
|
import {JSX, useCallback, useEffect, useRef, useState} from "react";
|
||||||
import {Configuration, MetadataApi} from "./api";
|
import {Configuration, MetadataApi} from "./api";
|
||||||
import {layout, mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts";
|
import {layout, mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts";
|
||||||
import {Grid2} from "@mui/material";
|
import {Grid2} from "@mui/material";
|
||||||
@ -25,7 +25,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
|||||||
const selectedNode = useStore((state) => state.selectedNode);
|
const selectedNode = useStore((state) => state.selectedNode);
|
||||||
const updateEnvironments = useStore((state) => state.updateEnvironments);
|
const updateEnvironments = useStore((state) => state.updateEnvironments);
|
||||||
const [mainPanel, setMainPanel] = useState(<Visualizer />);
|
const [mainPanel, setMainPanel] = useState(<Visualizer />);
|
||||||
const [sidePanel, setSidePanel] = useState(<></>);
|
const [sidePanel, setSidePanel] = useState<JSX>(null);
|
||||||
|
|
||||||
let showVisualizer = true;
|
let showVisualizer = true;
|
||||||
const handleKeyPress = useCallback((event) => {
|
const handleKeyPress = useCallback((event) => {
|
||||||
@ -135,10 +135,12 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
setSidePanel(<></>);
|
setSidePanel(null);
|
||||||
}
|
}
|
||||||
}, [selectedNode]);
|
}, [selectedNode]);
|
||||||
|
|
||||||
|
let wrappedSidePanel = sidePanel ? <Grid2 size={4}>{sidePanel}</Grid2> : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<NavBar logout={logout} />
|
<NavBar logout={logout} />
|
||||||
@ -146,9 +148,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
|||||||
<Grid2 size="grow">
|
<Grid2 size="grow">
|
||||||
{mainPanel}
|
{mainPanel}
|
||||||
</Grid2>
|
</Grid2>
|
||||||
<Grid2 size={4}>
|
{wrappedSidePanel}
|
||||||
{sidePanel}
|
|
||||||
</Grid2>
|
|
||||||
</Grid2>
|
</Grid2>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -11,6 +11,7 @@ import {Node} from "@xyflow/react";
|
|||||||
|
|
||||||
const TabularView = () => {
|
const TabularView = () => {
|
||||||
const nodes = useStore((state) => state.nodes);
|
const nodes = useStore((state) => state.nodes);
|
||||||
|
const updateNodes = useStore((state) => state.updateNodes);
|
||||||
const selectedNode = useStore((state) => state.selectedNode);
|
const selectedNode = useStore((state) => state.selectedNode);
|
||||||
const updateSelectedNode = useStore((state) => state.updateSelectedNode);
|
const updateSelectedNode = useStore((state) => state.updateSelectedNode);
|
||||||
const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
|
const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
|
||||||
@ -25,7 +26,9 @@ const TabularView = () => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let sn = nodes.find(node => Object.keys(rowSelection).includes(node.id));
|
let sn = nodes.find(node => Object.keys(rowSelection).includes(node.id));
|
||||||
|
console.log("sn", sn);
|
||||||
updateSelectedNode(sn);
|
updateSelectedNode(sn);
|
||||||
|
updateNodes(nodes.map(node => (sn && node.id === sn.id) ? { ...node, selected: true } : { ...node, selected: false }));
|
||||||
}, [rowSelection]);
|
}, [rowSelection]);
|
||||||
|
|
||||||
const columns = useMemo<MRT_ColumnDef<Node>[]>(
|
const columns = useMemo<MRT_ColumnDef<Node>[]>(
|
||||||
@ -52,7 +55,12 @@ const TabularView = () => {
|
|||||||
state: { rowSelection },
|
state: { rowSelection },
|
||||||
muiTableBodyRowProps: ({ row }) => ({
|
muiTableBodyRowProps: ({ row }) => ({
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
setRowSelection({[row.id]: true})
|
if(rowSelection[row.id]) {
|
||||||
|
setRowSelection({});
|
||||||
|
} else {
|
||||||
|
setRowSelection({[row.id]: true});
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
selected: rowSelection[row.id],
|
selected: rowSelection[row.id],
|
||||||
sx: {
|
sx: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user