From 9f72ce518b8dbf2d8fcdf144813b4136d2ef5f4b Mon Sep 17 00:00:00 2001
From: Marco Christian Krenn <marco.krenn@gmail.com>
Date: Tue, 12 Nov 2024 10:40:47 +0100
Subject: [PATCH] add indicies to sortBy (#511)

* add indicies to sortBy

* address comments

* reduce runs

* Fix sort by distance

---------

Co-authored-by: SorsOps <80043879+sorsOps@users.noreply.github.com>
---
 .changeset/itchy-avocados-teach.md            |  5 ++
 .../src/nodes/color/lib/sortColors.ts         | 47 ++++++++++++-------
 .../src/nodes/color/sortByDistance.ts         | 30 ++++++++++--
 3 files changed, 61 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/itchy-avocados-teach.md

diff --git a/.changeset/itchy-avocados-teach.md b/.changeset/itchy-avocados-teach.md
new file mode 100644
index 000000000..071d15884
--- /dev/null
+++ b/.changeset/itchy-avocados-teach.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": minor
+---
+
+Add indicies to sort tokens by, which helps you to select the right items.
diff --git a/packages/graph-engine/src/nodes/color/lib/sortColors.ts b/packages/graph-engine/src/nodes/color/lib/sortColors.ts
index 79a4caade..3c8ee0442 100644
--- a/packages/graph-engine/src/nodes/color/lib/sortColors.ts
+++ b/packages/graph-engine/src/nodes/color/lib/sortColors.ts
@@ -1,4 +1,4 @@
-import { orderBy } from 'lodash-es';
+import { Color } from '@/types.js';
 import { toColor } from './utils.js';
 
 export const compareFunctions = {
@@ -14,21 +14,36 @@ export const compareFunctions = {
 	Distance: (foreground, background) => foreground.deltaE(background, '2000')
 };
 
-export const sortTokens = (colors, compareColor, type, algorithm) =>
-	orderBy(
-		colors.map(color => {
+export type SortedTokens = { colors: Color[]; indices: number[] };
+
+export const sortTokens = (
+	colors,
+	compareColor,
+	type,
+	algorithm
+): SortedTokens => {
+	const background = toColor(compareColor);
+	const compareFunction = compareFunctions[type];
+
+	return colors
+		.reduce((acc, color, index) => {
 			const foreground = toColor(color);
-			const background = toColor(compareColor);
-			const compareValue = compareFunctions[type](
-				foreground,
-				background,
-				algorithm
-			);
+			const compareValue = compareFunction(foreground, background, algorithm);
 
-			return {
+			acc.push({
 				color,
-				compareValue
-			};
-		}),
-		['compareValue']
-	).map(color => color.color);
+				compareValue,
+				index
+			});
+			return acc;
+		}, [])
+		.sort((a, b) => a.compareValue - b.compareValue)
+		.reduce(
+			(acc, { color, index }) => {
+				acc.colors.push(color);
+				acc.indices.push(index);
+				return acc;
+			},
+			{ colors: [], indices: [] } as SortedTokens
+		);
+};
diff --git a/packages/graph-engine/src/nodes/color/sortByDistance.ts b/packages/graph-engine/src/nodes/color/sortByDistance.ts
index 3da036d33..34f2f66bc 100644
--- a/packages/graph-engine/src/nodes/color/sortByDistance.ts
+++ b/packages/graph-engine/src/nodes/color/sortByDistance.ts
@@ -1,6 +1,10 @@
-import { ColorSchema, StringSchema } from '../../schemas/index.js';
+import { Color, INodeDefinition, ToInput, ToOutput } from '../../index.js';
+import {
+	ColorSchema,
+	NumberSchema,
+	StringSchema
+} from '../../schemas/index.js';
 import { ContrastAlgorithm } from '../../types/index.js';
-import { INodeDefinition } from '../../index.js';
 import { Node } from '../../programmatic/node.js';
 import { arrayOf } from '../../schemas/utils.js';
 import { sortTokens } from './lib/sortColors.js';
@@ -10,6 +14,19 @@ export default class SortByDistanceNode extends Node {
 	static type = 'studio.tokens.color.sortColorsBy';
 	static description =
 		'Sorts Colors by constrast, distance, hue, lightness, or saturation to a Color';
+
+	declare inputs: ToInput<{
+		colors: Color[];
+		compareColor: Color;
+		type: 'Contrast' | 'Hue' | 'Lightness' | 'Saturation' | 'Distance';
+		algorithm: ContrastAlgorithm;
+	}>;
+
+	declare outputs: ToOutput<{
+		value: Color[];
+		indices: number[];
+	}>;
+
 	constructor(props: INodeDefinition) {
 		super(props);
 
@@ -37,13 +54,16 @@ export default class SortByDistanceNode extends Node {
 		this.addOutput('value', {
 			type: arrayOf(ColorSchema)
 		});
+		this.addOutput('indices', {
+			type: arrayOf(NumberSchema)
+		});
 	}
 
 	execute(): void | Promise<void> {
 		const { colors, compareColor, type, algorithm } = this.getAllInputs();
+		const sorted = sortTokens(colors, compareColor, type, algorithm);
 
-		const sortedTokens = sortTokens(colors, compareColor, type, algorithm);
-
-		this.outputs.value.set(sortedTokens);
+		this.outputs.value.set(sorted.colors);
+		this.outputs.indices.set(sorted.indices);
 	}
 }