Skip to content

Commit

Permalink
fix: Resize the terminal correctly
Browse files Browse the repository at this point in the history
  • Loading branch information
@PintoGideon
PintoGideon committed Oct 15, 2024
1 parent 909518c commit aa0f978
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 194 deletions.
290 changes: 143 additions & 147 deletions src/components/FeedTree/FeedTree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,9 +142,7 @@ const FeedTree = ({
let newLinks: HierarchyPointLink<TreeNodeDatum>[] = [];

if (data && data.length > 0) {
const rootNode = d3Tree(
hierarchy(data[0], (d) => (d.__rd3t?.collapsed ? null : d.children)),
);
const rootNode = d3Tree(hierarchy(data[0], (d) => d.children));
nodes = rootNode.descendants();
links = rootNode.links();

Expand Down Expand Up @@ -270,157 +268,155 @@ const FeedTree = ({

return (
<div className="feed-tree setFlex grabbable mode_tree" ref={divRef}>
<div>
{/* Controls Section */}
<div className="feed-tree__container--labels">
{/* Orientation Toggle */}
<div className="feed-tree__orientation">
{switchState.orientation === "vertical" ? (
<RotateLeft
onClick={() => handleChange(Feature.ORIENTATION, "horizontal")}
className="feed-tree__orientation--icon"
aria-label="Rotate Left"
aria-hidden="true"
/>
) : (
<RotateRight
className="feed-tree__orientation--icon"
aria-label="Rotate Right"
aria-hidden="true"
onClick={() => handleChange(Feature.ORIENTATION, "vertical")}
/>
)}
</div>

{/* Toggle Labels Switch */}
<div className="feed-tree__control">
<Switch
id="labels"
label="Hide Labels"
labelOff="Show Labels"
isChecked={switchState.toggleLabels}
aria-checked={switchState.toggleLabels}
onChange={() => handleChange(Feature.TOGGLE_LABELS)}
aria-label="Toggle label visibility"
{/* Controls Section */}
<div className="feed-tree__container--labels">
{/* Orientation Toggle */}
<div className="feed-tree__orientation">
{switchState.orientation === "vertical" ? (
<RotateLeft
onClick={() => handleChange(Feature.ORIENTATION, "horizontal")}
className="feed-tree__orientation--icon"
aria-label="Rotate Left"
aria-hidden="true"
/>
</div>

{/* Switch Layout Toggle */}
<div className="feed-tree__control">
<Switch
id="layout"
label="Switch Layout"
labelOff="2D"
isChecked={currentLayout}
aria-checked={currentLayout}
onChange={() => changeLayout()}
aria-label="Toggle graph layout from 2D to 3D"
/>
</div>

{/* Scale Nodes Switch and Dropdown */}
<div className="feed-tree__control feed-tree__individual-scale">
<Switch
id="individual-scale"
label="Scale Nodes On"
labelOff="Scale Nodes Off"
isChecked={overlayScale.enabled}
aria-checked={overlayScale.enabled}
onChange={() => handleChange(Feature.SCALE_ENABLED)}
aria-label="Scale nodes"
) : (
<RotateRight
className="feed-tree__orientation--icon"
aria-label="Rotate Right"
aria-hidden="true"
onClick={() => handleChange(Feature.ORIENTATION, "vertical")}
/>
)}
</div>

{overlayScale.enabled && (
<div className="dropdown-wrap">
<NodeScaleDropdown
selected={overlayScale.type}
onChange={(type) => handleChange(Feature.SCALE_TYPE, type)}
/>
</div>
)}
</div>

{/* Search Box Switch */}
<div className="feed-tree__control">
<Switch
id="search"
label="Search On"
labelOff="Search Off"
isChecked={switchState.searchBox}
aria-checked={switchState.searchBox}
onChange={() => handleChange(Feature.SEARCH_BOX)}
aria-label="Toggle search a node in the tree"
/>
</div>

{/* Search Input */}
<div className="feed-tree__control">
{switchState.searchBox && (
<TextInput
value={switchState.searchFilter}
onChange={(_event, value: string) =>
updateState((draft) => {
draft.switchState.searchFilter = value;
})
}
aria-label="Search nodes"
placeholder="Search..."
{/* Toggle Labels Switch */}
<div className="feed-tree__control">
<Switch
id="labels"
label="Hide Labels"
labelOff="Show Labels"
isChecked={switchState.toggleLabels}
aria-checked={switchState.toggleLabels}
onChange={() => handleChange(Feature.TOGGLE_LABELS)}
aria-label="Toggle label visibility"
/>
</div>

{/* Switch Layout Toggle */}
<div className="feed-tree__control">
<Switch
id="layout"
label="Switch Layout"
labelOff="2D"
isChecked={currentLayout}
aria-checked={currentLayout}
onChange={() => changeLayout()}
aria-label="Toggle graph layout from 2D to 3D"
/>
</div>

{/* Scale Nodes Switch and Dropdown */}
<div className="feed-tree__control feed-tree__individual-scale">
<Switch
id="individual-scale"
label="Scale Nodes On"
labelOff="Scale Nodes Off"
isChecked={overlayScale.enabled}
aria-checked={overlayScale.enabled}
onChange={() => handleChange(Feature.SCALE_ENABLED)}
aria-label="Scale nodes"
/>

{overlayScale.enabled && (
<div className="dropdown-wrap">
<NodeScaleDropdown
selected={overlayScale.type}
onChange={(type) => handleChange(Feature.SCALE_TYPE, type)}
/>
)}
</div>
</div>
)}
</div>

{/* Tree Visualization */}
{treeState.translate.x > 0 && treeState.translate.y > 0 && (
<svg
ref={svgRef}
focusable="true"
className={SVG_CLASS_NAME}
width="100%"
height="100%"
role="img"
aria-label="Feed Tree Visualization"
>
<g ref={gRef} className={GRAPH_CLASS_NAME}>
<TransitionGroupWrapper
className={GRAPH_CLASS_NAME}
component="g"
transform={`translate(${treeState.translate.x},${treeState.translate.y}) scale(${INITIAL_SCALE})`}
>
{/* Render Links */}
{links?.map((linkData, i) => (
<Link
key={`link${
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
i
}`}
orientation={switchState.orientation}
linkData={linkData}
isDarkTheme={isDarkTheme}
/>
))}

{/* Render Nodes */}
{nodes?.map(({ data, x, y, parent }) => (
<NodeWrapper
key={`node${data.id}`}
data={data}
position={{ x, y }}
parent={parent}
onNodeClick={(item) => onNodeClick(item)}
orientation={switchState.orientation}
toggleLabel={switchState.toggleLabels}
overlayScale={
overlayScale.enabled ? overlayScale.type : undefined
}
searchFilter={switchState.searchFilter}
/>
))}
</TransitionGroupWrapper>
</g>
</svg>
)}
{/* Search Box Switch */}
<div className="feed-tree__control">
<Switch
id="search"
label="Search On"
labelOff="Search Off"
isChecked={switchState.searchBox}
aria-checked={switchState.searchBox}
onChange={() => handleChange(Feature.SEARCH_BOX)}
aria-label="Toggle search a node in the tree"
/>
</div>

{/* Search Input */}
<div className="feed-tree__control">
{switchState.searchBox && (
<TextInput
value={switchState.searchFilter}
onChange={(_event, value: string) =>
updateState((draft) => {
draft.switchState.searchFilter = value;
})
}
aria-label="Search nodes"
placeholder="Search..."
/>
)}
</div>
</div>

{/* Tree Visualization */}
{treeState.translate.x > 0 && treeState.translate.y > 0 && (
<svg
ref={svgRef}
focusable="true"
className={SVG_CLASS_NAME}
width="100%"
height="100%"
role="img"
aria-label="Feed Tree Visualization"
>
<g ref={gRef} className={GRAPH_CLASS_NAME}>
<TransitionGroupWrapper
className={GRAPH_CLASS_NAME}
component="g"
transform={`translate(${treeState.translate.x},${treeState.translate.y}) scale(${INITIAL_SCALE})`}
>
{/* Render Links */}
{links?.map((linkData, i) => (
<Link
key={`link${
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
i
}`}
orientation={switchState.orientation}
linkData={linkData}
isDarkTheme={isDarkTheme}
/>
))}

{/* Render Nodes */}
{nodes?.map(({ data, x, y, parent }) => (
<NodeWrapper
key={`node${data.id}`}
data={data}
position={{ x, y }}
parent={parent}
onNodeClick={(item) => onNodeClick(item)}
orientation={switchState.orientation}
toggleLabel={switchState.toggleLabels}
overlayScale={
overlayScale.enabled ? overlayScale.type : undefined
}
searchFilter={switchState.searchFilter}
/>
))}
</TransitionGroupWrapper>
</g>
</svg>
)}
</div>
);
};
Expand Down
3 changes: 3 additions & 0 deletions src/components/Feeds/FeedView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,9 @@ const FeedView: React.FC = () => {
order={2}
defaultSize={47}
minSize={20}
style={{
overflow: "scroll",
}}
>
{handleDrawerAction("node")}
<div className="node-block">
Expand Down
59 changes: 12 additions & 47 deletions src/components/NodeDetails/LogTerminal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,31 @@
import { LogViewer } from "@patternfly/react-log-viewer";
import { useRef, useEffect, useState } from "react";
import useSize from "../FeedTree/useSize";
import { useAppSelector } from "../../store/hooks";

type LogTerminalProps = {
text: string;
};

const LogTerminal = ({ text }: LogTerminalProps) => {
const divRef = useRef<HTMLDivElement>(null);
const size = useSize(divRef);
const isTerminalMaximized = useAppSelector(
(state) => state.drawers.node.maximized,
);
const [terminalSize, setTerminalSize] = useState({
width: "100%",
height: "100%",
});

const handleResize = () => {
if (divRef.current && size) {
const parentWidth = size.width;
const parentHeight = size.height;
const element = document.getElementById("log-viewer");

if (element) {
setTerminalSize({
width: `${parentWidth}px`,
height: `${parentHeight}px`,
});
}
}
const containerStyle = {
height: isTerminalMaximized ? "100vh" : "100%",
width: "100%",
display: "flex",
flexDirection: "column" as const,
flexGrow: 1,
};

useEffect(() => {
// Call handleResize whenever window resizes
window.addEventListener("resize", handleResize);

// Initial resize logic when component mounts
handleResize();

// Cleanup on unmount
return () => {
window.removeEventListener("resize", handleResize);
};
}, [size, isTerminalMaximized]); // Ensure the effect runs when size or maximized state changes
const logViewerStyle = {
flexGrow: 1,
overflow: "auto",
};

return (
<div
id="log-viewer"
ref={divRef}
style={{
height: "100%",
width: "100%",
}}
>
<LogViewer
height={terminalSize.height}
width={terminalSize.width}
hasLineNumbers={false}
data={text}
/>
<div style={containerStyle}>
<LogViewer style={logViewerStyle} hasLineNumbers={false} data={text} />
</div>
);
};
Expand Down
Loading

0 comments on commit aa0f978

Please sign in to comment.