From a13e17d9451797043374e20a547ff8622f951419 Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Thu, 13 Jun 2024 21:51:05 +0200
Subject: [PATCH] fix: recover settings popup
---
libs/shared/lib/components/layout/Popover.tsx | 2 +-
libs/shared/lib/inspector/InspectorPanel.tsx | 2 +-
.../lib/querybuilder/panel/QueryBuilder.tsx | 57 +++++++------------
libs/shared/lib/schema/panel/Schema.tsx | 19 ++++++-
.../lib/schema/panel/SchemaSettings.tsx | 2 +-
5 files changed, 43 insertions(+), 39 deletions(-)
diff --git a/libs/shared/lib/components/layout/Popover.tsx b/libs/shared/lib/components/layout/Popover.tsx
index 7a2543de1..3a4f9e063 100644
--- a/libs/shared/lib/components/layout/Popover.tsx
+++ b/libs/shared/lib/components/layout/Popover.tsx
@@ -180,7 +180,7 @@ export const PopoverContent = React.forwardRef<HTMLDivElement, React.HTMLProps<H
aria-labelledby={context.labelId}
aria-describedby={context.descriptionId}
{...context.interactions.getFloatingProps(props)}
- className={`w-fit ${className || ''}`}
+ className={`w-fit bg-light border-[1px] ${className || ''}`}
>
{props.children}
</div>
diff --git a/libs/shared/lib/inspector/InspectorPanel.tsx b/libs/shared/lib/inspector/InspectorPanel.tsx
index 9d570ef29..c5532a14c 100644
--- a/libs/shared/lib/inspector/InspectorPanel.tsx
+++ b/libs/shared/lib/inspector/InspectorPanel.tsx
@@ -6,7 +6,7 @@ import { useDispatch } from 'react-redux';
import { ConnectionInspector } from './ConnectionInspector';
import { VisualizationSettings } from '../vis/components/config/VisualizationSettings';
import { SelectionConfig } from '../vis/components/config/SelectionConfig';
-import { SchemaDialog } from '../schema/panel/SchemaSettings';
+import { SchemaSettings } from '../schema/panel/SchemaSettings';
import { QuerySettings } from '../querybuilder/panel/querysidepanel/QuerySettings';
import { useActiveVisualization } from '@graphpolaris/shared/lib/data-access';
diff --git a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
index 3f3ac4618..d5a38f395 100644
--- a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
@@ -44,6 +44,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../
import { resultSetFocus } from '../../data-access/store/interactionSlice';
import { QueryBuilderDispatcherContext } from './QueryBuilderDispatcher';
import { Popover, PopoverContent, PopoverTrigger } from '../../components/layout/Popover';
+import { QuerySettings } from './querysidepanel/QuerySettings';
export type QueryBuilderProps = {
onRunQuery?: () => void;
@@ -458,7 +459,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
<ControlContainer>
<TooltipProvider delayDuration={0}>
<Tooltip>
- <TooltipTrigger asChild>
+ <TooltipTrigger>
<Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={fitView} />
</TooltipTrigger>
<TooltipContent side={'top'}>
@@ -466,7 +467,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
</TooltipContent>
</Tooltip>
<Tooltip>
- <TooltipTrigger asChild>
+ <TooltipTrigger>
<Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Delete />} onClick={() => clearAllNodes()} />
</TooltipTrigger>
<TooltipContent side={'top'}>
@@ -474,7 +475,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
</TooltipContent>
</Tooltip>
<Tooltip>
- <TooltipTrigger asChild>
+ <TooltipTrigger>
<Button
variantType="secondary"
variant="ghost"
@@ -490,7 +491,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
</TooltipContent>
</Tooltip>
<Tooltip>
- <TooltipTrigger asChild>
+ <TooltipTrigger>
<Button
variantType="secondary"
variant="ghost"
@@ -506,27 +507,23 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
<p>Layouts</p>
</TooltipContent>
</Tooltip>
+ <Popover>
+ <PopoverTrigger>
+ <Tooltip>
+ <TooltipTrigger>
+ <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Settings />} className="query-settings" />
+ </TooltipTrigger>
+ <TooltipContent side={'top'}>
+ <p>Query builder settings</p>
+ </TooltipContent>
+ </Tooltip>
+ </PopoverTrigger>
+ <PopoverContent>
+ <QuerySettings />
+ </PopoverContent>
+ </Popover>
<Tooltip>
- <TooltipTrigger asChild>
- <Button
- variantType="secondary"
- variant="ghost"
- size="xs"
- iconComponent={<Settings />}
- className="query-settings"
- onClick={(event) => {
- event.stopPropagation();
- if (toggleSettings === 'settings') setToggleSettings(undefined);
- else setToggleSettings('settings');
- }}
- />
- </TooltipTrigger>
- <TooltipContent side={'top'} disabled={toggleSettings === 'settings'}>
- <p>Query builder settings</p>
- </TooltipContent>
- </Tooltip>
- <Tooltip>
- <TooltipTrigger asChild>
+ <TooltipTrigger>
<Button
variantType="secondary"
variant="ghost"
@@ -564,17 +561,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
<PopoverTrigger>
<Tooltip>
<TooltipTrigger>
- <Button
- variantType="secondary"
- variant="ghost"
- size="xs"
- iconComponent={<Lightbulb />}
- onClick={(event) => {
- // event.stopPropagation();
- // if (toggleSettings === 'ml') setToggleSettings(undefined);
- // else setToggleSettings('ml');
- }}
- />
+ <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Lightbulb />} />
</TooltipTrigger>
<TooltipContent side={'top'} disabled={toggleSettings === 'ml'}>
<p>Machine learning</p>
diff --git a/libs/shared/lib/schema/panel/Schema.tsx b/libs/shared/lib/schema/panel/Schema.tsx
index 20d12776e..6bc23f973 100644
--- a/libs/shared/lib/schema/panel/Schema.tsx
+++ b/libs/shared/lib/schema/panel/Schema.tsx
@@ -9,7 +9,8 @@ import { NodeEdge } from '../pills/edges/node-edge';
import { SelfEdge } from '../pills/edges/self-edge';
import { SchemaEntityPill } from '../pills/nodes/entity/SchemaEntityPill';
import { SchemaRelationPill } from '../pills/nodes/relation/SchemaRelationPill';
-import { SchemaDialog } from './SchemaSettings';
+import { SchemaSettings } from './SchemaSettings';
+import { Settings } from '@mui/icons-material';
import { ContentCopy, FitScreen, Fullscreen, KeyboardArrowDown, KeyboardArrowRight, Remove } from '@mui/icons-material';
import { AlgorithmToLayoutProvider, AllLayoutAlgorithms, LayoutFactory } from '../../graph-layout';
import { ConnectionLine, ConnectionDragLine } from '../../querybuilder';
@@ -18,6 +19,7 @@ import { Panel } from '../../components';
import { Tooltip, TooltipContent, TooltipTrigger } from '../../components/tooltip/Tooltip';
import { resultSetFocus } from '../../data-access/store/interactionSlice';
import { useDispatch } from 'react-redux';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/layout/Popover';
interface Props {
content?: string;
@@ -159,6 +161,21 @@ export const Schema = (props: Props) => {
<p>Fit to screen</p>
</TooltipContent>
</Tooltip>
+ <Popover>
+ <PopoverTrigger>
+ <Tooltip>
+ <TooltipTrigger>
+ <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Settings />} className="schema-settings" />
+ </TooltipTrigger>
+ <TooltipContent side={'top'}>
+ <p>Schema settings</p>
+ </TooltipContent>
+ </Tooltip>
+ </PopoverTrigger>
+ <PopoverContent>
+ <SchemaSettings />
+ </PopoverContent>
+ </Popover>
</>
}
>
diff --git a/libs/shared/lib/schema/panel/SchemaSettings.tsx b/libs/shared/lib/schema/panel/SchemaSettings.tsx
index 0d3c0fa55..0a6534d52 100644
--- a/libs/shared/lib/schema/panel/SchemaSettings.tsx
+++ b/libs/shared/lib/schema/panel/SchemaSettings.tsx
@@ -4,7 +4,7 @@ import { SchemaConnectionTypes, schemaConnectionTypeArray, setSchemaSettings } f
import { Input } from '../../components/inputs';
import { Layouts } from '../../graph-layout';
-export const SchemaDialog = () => {
+export const SchemaSettings = () => {
const settings = useSchemaSettings();
const dispatch = useAppDispatch();
--
GitLab