From 2918bca74be474c67815c0bd1746203ab18015a3 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Fri, 29 Mar 2024 17:47:39 +0100
Subject: [PATCH] feat(visManager): full screen for vis
---
apps/web/src/app/app.tsx | 32 +++++++++++++++++++-----
libs/shared/lib/vis/components/bar.tsx | 5 ++--
libs/shared/lib/vis/components/panel.tsx | 4 +--
3 files changed, 31 insertions(+), 10 deletions(-)
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index 867825d78..477a0f18c 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -59,6 +59,7 @@ export function App(props: App) {
const [authCheck, setAuthCheck] = useState(false);
const [tab, setTab] = useState<SideNavTab>('Schema');
+ const [visFullSize, setVisFullSize] = useState<boolean>(true);
return (
<div className="h-screen w-screen overflow-clip">
@@ -114,14 +115,33 @@ export function App(props: App) {
</div>
) : null}
<div className="h-full w-full flex-grow">
- <Resizable divisorSize={3} horizontal={false}>
+ {visFullSize ? (
<div className="w-full h-full border">
- <VisualizationPanel manager={manager} />
+ <VisualizationPanel
+ manager={manager}
+ fullSize={() => {
+ setVisFullSize(!visFullSize);
+ tab === undefined && setTab('Schema');
+ tab !== undefined && setTab(undefined);
+ }}
+ />
</div>
- <div className="w-full h-full border">
- <QueryBuilder onRunQuery={runQuery} />
- </div>
- </Resizable>
+ ) : (
+ <Resizable divisorSize={3} horizontal={false}>
+ <div className="w-full h-full border">
+ <VisualizationPanel
+ manager={manager}
+ fullSize={() => {
+ setVisFullSize(!visFullSize);
+ setTab(undefined);
+ }}
+ />
+ </div>
+ <div className="w-full h-full border">
+ <QueryBuilder onRunQuery={runQuery} />
+ </div>
+ </Resizable>
+ )}
</div>
</Resizable>
<div className="h-full w-60 ml-1">
diff --git a/libs/shared/lib/vis/components/bar.tsx b/libs/shared/lib/vis/components/bar.tsx
index a2c1df163..42abaaeb3 100644
--- a/libs/shared/lib/vis/components/bar.tsx
+++ b/libs/shared/lib/vis/components/bar.tsx
@@ -9,9 +9,10 @@ import { VisualizationManagerType } from '../hooks';
type Props = {
manager: VisualizationManagerType;
+ fullSize: () => void;
};
-export default function VisualizationBar({ manager }: Props) {
+export default function VisualizationBar({ manager, fullSize }: Props) {
const handleDragStart = (e: React.DragEvent<HTMLDivElement>, visId: string) => {
e.dataTransfer.setData('text/plain', visId);
};
@@ -97,7 +98,7 @@ export default function VisualizationBar({ manager }: Props) {
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger>
- <Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={() => {}} />
+ <Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={fullSize} />
</TooltipTrigger>
<TooltipContent side={'bottom'}>
<p>Full screen</p>
diff --git a/libs/shared/lib/vis/components/panel.tsx b/libs/shared/lib/vis/components/panel.tsx
index 1866be585..fdcb3c782 100644
--- a/libs/shared/lib/vis/components/panel.tsx
+++ b/libs/shared/lib/vis/components/panel.tsx
@@ -4,7 +4,7 @@ import VisualizationBar from './bar';
import { VisualizationManagerType } from '../hooks';
import { Recommender, NoData, Querying } from '../views';
-export const VisualizationPanel = ({ manager }: { manager: VisualizationManagerType }) => {
+export const VisualizationPanel = ({ manager, fullSize }: { manager: VisualizationManagerType; fullSize: () => void }) => {
const query = useQuerybuilderGraph();
const graphQueryResult = useGraphQueryResult();
@@ -21,7 +21,7 @@ export const VisualizationPanel = ({ manager }: { manager: VisualizationManagerT
return (
<div className="vis-panel h-full w-full">
- <VisualizationBar manager={manager} />
+ <VisualizationBar manager={manager} fullSize={fullSize} />
<div className="h-full w-full overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
{renderContent()}
</div>
--
GitLab