feat(visManager): json settings

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}

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}

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 ? (

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 = {