diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index d8ce9f883a3064d81743ded5e148dd28a39d2a6b..5a5f114028d4a02da335076930fb0dae6e93ee28 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -75,17 +75,17 @@ export function App(props: App) {
<DashboardAlerts />
<div className={'h-screen w-screen ' + (!auth.authorized ? 'blur-sm pointer-events-none ' : '')}>
<div className="flex flex-col h-screen max-h-screen relative">
- <aside className="h-auto w-auto">
+ <aside className="absolute w-full h-12">
<Navbar />
</aside>
- <main className="grow flex flex-row">
+ <main className="grow flex flex-row h-screen pt-12">
<Sidebar onTab={(tab) => setTab(tab)} />
<Resizable divisorSize={3} horizontal={true} defaultProportion={0.33}>
{tab !== undefined ? (
<div className="flex flex-col border w-full h-full bg-light">
<div className="sticky shrink-0 top-0 flex items-stretch justify-between h-7 bg-secondary-100 border-b border-secondary-200 max-w-full">
<div className="flex items-center">
- <h1 className="text-xs font-semibold text-secondary-600 px-2">{tab}</h1>
+ <h1 className="text-xs font-semibold text-secondary-600 px-2 truncate">{tab}</h1>
</div>
<div className="shrink-0 sticky right-0 px-0.5 ml-auto items-center flex">
<ControlContainer>
@@ -118,22 +118,21 @@ export function App(props: App) {
{tab === 'Schema' && <Schema auth={authCheck} />}
</div>
) : null}
- <div className="h-full w-full flex-grow">
- <Resizable divisorSize={3} horizontal={false}>
- <VisualizationPanel
- manager={manager}
- fullSize={() => {
- setVisFullSize(!visFullSize);
- tab === undefined && setTab('Schema');
- tab !== undefined && setTab(undefined);
- }}
- />
- <QueryBuilder onRunQuery={runQuery} />
- </Resizable>
- </div>
+ <Resizable divisorSize={3} horizontal={false}>
+ <VisualizationPanel
+ manager={manager}
+ fullSize={() => {
+ setVisFullSize(!visFullSize);
+ tab === undefined && setTab('Schema');
+ tab !== undefined && setTab(undefined);
+ }}
+ />
+
+ <QueryBuilder onRunQuery={runQuery} />
+ </Resizable>
</Resizable>
- <div className="h-full w-60 ml-1">
+ <div className="info-panel flex h-full w-60 ml-[3px] shrink-0 overflow-auto bg-light border">
<ConfigPanel manager={manager} />
</div>
</main>
diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index 357c4ab59240fe9b25794087e559cd8a100d1dd4..f9c975f77cfa4502628b185ebfd94f72727a0b5c 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -22,8 +22,6 @@ export const Navbar = () => {
const authCache = useAuthorizationCache();
const [menuOpen, setMenuOpen] = useState(false);
- const currentLogo = !'dark' ? logo_white : logo; // TODO: support dark mode
-
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
diff --git a/libs/shared/lib/components/Resizable.tsx b/libs/shared/lib/components/Resizable.tsx
index 6f6ec6e11a752a15a0d2dfe73e6c05992f0d67a1..18069c8db366208ee0c2d3fcc035e607e07194b8 100644
--- a/libs/shared/lib/components/Resizable.tsx
+++ b/libs/shared/lib/components/Resizable.tsx
@@ -45,16 +45,18 @@ export const Resizable = ({
};
}, []);
+ // Store the current proportion of the first area
+ const [currentProportion, setCurrentProportion] = useState(defaultProportion || 0.5);
+
useEffect(() => {
if (ref.current) {
const rect = ref.current.getBoundingClientRect();
- const _defaultProportion = defaultProportion || 0.5;
if (horizontal) {
- setFirstSize(rect.width * _defaultProportion - divisorSize);
- setSecondSize(rect.width * (1 / _defaultProportion) - divisorSize);
+ setFirstSize((rect.width - divisorSize) * currentProportion);
+ setSecondSize((rect.width - divisorSize) * (1 - currentProportion));
} else {
- setFirstSize(rect.height * _defaultProportion - divisorSize);
- setSecondSize(rect.height * (1 / _defaultProportion) - divisorSize);
+ setFirstSize((rect.height - divisorSize) * currentProportion);
+ setSecondSize((rect.height - divisorSize) * (1 - currentProportion));
}
}
}, [ref.current, windowSize]);
@@ -78,11 +80,15 @@ export const Resizable = ({
const minSizeY = 28;
if (horizontal) {
- setFirstSize(Math.max(minSizeX, relativeX));
+ const newFirstSize = Math.max(minSizeX, relativeX);
+ setFirstSize(newFirstSize);
setSecondSize(Math.max(minSizeX, rect.width - relativeX));
+ setCurrentProportion(newFirstSize / rect.width);
} else {
- setFirstSize(Math.max(minSizeY, relativeY));
+ const newFirstSize = Math.max(minSizeY, relativeY);
+ setFirstSize(newFirstSize);
setSecondSize(Math.max(minSizeY, rect.height - relativeY));
+ setCurrentProportion(newFirstSize / rect.height);
}
}
}
@@ -105,7 +111,7 @@ export const Resizable = ({
<>
{dragging && <div className="absolute top-0 left-0 w-screen h-screen z-10 cursor-grabbing" onMouseMove={onMouseMove}></div>}
<div
- className={`w-full h-full flex flex-grow ${horizontal ? 'flex-row' : 'flex-col'} ${className !== undefined ? className : ''} `}
+ className={`w-full h-full flex ${horizontal ? 'flex-row' : 'flex-col'} ${className !== undefined ? className : ''} `}
style={style}
{...props}
ref={ref}
@@ -119,7 +125,7 @@ export const Resizable = ({
{children2[0]}
</div>
<div
- className={' ' + (horizontal ? 'cursor-col-resize' : 'cursor-row-resize')}
+ className={' ' + (horizontal ? 'cursor-col-resize' : 'cursor-row-resize') + (dragging ? ' bg-primary-200' : '')}
style={horizontal ? { minWidth: divisorSize } : { minHeight: divisorSize }}
onMouseDown={onMouseDown}
onTouchStart={onTouchStart}
@@ -128,7 +134,7 @@ export const Resizable = ({
onTouchCancel={onTouchCancel}
></div>
<div
- className={'h-full w-full ' + (classNameRight !== undefined ? classNameRight : '')}
+ className={'h-full w-full' + (classNameRight !== undefined ? classNameRight : '')}
style={horizontal ? { maxWidth: secondSize } : { maxHeight: secondSize }}
>
{children2[1]}
diff --git a/libs/shared/lib/querybuilder/panel/querybuilder.tsx b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
index 457b779daf09ed5ae8e463544ddac7e5ef0198a4..53a00c3aa57417f1dbddfe7dd555d65c3e129f85 100644
--- a/libs/shared/lib/querybuilder/panel/querybuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
@@ -440,7 +440,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
<div className="sticky shrink-0 top-0 flex items-stretch justify-between h-7 bg-secondary-100 border-b border-secondary-200 max-w-full">
<div className="flex items-center">
- <h1 className="text-xs font-semibold text-secondary-600 px-2">Query builder</h1>
+ <h1 className="text-xs font-semibold text-secondary-600 px-2 truncate">Query builder</h1>
</div>
<div className="shrink-0 sticky right-0 px-0.5 ml-auto items-center flex">
<ControlContainer>
diff --git a/libs/shared/lib/schema/panel/schema.tsx b/libs/shared/lib/schema/panel/schema.tsx
index ed516ccec0282e724c46b9d5dd2f803ddb0735ac..3fab5de7283a2bc8d2f2f35973ee65ce8eff887d 100644
--- a/libs/shared/lib/schema/panel/schema.tsx
+++ b/libs/shared/lib/schema/panel/schema.tsx
@@ -145,7 +145,7 @@ export const Schema = (props: Props) => {
iconComponent={expanded ? <KeyboardArrowDown /> : <KeyboardArrowRight />}
onClick={() => setExpanded(!expanded)}
/>
- <span className="text-xs font-semibold text-secondary-600">Schema settings</span>
+ <span className="text-xs font-semibold text-secondary-600 truncate">Schema settings</span>
</div>
{expanded && (
<div className="h-full w-full overflow-y-auto">
diff --git a/libs/shared/lib/sidebar/index.tsx b/libs/shared/lib/sidebar/index.tsx
index 0738ebcb971df32767abfccfbe883f38e6d51564..798abd4f2633a13d52be9add9f77ca8d7b7bad5f 100644
--- a/libs/shared/lib/sidebar/index.tsx
+++ b/libs/shared/lib/sidebar/index.tsx
@@ -19,7 +19,7 @@ export function Sidebar({ onTab }: { onTab: (tab: SideNavTab) => void }) {
const [tab, setTab] = useState<SideNavTab>('Schema');
return (
- <div className="info-panel w-fit h-full flex flex-shrink">
+ <div className="side-bar w-fit h-full flex shrink">
<TooltipProvider delayDuration={100}>
<div className="w-11 flex flex-col items-center">
{tabs.map((t) => (
diff --git a/libs/shared/lib/vis/components/bar.tsx b/libs/shared/lib/vis/components/bar.tsx
index b86b7f5ac337c8460abdf6c43e3607c18c6feb37..5e79d8fd86403e3c6e0585f311860538c922ef8f 100644
--- a/libs/shared/lib/vis/components/bar.tsx
+++ b/libs/shared/lib/vis/components/bar.tsx
@@ -31,7 +31,7 @@ export default function VisualizationBar({ manager, fullSize }: Props) {
return (
<div className="sticky shrink-0 top-0 flex items-stretch justify-between h-7 bg-secondary-100 border-b border-secondary-200 max-w-full">
<div className="flex items-center">
- <h1 className="text-xs font-semibold text-secondary-600 px-2">Visualization</h1>
+ <h1 className="text-xs font-semibold text-secondary-600 px-2 truncate">Visualization</h1>
</div>
<div className="flex items-stretch divide-x divide-secondary-200 border-x border-secondary-200">
{manager.tabs.map((visId: string) => {
diff --git a/libs/shared/lib/vis/components/config/panel.tsx b/libs/shared/lib/vis/components/config/panel.tsx
index fa5abf24ed4788bce0fc5f5ce20b1c876ec056a5..c0644f4663b83c77be89d5958679039a95db0e4f 100644
--- a/libs/shared/lib/vis/components/config/panel.tsx
+++ b/libs/shared/lib/vis/components/config/panel.tsx
@@ -17,92 +17,92 @@ export function ConfigPanel({ manager }: Props) {
const buildInfo = import.meta.env.GRAPHPOLARIS_VERSION;
return (
- <div className="w-full h-full flex flex-col border justify-between bg-light">
- <div>
- {manager.active ? (
- <>
- <div className="border-b py-2">
- <div className="flex justify-between items-center px-4 py-2">
- <span className="text-xs font-bold">Visualisation</span>
- <Button
- type="secondary"
- variant="ghost"
- size="xs"
- iconComponent={<Delete />}
- onClick={() => {
- if (manager.active) manager.deleteVisualization(manager.active);
- }}
- />
- </div>
- <div className="flex justify-between items-center px-4 py-1">
- <span className="text-xs font-normal">Type</span>
- <div className="w-36">
- <Input type="dropdown" size="xs" options={VISUALIZATION_TYPES} value={manager.active} onChange={() => {}} />
- </div>
- </div>
- <div className="flex justify-between items-center px-4 py-1">
- <span className="text-xs font-normal">Name</span>
- <input type="text" className="border rouded text-xs w-36" value={manager.active} onChange={() => {}} />
- </div>
+ <div className="flex flex-col w-full">
+ {manager.active ? (
+ <>
+ <div className="border-b py-2">
+ <div className="flex justify-between items-center px-4 py-2">
+ <span className="text-xs font-bold">Visualisation</span>
+ <Button
+ type="secondary"
+ variant="ghost"
+ size="xs"
+ iconComponent={<Delete />}
+ onClick={() => {
+ if (manager.active) manager.deleteVisualization(manager.active);
+ }}
+ />
</div>
- {manager.active && (
- <div className="border-b p-4">
- <SettingsHeader name="Configuration" />
- {manager.renderSettings()}
+ <div className="flex justify-between items-center px-4 py-1">
+ <span className="text-xs font-normal">Type</span>
+ <div className="w-36">
+ <Input type="dropdown" size="xs" options={VISUALIZATION_TYPES} value={manager.active} onChange={() => {}} />
</div>
- )}
- </>
- ) : (
- <div>
- {session && session.currentSaveState && (
- <div className="flex flex-col p-4 border-b">
- <span className="text-sm font-bold">Connection details</span>
- <span className="text-xs">Database: {session.saveStates[session.currentSaveState].name}</span>
- <span className="text-xs">Port: {session.saveStates[session.currentSaveState].db.port}</span>
- <span className="text-xs">Protocol: {session.saveStates[session.currentSaveState].db.protocol}</span>
- </div>
- )}
+ </div>
+ <div className="flex justify-between items-center px-4 py-1">
+ <span className="text-xs font-normal">Name</span>
+ <input type="text" className="border rouded text-xs w-36" value={manager.active} onChange={() => {}} />
+ </div>
+ </div>
+ {manager.active && (
+ <div className="border-b p-4">
+ <SettingsHeader name="Configuration" />
+ {manager.renderSettings()}
+ </div>
+ )}
+ </>
+ ) : (
+ <div>
+ {session && session.currentSaveState && (
<div className="flex flex-col p-4 border-b">
- <span className="text-sm font-bold">Sessions</span>
- {Object.entries(session.saveStates).map(([id, info]) => (
- <div key={id} className="flex justify-between items-center">
- <span className="text-xs font-normal truncate">{id.slice(0, 15)}...</span>
- <div className="flex -space-x-4 rtl:space-x-reverse">
- {info.share_state.users.slice(0, 2).map((user: string) => (
- <div
- key={user}
- className="relative inline-flex items-center justify-center w-5 h-5 overflow-hidden bg-secondary-500 rounded-full"
- >
- <Icon component={<Person />} size={12} />
- </div>
- ))}
- {info.share_state.users.length > 3 && (
- <div className="flex items-center justify-center w-5 h-5 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800">
- +2
- </div>
- )}
- </div>
- </div>
- ))}
+ <span className="text-sm font-bold">Connection details</span>
+ <span className="text-xs">Database: {session.saveStates[session.currentSaveState].name}</span>
+ <span className="text-xs">Port: {session.saveStates[session.currentSaveState].db.port}</span>
+ <span className="text-xs">Protocol: {session.saveStates[session.currentSaveState].db.protocol}</span>
</div>
+ )}
+ <div className="flex flex-col p-4 border-b">
+ <span className="text-sm font-bold">Sessions</span>
+ {Object.entries(session.saveStates).map(([id, info]) => (
+ <div key={id} className="flex justify-between items-center">
+ <span className="text-xs font-normal truncate">{id.slice(0, 15)}...</span>
+ <div className="flex -space-x-4 rtl:space-x-reverse">
+ {info.share_state.users.slice(0, 2).map((user: string) => (
+ <div
+ key={user}
+ className="relative inline-flex items-center justify-center w-5 h-5 overflow-hidden bg-secondary-500 rounded-full"
+ >
+ <Icon component={<Person />} size={12} />
+ </div>
+ ))}
+ {info.share_state.users.length > 3 && (
+ <div className="flex items-center justify-center w-5 h-5 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800">
+ +2
+ </div>
+ )}
+ </div>
+ </div>
+ ))}
</div>
- )}
- </div>
+ </div>
+ )}
{buildInfo === 'dev' && (
- <Button
- type="primary"
- variant="outline"
- size="xs"
- label="Report an issue"
- onClick={() =>
- window.open(
- 'https://app.asana.com/-/login?u=https%3A%2F%2Fform.asana.com%2F%3Fk%3D2QEC88Dl7ETs2wYYWjkMXg%26d%3D1206648675960041&error=01',
- '_blank',
- )
- }
- additionalClasses="m-2"
- />
+ <div className="mt-auto p-2 bg-light">
+ <Button
+ type="primary"
+ variant="outline"
+ size="xs"
+ label="Report an issue"
+ onClick={() =>
+ window.open(
+ 'https://app.asana.com/-/login?u=https%3A%2F%2Fform.asana.com%2F%3Fk%3D2QEC88Dl7ETs2wYYWjkMXg%26d%3D1206648675960041&error=01',
+ '_blank',
+ )
+ }
+ additionalClasses="block w-full"
+ />
+ </div>
)}
</div>
);