ObservableGroupMap for Map to Arrays

[BrianHung]

I'm currently using mobx-state-tree and have a map of objects that look like

const Cell = {
  id: uuid,
  colId: uuid,
  rowId: uuid
}

const cells = observable.map({...});

I would like to create arrays that effectively index on colId and rowId and which are cached as long as the entries remain the same.

const getRowCells = (rowId) => values(cells).filter(cell => cell.rowId === rowId)

I'm running into an performance issues with mobx-state-tree (mobxjs/mobx-state-tree#1994) where arrays are not cached since MST doesn't allowed for custom computed; and where using mobx computed is also too slow.

Fastest way to index on an attribute is to use observe, so I'm wondering if anyone has built a ObservableGroupMap util for Map to Arrays.

Is there a util in mobx or mobx-utils that can be similar to this API?

const cells = observable.map({...});
const cellsByRowId = new ObservableGroupMap(cells, (cell) => cell.rowId)
const cellsByColId = new ObservableGroupMap(cells, (cell) => cell.colId)

[NaridaL]

What is the key for your map? Could you flip it around by just having an array as a base and having your cells map be another ObservableGroupMap?

[BrianHung]

The key for the cell map is id. Can't use an array as the base since we're dependent on map for getting and deleting cells by id.

Is there a performant way of taking an observable map and having a derived observable array of map values that we can use as the base to ObservableGroupMap?

Feel like a close analogy is how you can create indices on tables in SQL databases: id is the primary key, and would like to index on rowId and colId.

[NaridaL]

Can't think of an out-of-the-box of doing this currently. Implementing your own shouldn't be much work though, take a look at https://github.com/mobxjs/mobx-utils/blob/master/src/ObservableGroupMap.ts for inspiration.

[BrianHung]

Yah I've managed to make a slight change to ObservableGroupMap to support ObservableMap as the base input.

Now I'm just running into a problem mentioned in #284 with mobx-state-tree: I can't decide whether to use as the item, the dehanced (proxy) or enhanced (ObjectNode) value written in https://github.com/mobxjs/mobx-state-tree/blob/master/packages/mobx-state-tree/src/types/complex-types/map.ts#L311

Storing ogmInfo on the MST proxy results in an escapeJSONPath error when calling delete item[ogmInfo] because MST only expects keys which are strings.

Storing ogmInfo on the enhanced (ObjectNode) is fine, but you expect ogm.get(key) to return an observable array of dehanced values.

[BrianHung]

https://gist.github.com/BrianHung/90526784d6f0a403b512ab5a47ce8914

[BrianHung]

@NaridaL Closed the issue but would love feedback if you have time, specifically whether to keep enhance or dehanced values in the group arrays. I don't have as experience with mobx as you do ☺️