Minor bugfixes

Author: Ozbej Golob

src/components/parcoord/ParcoordComponent.svelte

@@ -191,8 +191,8 @@
         ? 100 * dimensions.length + margin.left + margin.right
         : originalWidth;
     setTimeout(() => {
-      axesComponent.clearSVG();
-      axesComponent.renderAxes(width);
+      axesComponent?.clearSVG();
+      axesComponent?.renderAxes(width);
       linesComponent.debounceDrawLines();
     }, 0);
   }
@@ -240,8 +240,8 @@
 
   function setMarginLeft() {
     setTimeout(() => {
-      axesComponent.calculateMarginLeft();
-    }, 0);
+      axesComponent?.calculateMarginLeft();
+    }, 1000);
   }
 
   function setMarginRight(histogramsVisible: boolean) {

src/components/partitions/ColorPickerModal.svelte

@@ -11,6 +11,7 @@
 
   export let isOpen: boolean;
   export let partitionColor: RgbaColor;
+  export let partitionColorOld: RgbaColor;
   export let position: CoordinateType;
   export let setColor: (color: RgbaColor) => void;
 
@@ -43,14 +44,21 @@
 
   function addCustomColor(color: RgbaColor) {
     rgb = color;
+    setColor(rgb);
     customColors = [...customColors, rgbaToHexString(color)];
+    selectedCustomIndex = customColors.length;
     localStorage.setItem('partitionsCustomColors', JSON.stringify(customColors));
   }
 
   function deleteCustomColor(i: number | null) {
     if (i === null) return;
     customColors = [...customColors.slice(0, i), ...customColors.slice(i + 1)];
     localStorage.setItem('partitionsCustomColors', JSON.stringify(customColors));
+    const defaultColor = hexStringToRgba(PARTITION_COLORS[0]);
+    setColor(defaultColor);
+    rgb = defaultColor;
+    partitionColorOld = defaultColor;
+    selectedCustomIndex = null;
   }
 
   onMount(() => {
@@ -80,6 +88,7 @@
           : ''}"
         on:click={() => {
           rgb = hexStringToRgba(color);
+          setColor(rgb);
           selectedCustomIndex = null;
         }}
         on:keydown={() => {}}
@@ -101,6 +110,7 @@
               : ''}"
             on:click={() => {
               rgb = hexStringToRgba(color);
+              setColor(rgb);
               selectedCustomIndex = i;
             }}
             on:keydown={() => {}}
@@ -121,7 +131,7 @@
       <Button
         size="xs"
         color="red"
-        disabled={selectedCustomIndex === null || usedColors.includes(rgbaToHexString(rgb))}
+        disabled={selectedCustomIndex === null}
         on:click={() => deleteCustomColor(selectedCustomIndex)}
         class="focus:ring-transparent"><TrashBinOutline /></Button
       >
@@ -131,11 +141,18 @@
     <Button
       size="sm"
       on:click={() => {
-        setColor(rgb);
         isOpen = false;
       }}
-      class="focus:ring-transparent">Apply</Button
+      class="focus:ring-transparent">OK</Button
+    >
+    <Button
+      size="sm"
+      color="red"
+      on:click={() => {
+        setColor(partitionColorOld);
+        isOpen = false;
+      }}
+      class="focus:ring-transparent">Cancel</Button
     >
-    <Button size="sm" color="red" on:click={() => (isOpen = false)} class="focus:ring-transparent">Cancel</Button>
   </div>
 </div>

src/components/partitions/ContextMenu.svelte

@@ -7,6 +7,7 @@
   import { addRecordsToPartition } from './util';
   import type { PartitionType } from './types';
   import type { CoordinateType } from '../../util/types';
+  import { DEFAULT_PARTITION } from '../../util/util';
 
   let contextMenuElement: HTMLElement;
   let showMenu = false;
@@ -33,7 +34,7 @@
 
   let partitions: Map<string, PartitionType> = new Map();
   const unsubscribePartitions = partitionsStore.subscribe((value) => {
-    partitions = value;
+    partitions = new Map([...value].filter(([key, value]) => key !== DEFAULT_PARTITION));
   });
 
   let partitionsData: string[] = [];
@@ -95,23 +96,30 @@
     on:mouseenter={handleMouseEnter}
     on:mouseleave={handleMouseLeave}
   >
+    <DropdownItem
+      on:click={() => addRecords(DEFAULT_PARTITION)}
+      defaultClass="font-medium py-0.5 px-0.5 text-xs hover:bg-gray-100 flex items-center justify-between"
+      >Move to Default Partition</DropdownItem
+    >
     {#if $selectedPartitionStore !== null}
       <DropdownItem
         on:click={() => addRecords($selectedPartitionStore)}
         defaultClass="font-medium py-0.5 px-0.5 text-xs hover:bg-gray-100">Add to Selected Partition</DropdownItem
       >
     {/if}
-    <DropdownItem defaultClass="font-medium py-0.5 px-0.5 text-xs hover:bg-gray-100 flex items-center justify-between"
-      >Add to Partition<ChevronRight class="w-3 h-3 ms-2" /></DropdownItem
-    >
-    <Dropdown class="p-1 w-40 max-h-36 overflow-y-auto overflow-x-hidden" placement={submenuStyle}>
-      {#each [...partitions] as [key, value]}
-        <DropdownItem
-          defaultClass="font-medium py-0.5 px-0.5 text-xs hover:bg-gray-100"
-          on:click={() => addRecords(key)}>{key}</DropdownItem
-        >
-      {/each}
-    </Dropdown>
+    {#if partitions.size > 0}
+      <DropdownItem defaultClass="font-medium py-0.5 px-0.5 text-xs hover:bg-gray-100 flex items-center justify-between"
+        >Add to Partition<ChevronRight class="w-3 h-3 ms-2" /></DropdownItem
+      >
+      <Dropdown class="p-1 w-40 max-h-36 overflow-y-auto overflow-x-hidden" placement={submenuStyle}>
+        {#each [...partitions] as [key, value]}
+          <DropdownItem
+            defaultClass="font-medium py-0.5 px-0.5 text-xs hover:bg-gray-100"
+            on:click={() => addRecords(key)}>{key}</DropdownItem
+          >
+        {/each}
+      </Dropdown>
+    {/if}
     <DropdownDivider />
     <DropdownItem
       defaultClass="font-medium py-0.5 px-0.5 text-xs hover:bg-gray-100"

src/components/partitions/PartitionElement.svelte

@@ -29,6 +29,7 @@
   let isColorPickerOpen = false;
   let colorPickerPosition = { x: 0, y: 0 };
   let isNameEditable = false;
+  let partitionColorOld: RgbaColor;
   let partitionNameOld: string;
   let shapesDropdownElement: HTMLDivElement;
 
@@ -57,6 +58,7 @@
       x: e.clientX,
       y: e.clientY
     };
+    partitionColorOld = partition.color;
   }
 
   function handleFocus(e: FocusEvent) {
@@ -131,6 +133,7 @@
   isOpen={isColorPickerOpen}
   position={colorPickerPosition}
   partitionColor={partition.color}
+  {partitionColorOld}
   {setColor}
 />