Use generic entries and grouped_entries

Do not use `collected_inks` and `grouped_collected_inks`, but instead
convert to `entries` and `grouped_entries` as early as possible. Then
the generic clustering code can be extracted later on and be reused.

app/javascript/src/admin/components/clustering/reducer.js

@@ -80,9 +80,7 @@ const actualReducer = (state, { type, payload }) => {
     case SET_MACRO_CLUSTERS:
       return { ...state, macroClusters: payload, loadingMacroClusters: false };
     case SET_MICRO_CLUSTERS: {
-      const microClusters = _.reverse(
-        _.sortBy(payload, "collected_inks.length")
-      );
+      const microClusters = _.reverse(_.sortBy(payload, "entries.length"));
       return {
         ...state,
         microClusters,
@@ -185,7 +183,7 @@ const selectMicroClusters = (selectedBrands, microClusters) => {
         microClusters.filter((c) =>
           selectedBrands.map((s) => s.value).includes(c.simplified_brand_name)
         ),
-        "collected_inks.length"
+        "entries.length"
       )
     );
     return filtered.length ? filtered : microClusters;

app/javascript/src/admin/micro-clusters/CreateRow.jsx

@@ -74,7 +74,7 @@ export const CreateRow = ({ afterCreate }) => {
 };
 
 const computeValues = (activeCluster) => {
-  const grouped = _.groupBy(activeCluster.collected_inks, (ci) =>
+  const grouped = _.groupBy(activeCluster.entries, (ci) =>
     ["brand_name", "line_name", "ink_name"].map((n) => ci[n]).join(",")
   );
   const ci = _.maxBy(_.values(grouped), (array) => array.length)[0];
@@ -105,12 +105,15 @@ const createMacroClusterAndAssign = (
       .then((json) =>
         assignCluster(microClusterId, json.data.id).then((microCluster) => {
           const macroCluster = microCluster.macro_cluster;
-          const grouped_collected_inks = groupedInks(
-            macroCluster.micro_clusters.map((c) => c.collected_inks).flat()
+          const grouped_entries = groupedInks(
+            macroCluster.micro_clusters.map((c) => c.entries).flat()
           );
           dispatch({
             type: ADD_MACRO_CLUSTER,
-            payload: { ...macroCluster, grouped_collected_inks }
+            payload: {
+              ...macroCluster,
+              grouped_entries
+            }
           });
           afterCreate(microCluster);
         })

app/javascript/src/admin/micro-clusters/DisplayMacroClusters.jsx

@@ -103,9 +103,9 @@ const MacroClusterRows = ({ afterAssign }) => {
 // This is the most expensive computation in this app. Group inks by name first
 // and only compare between those that are really different.
 const withDistance = (macroClusters, activeCluster) => {
-  const activeGroupedInks = activeCluster.grouped_collected_inks;
+  const activeGroupedInks = activeCluster.grouped_entries;
   return macroClusters.map((c) => {
-    const macroClusterInks = c.grouped_collected_inks.concat(c);
+    const macroClusterInks = c.grouped_entries.concat(c);
     return {
       ...c,
       distance: dist(macroClusterInks, activeGroupedInks)
@@ -231,7 +231,7 @@ const MacroClusterRow = ({ macroCluster, afterAssign, selected }) => {
               <tbody>
                 <CollectedInksList
                   collectedInks={macroCluster.micro_clusters
-                    .map((c) => c.collected_inks)
+                    .map((c) => c.entries)
                     .flat()}
                 />
               </tbody>

app/javascript/src/admin/micro-clusters/DisplayMicroCluster.jsx

@@ -14,7 +14,7 @@ export const DisplayMicroCluster = ({ afterCreate }) => {
           <CreateRow afterCreate={afterCreate} />
         </thead>
         <tbody>
-          <CollectedInksList collectedInks={activeCluster.collected_inks} />
+          <CollectedInksList collectedInks={activeCluster.entries} />
           <tr>
             <td colSpan="8" style={{ backgroundColor: "black" }}></td>
           </tr>

app/javascript/src/admin/micro-clusters/DisplayMicroClusters.jsx

@@ -49,10 +49,10 @@ const updateMacroCluster = (id, dispatch) => {
       .then((json) => {
         const formatter = new Jsona();
         const macroCluster = formatter.deserialize(json);
-        const grouped_collected_inks = groupedInks(
+        const grouped_entries = groupedInks(
           macroCluster.micro_clusters.map((c) => c.collected_inks).flat()
         );
-        return { ...macroCluster, grouped_collected_inks };
+        return { ...macroCluster, grouped_entries };
       })
       .then((macroCluster) =>
         dispatch({ type: UPDATE_MACRO_CLUSTER, payload: macroCluster })

app/javascript/src/admin/micro-clusters/assignCluster.jsx

@@ -12,5 +12,8 @@ export const assignCluster = (microClusterId, macroClusterId) =>
     .then((response) => response.json())
     .then((json) => {
       const formatter = new Jsona();
-      return formatter.deserialize(json);
+      let microCluster = formatter.deserialize(json);
+      microCluster.entries = microCluster.collected_inks;
+      delete microCluster.collected_inks;
+      return microCluster;
     });

app/javascript/src/admin/micro-clusters/loadClusters.js

@@ -21,7 +21,13 @@ export const loadMicroClusters = (dispatch) => {
         .filter((c) => c.collected_inks.length > 0)
         .map((c) => {
           const grouped_collected_inks = groupedInks(c.collected_inks);
-          return { ...c, grouped_collected_inks };
+          let cluster = {
+            ...c,
+            entries: c.collected_inks,
+            grouped_entries: grouped_collected_inks
+          };
+          delete cluster.collected_inks;
+          return cluster;
         });
       data = [...data, ...pageData];
       if (next_page) {
@@ -55,7 +61,16 @@ export const loadMacroClusters = (dispatch) => {
         const grouped_collected_inks = groupedInks(
           c.micro_clusters.map((c) => c.collected_inks).flat()
         );
-        return { ...c, grouped_collected_inks };
+        const micro_clusters = c.micro_clusters.map((c) => {
+          let adjusted_cluster = { ...c, entries: c.collected_inks };
+          delete adjusted_cluster.collected_inks;
+          return adjusted_cluster;
+        });
+        return {
+          ...c,
+          micro_clusters,
+          grouped_entries: grouped_collected_inks
+        };
       });
       data = [...data, ...pageData];
       if (next_page) {

app/javascript/src/admin/micro-clusters/loadClusters.spec.js

@@ -93,8 +93,8 @@ describe("loadMicroClusters", () => {
       const payload = arg.payload;
       expect(payload).toHaveLength(1);
       const microCluster = payload[0];
-      expect(microCluster.collected_inks).toHaveLength(2);
-      expect(microCluster.grouped_collected_inks).toHaveLength(1);
+      expect(microCluster.entries).toHaveLength(2);
+      expect(microCluster.grouped_entries).toHaveLength(1);
       done();
     }, 500);
   });
@@ -203,7 +203,9 @@ describe("loadMacroClusters", () => {
       expect(payload).toHaveLength(1);
       const macroCluster = payload[0];
       expect(macroCluster.micro_clusters).toHaveLength(1);
-      expect(macroCluster.grouped_collected_inks).toHaveLength(2);
+      expect(macroCluster.grouped_entries).toHaveLength(2);
+      const microCluster = macroCluster.micro_clusters[0];
+      expect(microCluster.entries).toHaveLength(2);
       done();
     }, 500);
   });