Improvement suggestions

[lubos-turek]

Hello there ✋

I tried to check the repo out, but could not run it on m1 MacBook:

Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1

So in order to know what the repo is about, I dig into the code. I saw some potential for improvement so I tried to refactor a few things and figure out what’s going on as a by-product. Win-win.

I think we would find other things to improve if we discussed the purpose of each code chunk or if I spent more time on it. I just changed what caught my eye right away when reading through the code.

At the end it’s quite a lot of code changed so I tried to focus on one thing in each commits so I suggest you review each commit separately one by one and as such it should not be hard to review. It might be hard to review the diff of the whole thing (all commits at once) because there is a lot of deletions of unused imports. I also added some comments into the PR to explain the changes.

As said before: I could not run the thing out of the box and didn’t bother trying, so if you plan to merge (that would make me happy 😉 ) then please try everything to make sure everything works as before.

[lubos-turek]

I destructured the props here so that this is not needed inside the body of the function:

let datasetName = props.datasetName;
  let datasetInfo = props.datasetInfo;
  let categoryCounts = props.categoryCounts;
  let customModesByCategory = props.customModesByCategory;
  let categoryDispatch = props.categoryDispatch;

  let modelInfo = props.modelInfo;
  let setModelInfo = props.setModelInfo;

  let clusterIsOpen = props.clusterIsOpen;
  let setClusterIsOpen = props.setClusterIsOpen;
  let clusteringStrength = props.clusteringStrength;
  let selection = props.selection;
  let setSelection = props.setSelection;
  let clusters = props.clusters;
  let knnImagesDispatch = props.knnImagesDispatch;
  let setOrderingMode = props.setOrderingMode;
  let generateEmbedding = props.generateEmbedding;
  let setSubset = props.setSubset;
  let mode = props.mode;
  let setMode = props.setMode;
  let labelModeCategory = props.labelModeCategory;

I would do the same thing for other components inside this file, and then go further and put each component in its own file as this file is getting too long?

[lubos-turek]

This is a valid dependency of the hook and can be added safely without any side-effect

[lubos-turek]

I put async function inside a sync one in useEffect.

This is what useEffect expects and it's much better practice:
https://ultimatecourses.com/blog/using-async-await-inside-react-use-effect-hook

[lubos-turek]

I use size.label as key in ClusterModal.

Warning: I can't be 100% sure this is okay without seeing the real data. I assume the label is unique

[lubos-turek]

Here it is really needed because var declared in "else branch" had already been declared in "if branch". It's strange behavior (hoisting) of var.
Better use let and decalae it at the beginning of the function