feat(map_nodelink)

Added simple nodelink layer for the map visualization, and also the config panel for several layers

libs/shared/lib/components/colorComponents/colorPicker/index.tsx

+import React from 'react';
+import { TwitterPicker } from 'react-color';
+import { useFloating, autoUpdate, offset, flip, shift, useInteractions, useClick, FloatingPortal } from '@floating-ui/react';
+
+type Props = {
+  value: any;
+  updateValue: any;
+};
+
+export default function ColorPicker({ value, updateValue }: Props) {
+  const [open, setOpen] = React.useState(false);
+
+  const { x, y, strategy, context, refs, floatingStyles } = useFloating({
+    placement: 'bottom',
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(5), flip(), shift({ padding: 5 })],
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([useClick(context)]);
+
+  return (
+    <>
+      <div
+        className="p-1 inline-block cursor-pointer"
+        ref={refs.setReference}
+        {...getReferenceProps({
+          onClick: () => setOpen(!open),
+        })}
+      >
+        <div
+          className="w-5 h-5"
+          style={{
+            backgroundColor: `rgb(${value[0]}, ${value[1]}, ${value[2]})`,
+          }}
+        />
+      </div>
+      {open && (
+        <FloatingPortal>
+          <div
+            ref={refs.setFloating}
+            style={{
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+              ...floatingStyles,
+            }}
+            className="z-10"
+            {...getFloatingProps()}
+          >
+            <TwitterPicker
+              triangle="top-right"
+              color={{ r: value[0], g: value[1], b: value[2] }}
+              onChangeComplete={(color: any) => {
+                const rgb = color.rgb;
+                const newValue = [rgb.r, rgb.g, rgb.b];
+                updateValue(newValue);
+                setOpen(false);
+              }}
+            />
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+}