Skip to content
Snippets Groups Projects

Feat/visManager

Merged Feat/visManager
feat/visManager into main
Merged Vink, S.A. (Sjoerd) requested to merge feat/visManager into main
Compare
and
154 files
+ 2481
− 2822
Compare changes
  • Side-by-side
  • Inline
Files
154
apps/web/src/app/app.tsx
+ 76
− 21
import React, { useEffect, useRef, useState } from 'react';
import React, { useEffect, useState } from 'react';
import {
useAppDispatch,
useAuthorizationCache,
@@ -13,16 +13,19 @@ import { Navbar } from '../components/navbar/navbar';
import { Resizable } from '@graphpolaris/shared/lib/components/Resizable';
import { DashboardAlerts } from '@graphpolaris/shared/lib/data-access/authorization/dashboardAlerts';
import { EventBus } from '@graphpolaris/shared/lib/data-access/api/eventBus';
import Onboarding from '../components/onboarding/onboarding';
import { Onboarding } from '../components/onboarding/onboarding';
import { wsQueryRequest } from '@graphpolaris/shared/lib/data-access/broker';
import { URLParams, setParam } from '@graphpolaris/shared/lib/data-access/api/url';
import { Schema } from '@graphpolaris/shared/lib/schema/panel';
import { VisualizationPanel } from '@graphpolaris/shared/lib/vis';
import { QueryBuilder } from '@graphpolaris/shared/lib/querybuilder';
// const Schema = React.lazy(() => import('@graphpolaris/shared/lib/schema/panel'));
// const VisualizationPanel = React.lazy(() => import('@graphpolaris/shared/lib/vis'));
// const QueryBuilder = React.lazy(() => import('@graphpolaris/shared/lib/querybuilder'));
import { SideNavTab, Sidebar } from '@graphpolaris/shared/lib/sidebar';
import { useVisualizationManager } from '@graphpolaris/shared/lib/vis/hooks';
import { ConfigPanel } from '@graphpolaris/shared/lib/vis/components/config';
import { Tooltip, TooltipTrigger, Button, TooltipContent, TooltipProvider } from '@graphpolaris/shared';
import { ControlContainer } from '@graphpolaris/shared/lib/components/controls';
import { Searchbar } from '@graphpolaris/shared/lib/sidebar/search/searchbar';
import { Schema } from '@graphpolaris/shared/lib/schema/panel';
import { Fullscreen, FitScreen, Remove, Schema as SchemaIcon, Search as SearchIcon } from '@mui/icons-material';
export type App = {
load?: string;
@@ -35,6 +38,7 @@ export function App(props: App) {
const session = useSessionCache();
const dispatch = useAppDispatch();
const queryBuilderSettings = useQuerybuilderSettings();
const manager = useVisualizationManager();
const runQuery = () => {
if (session?.currentSaveState && query) {
@@ -54,6 +58,8 @@ export function App(props: App) {
}, [props]);
const [authCheck, setAuthCheck] = useState(false);
const [tab, setTab] = useState<SideNavTab>('Schema');
const [visFullSize, setVisFullSize] = useState<boolean>(false);
return (
<div className="h-screen w-screen overflow-clip">
@@ -69,25 +75,74 @@ 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="flex w-screen h-[calc(100%-4.2rem)]">
<main className="grow flex flex-row h-screen pt-12">
<Sidebar onTab={(tab) => setTab(tab)} />
<Resizable divisorSize={3} horizontal={true} defaultProportion={0.33}>
<div className="h-full w-full panel">
<Schema auth={authCheck} />
</div>
<div className="h-full w-full">
<Resizable divisorSize={3} horizontal={false}>
<div className="w-full h-full panel">
<VisualizationPanel />
{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 truncate">{tab}</h1>
</div>
<div className="shrink-0 sticky right-0 px-0.5 ml-auto items-center flex">
<ControlContainer>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<Button type="secondary" variant="ghost" size="xs" iconComponent={<Remove />} onClick={() => {}} />
</TooltipTrigger>
<TooltipContent side={'top'}>
<p>Hide</p>
</TooltipContent>
</Tooltip>
{tab === 'Schema' && (
<Tooltip>
<TooltipTrigger asChild>
<Button type="secondary" variant="ghost" size="xs" iconComponent={<FitScreen />} onClick={() => {}} />
</TooltipTrigger>
<TooltipContent side={'top'}>
<p>Fit to screen</p>
</TooltipContent>
</Tooltip>
)}
{tab === 'Search' && (
<Tooltip>
<TooltipTrigger asChild>
<Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={() => {}} />
</TooltipTrigger>
<TooltipContent side={'top'}>
<p>Mock icon</p>
</TooltipContent>
</Tooltip>
)}
</TooltipProvider>
</ControlContainer>
</div>
</div>
<div className="w-full h-full panel">
<QueryBuilder onRunQuery={runQuery} />
</div>
</Resizable>
</div>
{tab === 'Search' && <Searchbar />}
{tab === 'Schema' && <Schema auth={authCheck} />}
</div>
) : null}
<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="info-panel flex h-full w-60 ml-[3px] shrink-0 overflow-auto bg-light border">
<ConfigPanel manager={manager} />
</div>
</main>
</div>
</div>