extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-22 10:41:40 +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 {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>
); );

10
ui100/src/TabularView.tsx
View File

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