mirror of
https://github.com/openziti/zrok.git
synced 2025-06-21 18:21:34 +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 {layout, mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts";
|
||||
import {Grid2} from "@mui/material";
|
||||
@ -25,7 +25,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
||||
const selectedNode = useStore((state) => state.selectedNode);
|
||||
const updateEnvironments = useStore((state) => state.updateEnvironments);
|
||||
const [mainPanel, setMainPanel] = useState(<Visualizer />);
|
||||
const [sidePanel, setSidePanel] = useState(<></>);
|
||||
const [sidePanel, setSidePanel] = useState<JSX>(null);
|
||||
|
||||
let showVisualizer = true;
|
||||
const handleKeyPress = useCallback((event) => {
|
||||
@ -135,10 +135,12 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
setSidePanel(<></>);
|
||||
setSidePanel(null);
|
||||
}
|
||||
}, [selectedNode]);
|
||||
|
||||
let wrappedSidePanel = sidePanel ? <Grid2 size={4}>{sidePanel}</Grid2> : null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<NavBar logout={logout} />
|
||||
@ -146,9 +148,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
||||
<Grid2 size="grow">
|
||||
{mainPanel}
|
||||
</Grid2>
|
||||
<Grid2 size={4}>
|
||||
{sidePanel}
|
||||
</Grid2>
|
||||
{wrappedSidePanel}
|
||||
</Grid2>
|
||||
</div>
|
||||
);
|
||||
|
@ -11,6 +11,7 @@ import {Node} from "@xyflow/react";
|
||||
|
||||
const TabularView = () => {
|
||||
const nodes = useStore((state) => state.nodes);
|
||||
const updateNodes = useStore((state) => state.updateNodes);
|
||||
const selectedNode = useStore((state) => state.selectedNode);
|
||||
const updateSelectedNode = useStore((state) => state.updateSelectedNode);
|
||||
const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
|
||||
@ -25,7 +26,9 @@ const TabularView = () => {
|
||||
|
||||
useEffect(() => {
|
||||
let sn = nodes.find(node => Object.keys(rowSelection).includes(node.id));
|
||||
console.log("sn", sn);
|
||||
updateSelectedNode(sn);
|
||||
updateNodes(nodes.map(node => (sn && node.id === sn.id) ? { ...node, selected: true } : { ...node, selected: false }));
|
||||
}, [rowSelection]);
|
||||
|
||||
const columns = useMemo<MRT_ColumnDef<Node>[]>(
|
||||
@ -52,7 +55,12 @@ const TabularView = () => {
|
||||
state: { rowSelection },
|
||||
muiTableBodyRowProps: ({ row }) => ({
|
||||
onClick: () => {
|
||||
setRowSelection({[row.id]: true})
|
||||
if(rowSelection[row.id]) {
|
||||
setRowSelection({});
|
||||
} else {
|
||||
setRowSelection({[row.id]: true});
|
||||
}
|
||||
|
||||
},
|
||||
selected: rowSelection[row.id],
|
||||
sx: {
|
||||
|
Loading…
x
Reference in New Issue
Block a user