Immutable state

Let's explore using immutable state using Immutable.js

Cons

• Quite some boilerplate code:
  • No property access on Immutable.Map.
  • Doesn't play nice with lodash, and Immutable.JS itself provides only limited alternatives.
• Have to translate from and to Javascript every now and then, for example when interfacing third party code.
• Slower? (Probably, but not sure if this is really a concern for us.)

Pros

• State is safe, cannot by accident get into invalid state because of some mutation, somewhere.
• States are comparable, makes it easy to detect if updates are necessary.
• States can be saved for easy undo/redo functionality.

Alternative and supplementary approaches

• Alternative to Immutable.js is Mori which seems to provide more functionality for working with the datastructures. But I don't like that it seems a bit tied to ClosureScript. And Immutable.js comes from Facebook, which might mean better interplay with React in the future.
• seamless-immutable does seem to address some of our cons. However, it feels to me like a half-measure and I'm more comfortable with a library that's has a greater following.
• react-cursor -- To be honest, I do not completely understand all of that.
• We might also still want to have a look at alternative Flux implementations, like marty.js which apparently works well with immutable state.

Todo

Pedigree representation

We probably want to change our representation of a pedigree to:

• Members: Immutable.Map<String, Immutable.Map>
• Nests: Immutable.Map<Immutable.List<String>, Immutable.Map>

So a map of members indexed by ID, and a map of nests indexed by a list of IDs (father and mother).

This will make for fast and easy lookups in both collections.

Immutable state in PedigreeSVG

I currently left this unchanged, but I think it would be really nice to have the LayoutEngine return something like this:

• Member positions: Immutable.Map<String, Immutable.List>
• Nest positions: Immutable.Map<Immutable.List<String>, Immutable.List>

Where the maps are indexed as proposed above for the pedigree and the values are the calculated coordinates. This can be combined with props.pedigree in PedigreeSVG to do the actual drawing.

General refactoring

As-is, this mainly introduces boilerplate code and no functionality. This can be improved by some small refactorings, but is intentional as a first exploration.