fix: fixed rendering error in mapvis

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

@@ -16,39 +16,41 @@ type Props = {
 
 export function ColorPicker({ value, onChange }: Props) {
   return (
-    <div>
-      <Popover>
-        <PopoverTrigger
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-        >
-          <div className="w-4 h-4 rounded-sm" style={{ backgroundColor: `rgb(${value[0]}, ${value[1]}, ${value[2]})` }} />
-        </PopoverTrigger>
-        <PopoverContent>
-          <div
-            className="grid grid-cols-4 gap-2 p-2"
+    value && (
+      <div>
+        <Popover>
+          <PopoverTrigger
             onClick={(e) => {
               e.stopPropagation();
             }}
           >
-            {visualizationColors.GPCat.colors[14].map((hexColor) => {
-              const [r, g, b] = hexToRgb(hexColor);
-              return (
-                <div
-                  key={hexColor}
-                  className="w-4 h-4 rounded-sm cursor-pointer"
-                  style={{ backgroundColor: hexColor }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onChange([r, g, b]);
-                  }}
-                />
-              );
-            })}
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
+            <div className="w-4 h-4 rounded-sm" style={{ backgroundColor: `rgb(${value[0]}, ${value[1]}, ${value[2]})` }} />
+          </PopoverTrigger>
+          <PopoverContent>
+            <div
+              className="grid grid-cols-4 gap-2 p-2"
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              {visualizationColors.GPCat.colors[14].map((hexColor) => {
+                const [r, g, b] = hexToRgb(hexColor);
+                return (
+                  <div
+                    key={hexColor}
+                    className="w-4 h-4 rounded-sm cursor-pointer"
+                    style={{ backgroundColor: hexColor }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onChange([r, g, b]);
+                    }}
+                  />
+                );
+              })}
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+    )
   );
 }

libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx

@@ -122,7 +122,7 @@ export function NodeLinkOptions({
                             <span className="font-semibold">Color</span>
                             {!nodeSettings.colorByAttribute && (
                               <ColorPicker
-                                value={nodeSettings.color}
+                                value={nodeSettings?.color}
                                 onChange={(val) => {
                                   updateLayerSettings({ nodes: { ...layerSettings.nodes, [nodeType]: { ...nodeSettings, color: val } } });
                                 }}
@@ -280,7 +280,7 @@ export function NodeLinkOptions({
                       </AccordionHead>
                       <AccordionBody>
                         <ColorPicker
-                          value={edgeSettings.color}
+                          value={edgeSettings?.color}
                           onChange={(val) =>
                             updateLayerSettings({ edges: { ...settings.edges, [edgeType]: { ...edgeSettings, color: val } } })
                           }