From 86e5f5404f11c21e7a03c093320a1b649bbfaeae Mon Sep 17 00:00:00 2001
From: Sjoerd <svink@graphpolaris.com>
Date: Wed, 11 Sep 2024 14:47:33 +0000
Subject: [PATCH] fix: fixed rendering error in mapvis
---
.../colorComponents/colorPicker/index.tsx | 62 ++++++++++---------
.../layers/nodelink-layer/NodeLinkOptions.tsx | 4 +-
2 files changed, 34 insertions(+), 32 deletions(-)
diff --git a/libs/shared/lib/components/colorComponents/colorPicker/index.tsx b/libs/shared/lib/components/colorComponents/colorPicker/index.tsx
index 15030ba93..8c5df2795 100644
--- a/libs/shared/lib/components/colorComponents/colorPicker/index.tsx
+++ b/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>
+ )
);
}
diff --git a/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx b/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx
index cb73469aa..6f88ab232 100644
--- a/libs/shared/lib/vis/visualizations/mapvis/layers/nodelink-layer/NodeLinkOptions.tsx
+++ b/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 } } })
}
--
GitLab