From 8c5478f81463c4a7231130bbea015ad7ec4108b2 Mon Sep 17 00:00:00 2001
From: 2427021 <s.a.vink@students.uu.nl>
Date: Wed, 27 Mar 2024 17:01:48 +0100
Subject: [PATCH] feat(visManager): json settings
---
libs/shared/lib/components/inputs/index.tsx | 2 +-
.../customFlowPills/entitypill/entitypill.tsx | 4 +-
libs/shared/lib/vis/configuration/panel.tsx | 2 -
.../visualizations/rawjsonvis/rawjsonvis.tsx | 82 +++++++++++++++----
4 files changed, 69 insertions(+), 21 deletions(-)
diff --git a/libs/shared/lib/components/inputs/index.tsx b/libs/shared/lib/components/inputs/index.tsx
index abb4bd547..e4576c2c0 100644
--- a/libs/shared/lib/components/inputs/index.tsx
+++ b/libs/shared/lib/components/inputs/index.tsx
@@ -227,7 +227,7 @@ export const BooleanInput = ({ label, value, onChange, tooltip }: BooleanProps)
return (
<div data-tip={tooltip || null} className={tooltip ? 'tooltip' : ''}>
<label className={`label cursor-pointer w-fit gap-2 px-0 py-1`}>
- <span className="label-text">{label}</span>
+ <span className="text-sm">{label}</span>
<input
type="checkbox"
checked={value}
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
index 14d09c9c2..4474c07dd 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
@@ -62,7 +62,9 @@ export const EntityFlowElement = React.memo((node: SchemaReactflowEntityNode) =>
position={Position.Right}
className={'!top-8 !right-2 !bg-accent-700 !rounded-none'}
/>
- <div className="text-center py-1">{data.name}</div>
+ <div className="">
+ <div className="text-center py-1">{data.name}</div>
+ </div>
{data?.attributes && (
<PillDropdown
node={node}
diff --git a/libs/shared/lib/vis/configuration/panel.tsx b/libs/shared/lib/vis/configuration/panel.tsx
index c46fa3ade..d635719bd 100644
--- a/libs/shared/lib/vis/configuration/panel.tsx
+++ b/libs/shared/lib/vis/configuration/panel.tsx
@@ -13,8 +13,6 @@ type Props = {
export function ConfigPanel({ manager }: Props) {
const session = useSessionCache();
- console.log(session);
-
return (
<div className="w-full h-full flex flex-col border">
{manager.active ? (
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
index 337db9620..e71607313 100644
--- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
@@ -2,26 +2,39 @@ import React, { useEffect } from 'react';
import ReactJSONView from 'react-json-view';
import { VisualizationPropTypes, VISComponentType } from '../../types';
import { GraphMetaData } from '@graphpolaris/shared/lib/data-access/statistics';
-import { SettingsContainer, SettingsHeader } from '@graphpolaris/shared/lib/vis/configuration';
+import { SettingsContainer } from '@graphpolaris/shared/lib/vis/configuration';
+import Input from '@graphpolaris/shared/lib/components/inputs';
-export interface RawJSONVisProps {}
+export interface RawJSONVisProps {
+ showDataTypes: boolean;
+ showObjectSize: boolean;
+ enableClipboard: boolean;
+ theme: string;
+ iconStyle: string;
+}
-const configuration: RawJSONVisProps = {};
+const configuration: RawJSONVisProps = {
+ showDataTypes: false,
+ showObjectSize: false,
+ enableClipboard: false,
+ theme: 'bright:inverted',
+ iconStyle: 'circle',
+};
-export const RawJSONVis = React.memo(({ data }: VisualizationPropTypes) => {
+export const RawJSONVis = React.memo(({ data, configuration }: VisualizationPropTypes) => {
return (
- <div>
- <div style={{ overflowY: 'auto' }}>
- <div
- style={{
- marginTop: '50px',
- paddingLeft: '30px',
- }}
- className="font-mono text-sm"
- >
- <ReactJSONView src={data} collapsed={1} quotesOnKeys={false} displayDataTypes={false} />
- </div>
- </div>
+ <div className="overflow-y-auto">
+ <ReactJSONView
+ src={data}
+ collapsed={1}
+ quotesOnKeys={false}
+ style={{ padding: '20px' }}
+ theme={configuration.theme}
+ iconStyle={configuration.iconStyle}
+ displayDataTypes={configuration.displayDataTypes}
+ displayObjectSize={configuration.displayObjectSize}
+ enableClipboard={configuration.enableClipboard}
+ />
</div>
);
});
@@ -35,7 +48,42 @@ const RawJSONSettings = ({
graph: GraphMetaData;
updateSettings: (val: any) => void;
}) => {
- return <SettingsContainer>To be implemented</SettingsContainer>;
+ return (
+ <SettingsContainer>
+ <Input
+ type="dropdown"
+ label="Select a theme"
+ value={configuration.theme}
+ options={['bright:inverted', 'monokai', 'ocean']}
+ onChange={(val) => updateSettings({ theme: val })}
+ />
+ <Input
+ type="dropdown"
+ label="Icon style"
+ value={configuration.iconStyle}
+ options={['circle', 'square', 'triangle']}
+ onChange={(val) => updateSettings({ iconStyle: val })}
+ />
+ <Input
+ type="boolean"
+ label="Show data types"
+ value={configuration.showDataTypes}
+ onChange={(val) => updateSettings({ showDataTypes: val })}
+ />
+ <Input
+ type="boolean"
+ label="Show object size"
+ value={configuration.showObjectSize}
+ onChange={(val) => updateSettings({ showObjectSize: val })}
+ />
+ <Input
+ type="boolean"
+ label="Enable clipboard"
+ value={configuration.enableClipboard}
+ onChange={(val) => updateSettings({ enableClipboard: val })}
+ />
+ </SettingsContainer>
+ );
};
export const RawJSONComponent: VISComponentType = {
--
GitLab