Refactor the Spheres Breakdown page

[nick-stebbings]

It needs redesigning, here are my suggestions:

• Add a treemap or other hierarchical d3 vis at the top of the page #33
  -- We can take the data from the cache, group it by first Sphere, then scale of orbit, using the d3 helper functions as explained on this page [https://observablehq.com/@stopyransky/making-hierarchy-from-any-tabular-data]
  -- The cache data can be obtained using the hook useAtom https://jotai.org/docs/core/use-atom - giving it the nodeStore.entries atom (import nodeStore from 'state/jotaiKeyValueStore)

• The list/sort component is removed (this will not be helpful as we want to limit the number of spheres to 4, anyway)

• The buttons on each Sphere card are reorganised, so that it is obvious what they all do (currently hidden on small screens).

• Each sphere card is a lot smaller in height, so they read more like a tabular list.

• Perhaps there is an option to select a sphere to be the 'Current Sphere" at the app level. This is read/set using the atom in state/currentSphereHierarchyAtom.ts , and there should be some indication (like a primary colour border) around the currently selected sphere which makes it easily visible on this list.

• The title could be changed to 'Sphere Breakdown' (note this will break the render test for this component, so that test will need updating with a new title (tests/e2e/SphereList.test.tsx)

• We should look for a better icon for the page on the left menu. I think we might end up using the icon that is currently used for Vis (a pie chart) as I am going to change that icon for one that looks more like a tree shape, anyway. But there is probably a better alternative than the pie chart somehwere. Rethink the iconography for the main menu #37

Put down any thoughts of your own in this thread as you think of them, as they come up.