From 6f42c3726f53af92e0160922a4fe9f8bd4516ac3 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Sun, 24 Mar 2024 18:50:42 +0100
Subject: [PATCH] feat(visManager): navbar
---
.../dbConnectionSelector.tsx | 20 ++++++++++---------
apps/web/src/components/navbar/navbar.tsx | 16 ++++++++-------
.../shared/lib/components/dropdowns/index.tsx | 12 ++++-------
libs/shared/lib/vis/manager.tsx | 14 ++++++-------
4 files changed, 30 insertions(+), 32 deletions(-)
diff --git a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
index 0a68e06a1..a61340226 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
-import { Add, Delete, Settings } from '@mui/icons-material';
+import { Add, Delete, Settings, StorageOutlined } from '@mui/icons-material';
import { useAppDispatch, useSchemaGraph, useSessionCache, useAuthorizationCache } from '@graphpolaris/shared/lib/data-access';
import { deleteSaveState, selectSaveState } from '@graphpolaris/shared/lib/data-access/store/sessionSlice';
import { SettingsForm } from './forms/settings';
@@ -10,6 +10,7 @@ import { clearQB } from '@graphpolaris/shared/lib/data-access/store/querybuilder
import { clearSchema } from '@graphpolaris/shared/lib/data-access/store/schemaSlice';
import { DatabaseStatus, SaveStateI, nilUUID, wsDeleteState } from '@graphpolaris/shared/lib/data-access/broker';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@graphpolaris/shared/lib/components/tooltip';
+import { Icon } from '@graphpolaris/shared';
export default function DatabaseSelector({}) {
const dispatch = useAppDispatch();
@@ -70,7 +71,7 @@ export default function DatabaseSelector({}) {
}, [connecting]);
return (
- <div className="menu-walkthrough">
+ <div className="menu-walkthrough ml-4">
<TooltipProvider delayDuration={1000}>
{settingsMenuOpen !== undefined && (
<SettingsForm
@@ -96,14 +97,15 @@ export default function DatabaseSelector({}) {
<p className="ml-2 truncate">Connecting to {session.saveStates[session.currentSaveState].name}</p>
</>
) : session.currentSaveState && session.currentSaveState in session.saveStates && session.currentSaveState !== nilUUID ? (
- <>
- <div
- className={`h-2 w-2 rounded-full ${
- session.testedSaveState[session.currentSaveState] === DatabaseStatus.tested ? 'bg-success-500' : 'bg-danger-500'
- }`}
- />
+ <div className="flex items-center">
+ <Icon component={<StorageOutlined />} size={20} />
+ <div className="absolute bottom-0 left-0 transform translate-x-2 -translate-y-2">
+ <div
+ className={`h-2 w-2 rounded-full ${session.testedSaveState[session.currentSaveState] === DatabaseStatus.tested ? 'bg-success-500' : 'bg-danger-500'}`}
+ />
+ </div>
<p className="ml-2 truncate">Connected DB: {session.saveStates[session.currentSaveState].name}</p>
- </>
+ </div>
) : session.saveStates === undefined ? (
<>
<LoadingSpinner />
diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index 92c7a548d..20ec0cf82 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -43,17 +43,19 @@ export const Navbar = () => {
return (
<div className="w-full h-auto px-5">
<div className="navbar flex items-center justify-between w-auto gap-2 xl:gap-10">
- <a href="https://graphpolaris.com/" target="_blank" className="w-[10rem] md:w-fit shrink-0 text-dark">
- <GpLogo className="w-48" />
- </a>
- <DatabaseSelector />
+ <div>
+ <a href="https://graphpolaris.com/" target="_blank" className="w-[10rem] md:w-fit shrink-0 text-dark">
+ <GpLogo className="w-48" />
+ </a>
+ <DatabaseSelector />
+ </div>
<div>
- <SearchBar />
- <ColorMode />
+ {/* <SearchBar /> */}
+ {/* <ColorMode /> */}
<div className="w-fit" ref={dropdownRef}>
<div
- className="relative inline-flex items-center justify-center w-8 h-8 overflow-hidden bg-secondary-500 rounded hover:bg-secondary-600 transition-colors duration-150 ease-in-out cursor-pointer"
+ className="relative inline-flex items-center justify-center w-8 h-8 overflow-hidden bg-secondary-500 rounded-full hover:bg-secondary-600 transition-colors duration-150 ease-in-out cursor-pointer"
onClick={() => setMenuOpen(!menuOpen)}
>
<span className="font-medium text-light">{authCache.username?.slice(0, 2).toUpperCase()}</span>
diff --git a/libs/shared/lib/components/dropdowns/index.tsx b/libs/shared/lib/components/dropdowns/index.tsx
index 96ec000e5..658d30e4b 100644
--- a/libs/shared/lib/components/dropdowns/index.tsx
+++ b/libs/shared/lib/components/dropdowns/index.tsx
@@ -1,5 +1,7 @@
import React, { useState, useEffect, useRef, ReactNode } from 'react';
import styles from './dropdowns.module.scss';
+import Icon from '../icon';
+import { ArrowDropDown } from '@mui/icons-material';
type DropdownContainerProps = {
children: ReactNode;
@@ -13,7 +15,7 @@ export const DropdownContainer = React.forwardRef<HTMLDivElement, DropdownContai
{children}
</div>
);
- }
+ },
);
type DropdownButtonProps = {
@@ -32,13 +34,7 @@ export function DropdownButton({ title, onClick, size, disabled }: DropdownButto
disabled={disabled}
>
<span className={`text-${size}`}>{title}</span>
- <svg className="-mr-1 h-5 w-5 text-secondary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
- <path
- fillRule="evenodd"
- d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
- clipRule="evenodd"
- />
- </svg>
+ <Icon component={<ArrowDropDown />} size={16} />
</button>
</>
);
diff --git a/libs/shared/lib/vis/manager.tsx b/libs/shared/lib/vis/manager.tsx
index 8702e6519..5fda1569d 100644
--- a/libs/shared/lib/vis/manager.tsx
+++ b/libs/shared/lib/vis/manager.tsx
@@ -23,7 +23,6 @@ export const useVisualizationManager = () => {
const [configuration, setConfiguration] = useState<any>();
const [visualization, setVisualization] = useState<VISComponentType>();
- const [settings, setSettings] = useState<any>(null);
const [settingsOpen, setSettingsOpen] = useState<boolean>(false);
const [hoverItem, setHoverItem] = useState<any>();
const [selected, setSelected] = useState<any>();
@@ -36,8 +35,6 @@ export const useVisualizationManager = () => {
if (active && Visualizations[active]) {
const componentModule = await Visualizations[active]();
const component = componentModule.default;
- setVisualization(component);
- setSettings(null);
if (!(active in Object.keys(visualizations))) {
// Visualization doesn't yet exist so add its configuration
@@ -46,6 +43,7 @@ export const useVisualizationManager = () => {
}
setConfiguration(visualizations[active]);
+ setVisualization(component);
}
};
@@ -60,7 +58,7 @@ export const useVisualizationManager = () => {
const updateSettings = (newSettings: any) => {
if (active) {
const updatedSettings = { ...configuration, ...newSettings };
- setSettings(updatedSettings);
+ setConfiguration(updatedSettings);
dispatch(updateVisualization({ id: active, settings: updatedSettings }));
}
};
@@ -72,7 +70,7 @@ export const useVisualizationManager = () => {
const renderSettings = () => {
return (
visualization?.settings &&
- settings &&
+ configuration &&
settingsOpen && (
<FormDiv>
<FormCard>
@@ -84,7 +82,7 @@ export const useVisualizationManager = () => {
>
<FormTitle title="Visualization settings" onClose={() => {}} />
<FormHBar />
- <visualization.settings configuration={settings} graph={meta} updateSettings={updateSettings} />
+ <visualization.settings configuration={configuration} graph={meta} updateSettings={updateSettings} />
<FormHBar />
<FormActions
onClose={() => {
@@ -101,12 +99,12 @@ export const useVisualizationManager = () => {
const renderComponent = () => {
return (
visualization?.component &&
- settings && (
+ configuration && (
<visualization.component
data={graphQueryResult}
schema={schema}
ml={ml}
- settings={settings}
+ configuration={configuration}
dispatch={dispatch}
handleHover={handleHover}
handleSelect={handleSelect}
--
GitLab