[palette] expand feature

Author: paulgirard

packages/gephi-lite/src/components/GraphAppearance/color/ColorPartitionEditor.tsx

@@ -1,6 +1,6 @@
 import { MISSING_PALETTE_COLOR, PartitionColor } from "@gephi/gephi-lite-sdk";
 import cx from "classnames";
-import { map } from "lodash";
+import { values as getValues, map } from "lodash";
 import { FC, useEffect, useMemo, useRef, useState } from "react";
 import AnimateHeight from "react-animate-height";
 import { useTranslation } from "react-i18next";
@@ -9,6 +9,7 @@ import { useDynamicItemData, useGraphDataset } from "../../../core/context/dataC
 import { uniqFieldValuesAsStrings } from "../../../core/graph/utils";
 import { ItemType } from "../../../core/types";
 import ColorPicker from "../../ColorPicker";
+import { getPalette } from "./utils";
 
 const COLLAPSED_HEIGHT = 200;
 
@@ -97,6 +98,18 @@ export const ColorPartitionEditor: FC<{
               {t("appearance.color.default_value", { items: t(`graph.model.${itemType}`) })}
             </label>
           </div>
+          {getValues(color.colorPalette).some((v) => v === null) && (
+            <button
+              className="gl-btn gl-btn-outline"
+              onClick={() => {
+                const newPalette = getPalette(values, color.colorPalette);
+                setColor({ ...color, colorPalette: newPalette });
+              }}
+            >
+              {" "}
+              expand colors
+            </button>
+          )}
         </div>
 
         {!expanded && shouldShowButton && <div className="filler-fade-out position-absolute bottom-0" />}

packages/gephi-lite/src/components/GraphAppearance/color/utils.ts

@@ -1,17 +1,23 @@
 import iwanthue from "iwanthue";
-import { every } from "lodash";
+import { every, values as getValues } from "lodash";
 
 export function isColor(strColor: string): boolean {
   const s = new Option().style;
   s.color = strColor;
   return s.color !== "";
 }
 
-export function getPalette(values: string[]): Record<string, string> {
+export function getPalette(values: string[], originalPalette?: Record<string, string | null>): Record<string, string> {
   if (every(values, (v) => isColor(v))) {
     return values.reduce((iter, v) => ({ ...iter, [v]: v }), {});
   } else {
-    const palette = iwanthue(values.length);
-    return values.reduce((iter, v, i) => ({ ...iter, [v]: palette[i] }), {});
+    const currentColors = getValues(originalPalette).filter((c) => c !== null);
+    const palette = iwanthue(values.length, { originalColorsToExpand: currentColors, colorSpace: "all" });
+    const newColors = palette.filter((c) => !currentColors.includes(c));
+    console.log(currentColors, palette, newColors);
+    return values.reduce(
+      (iter, v, i) => ({ ...iter, [v]: originalPalette && originalPalette[v] ? originalPalette[v] : newColors[i] }),
+      {},
+    );
   }
 }