extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-21 18:21:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

improvements to selection handling (#819, #823); side panel only consumes layout space when selected (#804)

Browse Source
This commit is contained in:
Michael Quigley 2025-01-08 17:25:44 -05:00
parent 2e839f104f
commit cba3b95217
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui100/src/ApiConsole.tsx
View File

@ -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>
);

10
ui100/src/TabularView.tsx
View File

@ -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: {