From 58b66d96c73c668b4747efaef83b57cd1e20a2f6 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Fri, 29 Mar 2024 15:53:38 +0100
Subject: [PATCH] feat(visManager): schema settings
---
libs/shared/lib/schema/panel/schema.tsx | 79 ++++-----------
libs/shared/lib/schema/panel/schemaDialog.tsx | 97 +++++++++----------
2 files changed, 65 insertions(+), 111 deletions(-)
diff --git a/libs/shared/lib/schema/panel/schema.tsx b/libs/shared/lib/schema/panel/schema.tsx
index 5c91c02f7..7c8a7ae8d 100644
--- a/libs/shared/lib/schema/panel/schema.tsx
+++ b/libs/shared/lib/schema/panel/schema.tsx
@@ -2,12 +2,9 @@ import { useSchemaGraph, useSchemaSettings, useSearchResultSchema, useSessionCac
import { AlgorithmToLayoutProvider, AllLayoutAlgorithms, LayoutFactory } from '@graphpolaris/shared/lib/graph-layout';
import { schemaExpandRelation, schemaGraphology2Reactflow } from '@graphpolaris/shared/lib/schema/schema-utils';
import { SmartBezierEdge, SmartStepEdge, SmartStraightEdge } from '@tisoap/react-flow-smart-edge';
-
import { useEffect, useMemo, useRef, useState } from 'react';
import ReactFlow, { Edge, Node, ReactFlowInstance, ReactFlowProvider, useEdgesState, useNodesState } from 'reactflow';
-
import 'reactflow/dist/style.css';
-
import { wsSchemaRequest } from '@graphpolaris/shared/lib/data-access/broker/wsSchema';
import { ConnectionDragLine, ConnectionLine } from '@graphpolaris/shared/lib/querybuilder/pills';
import { Button } from '../../components/buttons';
@@ -19,8 +16,10 @@ import SelfEdge from '../pills/edges/self-edge';
import { EntityNode } from '../pills/nodes/entity/entity-node';
import { RelationNode } from '../pills/nodes/relation/relation-node';
import { SchemaDialog } from './schemaDialog';
-import { Fullscreen, Cached, Settings } from '@mui/icons-material';
+import { ExpandMore, ArrowRight } from '@mui/icons-material';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
+import { FormControl } from '../../components';
+import Input from '../../components/inputs';
interface Props {
content?: string;
@@ -45,7 +44,6 @@ const edgeTypes = {
};
export const Schema = (props: Props) => {
- const session = useSessionCache();
const settings = useSchemaSettings();
const searchResults = useSearchResultSchema();
const [toggleSchemaSettings, setToggleSchemaSettings] = useState(false);
@@ -53,6 +51,7 @@ export const Schema = (props: Props) => {
const [edges, setEdges, onEdgesChange] = useEdgesState([] as Edge[]);
const [firstUserConnection, setFirstUserConnection] = useState<boolean>(true);
const [auth, setAuth] = useState(props.auth);
+ const [expanded, setExpanded] = useState<boolean>(true);
const reactFlowInstanceRef = useRef<ReactFlowInstance | null>(null);
@@ -110,59 +109,7 @@ export const Schema = (props: Props) => {
}, [searchResults]);
return (
- <div className="schema-panel w-full h-full">
- <SchemaDialog open={toggleSchemaSettings} onClose={() => setToggleSchemaSettings(false)} />
- {/* <div className="relative flex items-center justify-between z-[2] py-0 px-2 bg-secondary-100 border-b border-secondary-200">
- <h1 className="text-xs font-semibold text-secondary-800">Schema</h1>
- <ControlContainer>
- <TooltipProvider delayDuration={0}>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={fitView} />
- </TooltipTrigger>
- <TooltipContent side={'bottom'}>
- <p>Fit to screen</p>
- </TooltipContent>
- </Tooltip>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- type="secondary"
- variant="ghost"
- size="xs"
- iconComponent={<Cached />}
- onClick={(e) => {
- e.stopPropagation();
- if (session.currentSaveState) wsSchemaRequest(session.currentSaveState);
- else wsGetStates();
- }}
- />
- </TooltipTrigger>
- <TooltipContent side={'bottom'}>
- <p>Refresh schema</p>
- </TooltipContent>
- </Tooltip>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- type="secondary"
- variant="ghost"
- size="xs"
- iconComponent={<Settings />}
- additionalClasses="schema-settings"
- onClick={(e) => {
- e.stopPropagation();
- setToggleSchemaSettings(!toggleSchemaSettings);
- }}
- />
- </TooltipTrigger>
- <TooltipContent side={'bottom'} disabled={toggleSchemaSettings}>
- <p>Schema settings</p>
- </TooltipContent>
- </Tooltip>
- </TooltipProvider>
- </ControlContainer>
- </div> */}
+ <div className="schema-panel w-full h-full flex flex-col justify-between">
{nodes.length === 0 ? (
<p className="text-sm">No Elements</p>
) : (
@@ -189,6 +136,22 @@ export const Schema = (props: Props) => {
</div>
</ReactFlowProvider>
)}
+ <div className="relative bottom-0">
+ <div className="w-full py-0 px-2 bg-secondary-50 cursor-pointer border-y flex" onClick={() => setExpanded(!expanded)}>
+ <Button
+ size="2xs"
+ variant="ghost"
+ iconComponent={expanded ? <ExpandMore /> : <ArrowRight />}
+ onClick={() => setExpanded(!expanded)}
+ />
+ <span className="text-xs font-semibold text-secondary-800 ml-2">Schema settings</span>
+ </div>
+ {expanded && (
+ <div className="h-full w-full overflow-y-hidden">
+ <SchemaDialog open={toggleSchemaSettings} onClose={() => setToggleSchemaSettings(false)} />
+ </div>
+ )}
+ </div>
</div>
);
};
diff --git a/libs/shared/lib/schema/panel/schemaDialog.tsx b/libs/shared/lib/schema/panel/schemaDialog.tsx
index 644be97cd..4800c3be5 100644
--- a/libs/shared/lib/schema/panel/schemaDialog.tsx
+++ b/libs/shared/lib/schema/panel/schemaDialog.tsx
@@ -22,59 +22,50 @@ export const SchemaDialog = (props: DialogProps) => {
}
return (
- <>
- {props.open && (
- <FormDiv hAnchor="left">
- <FormCard>
- <FormBody
- onSubmit={(e) => {
- e.preventDefault();
- submit();
- }}
- >
- <FormTitle title="Schema Settings" onClose={props.onClose} />
- <FormHBar />
- <FormControl>
- <Input
- type="dropdown"
- label="Type of Connection"
- value={state.connectionType}
- options={['Default', 'Step', 'Straight', 'Bezier']}
- onChange={(value: string | number) => {
- setState({ ...state, connectionType: value as any });
- }}
- />
- </FormControl>
- <FormHBar />
- <FormControl>
- <Input
- type="boolean"
- value={state.animatedEdges}
- label="Animated Edges"
- onChange={(value: boolean) => {
- setState({ ...state, animatedEdges: value as any });
- }}
- />
- </FormControl>
- <FormHBar />
- <FormControl>
- <Input
- type="dropdown"
- label="Layout Type"
- value={state.layoutName}
- options={Object.values(Layouts)}
- onChange={(value: string | number) => {
- setState({ ...state, layoutName: value as any });
- }}
- />
- </FormControl>
- <FormHBar />
+ <form
+ className="w-full"
+ onSubmit={(e) => {
+ e.preventDefault();
+ submit();
+ }}
+ >
+ <FormControl>
+ <Input
+ type="dropdown"
+ label="Type of Connection"
+ value={state.connectionType}
+ options={['Default', 'Step', 'Straight', 'Bezier']}
+ onChange={(value: string | number) => {
+ setState({ ...state, connectionType: value as any });
+ }}
+ />
+ </FormControl>
+ <FormHBar />
+ <FormControl>
+ <Input
+ type="boolean"
+ value={state.animatedEdges}
+ label="Animated Edges"
+ onChange={(value: boolean) => {
+ setState({ ...state, animatedEdges: value as any });
+ }}
+ />
+ </FormControl>
+ <FormHBar />
+ <FormControl>
+ <Input
+ type="dropdown"
+ label="Layout Type"
+ value={state.layoutName}
+ options={Object.values(Layouts)}
+ onChange={(value: string | number) => {
+ setState({ ...state, layoutName: value as any });
+ }}
+ />
+ </FormControl>
+ <FormHBar />
- <FormActions onClose={props.onClose} />
- </FormBody>
- </FormCard>
- </FormDiv>
- )}
- </>
+ <FormActions onClose={props.onClose} />
+ </form>
);
};
--
GitLab