[G2M] Fix - map widget pin tooltip key alias

[geoerika]

Changes:

Map

Fixed bugs in editing for alias for map pin tooltip key:

1. When in edit mode & try to change the pin tooltip key, the alias would remain the same as for the previous key & in subsequent steps the app would crash entirely
2. The Clear button did not clear the map pin tooltip key
3. Now it is possible to change the alias of a column key in both sections if it is selected for both domain & map pin tooltip key

Test Story

Note: this solution does introduce a slight slow response while typing, because it is hard to control the state of the alias when it can change inside and outside of the component, and also due to using a debounced value. I think a better solution would be to have a centralized place where we can change all used column key aliases. Will leave that for later though. For now this is still useful and kept at dev level until we decide upon a final solution for aliases.

Before:

https://user-images.githubusercontent.com/41120953/199232724-f8dfc2d9-72f1-4d33-b2d8-874d3dcf0116.mov

After:

https://user-images.githubusercontent.com/41120953/199232769-cc87f192-08ad-4f41-99d2-efb6327a13e4.mov

[github-actions[bot]]

📚 Storybook preview (updated to 1b02a1c607bd374563750d3e01ffe3d11a086b47)

[geoerika]

will having a local state like the tentative state in title/subtitle change work in this case to avoid re-rendering? Once user focus out of the textfield we can update the global state so it makes the update.

Yes, I think so. But in this case we need a better way to save the value to state. I am not crazy of how it is handled in the title/subtitle either. We need a button to make a final save to the state in my opinion. All of these features need a better ui/ux, but they should serve our purpose for now for Cox. And I didn't want to add too many buttons either - perhaps we can use instead of Done a Save state for the Edit button. There are several options we can go with later. Also, the subtitle is not part of the widget itself, and wanted to show the updated alias in the chart or map where it is used to make sure it works.

[geoerika]

aside from the local state suggestion from @kc-leung, we can perhaps also consider centralizing some of the shared/inter-dependent states using a reducer, or easy-peasy store, as a general technique to optimize the rendering

We are using easy-peasy already and I am employing it for shared state between components. However, some of the state has to stay local to the component.