Force ReactPalette to maintain nodeDataArray list order

GoJS
1

Hello there! I was really hoping to not create a new Topic, sorry :-)

I initially implemented sorting: go.TreeLayout.Sorting… and comparer function for a simple sort and it was fine however, the requirements changed and now I have to first sort in 3 groups and each group sorted by a value. This is not so much a question about GoJs since it’s just JavaScript logic however, I just can’t accomplish this through the sort function, I am unable to get the 3 groups sorted properly to begin with.

We have a search feature that adds 2 groups of Nodes into the original Palette nodeDataArray.

I am feeding the proper sorting order into ReactPalette so, could I just tell Palette to honor that order and avoid the comparer altogether?

Thank you so much!

2

You can set TreeLayout.sorting to one of the two enum values that do not call Array.sort: SortingForwards or SortingReverse. SortingForwards is actually the default value, so don’t set either TreeLayout.sorting or TreeLayout.comparer.

3

I removed the Palette layout prop so sorting and comparer are gone. The default TreeLayout is what I need.

I initially load the Palette with only a single group of Nodes like so:

nodeDataArray = docletsByType;

After the user has performed a Search and results are received back from the API call, I end up with 3 groups of nodes.

if (searchDocletsData) {
        nodeDataArray = [
          ...searchDocletsData.sameType,
          ...searchDocletsData.otherType,
        ];

        // Find and exclude dupe keys
        docletsByType.forEach((doc: any) => {
          const matchById = searchDocletsData.sameType.find(
            (sameType: any) => sameType.id === doc.id
          );
          if (!matchById) {
            nodeDataArray.push(doc);
          }
        });
      }

The Array above loads into the Palette NOT in the same expected order as the Array itself.

docletsByType still appear first. I have set breakpoints and checked the order on the last ReactPalette render and my Array is in the expected order yet, Palette does not honor it when docletsByType is last. Weird?

My expected Palette order is the same as the Array itself:

  1. sameType
  2. otherType
  3. docletsByType
const $ = go.GraphObject.make;
const palette = $(go.Palette, {
      maxSelectionCount: 1,
      contentAlignment: go.Spot.TopLeft,
      padding: new go.Margin(5, 0, 0, 4),
    });

Thank you!!

5

Does that nodeDataArray form three separate trees?
Is the issue that there’s sorting of the root nodes?
Maybe you need to clear the model first.

6

I revised my 2nd post with the code example. I am not 100% sure what you mean by separate trees but the answer would be (I think) no, I have a single tree top-down Palette layout

7

Read the last section of GoJS and React -- Northwoods Software
Try calling clear first.

8

BINGO! thank you :-)

if (searchDocletsData) {
        // Clear Palette to prepare for new nodeDataArray
        paletteRef?.current?.clear();

        nodeDataArray = [
          ...searchDocletsData.sameType,
          ...searchDocletsData.otherType,
        ];

        // Find and exclude dupe keys
        docletsByType.forEach((doc: any) => {
          const matchById = searchDocletsData.sameType.find(
            (sameType: any) => sameType.id === doc.id
          );
          if (!matchById) {
            nodeDataArray.push(doc);
          }
        });
      }