Convert DeckGlMap component to typescript

[hkfb]

Related to #610

[shadab-skhan]

Seems to be blocked by this issue in dash
plotly/dash#719

[anders-kiaer]

Do you have some more details on the error/issue you see @shadab-skhan? 🙂

I'm not fully into the details, but think we have done this already in webviz-core-components components folder (https://github.com/equinor/webviz-core-components/tree/master/react/src/lib/components) where all components are .tsx. To my understanding the npm transpile build command both in that repository and here in this one(?) converts .tsx to .jsx (such that only .tsx needs to go into git and the version control).

[shadab-skhan]

The issue I am getting is after build, generated DeckGLMap.py doesn't contains python docstring and list of available_properties is empty, because of which the dash app isn't able to recognize the props.

I think the possible solution to fix this is to declare PropTypes in tsx file.

[anders-kiaer]

👍 Something you have seen previously as well @rubenthoms?

[rubenthoms]

There is no way around defining PropTypes yet since dash-generate-components is depending on them to identify the properties and their descriptions required in Python. It is possible to completely change to TypeScript though, but it requires an extra step where (only!) all main component files are transpiled to JS before dash-generate-components is run. In wcc we transpile first and then remove all subfolders in the components directories before we run dash-generate-components. This is in order to prevent the creation of Python wrappers for subcomponents. PropTypes are still necessary though (no identification of TypeScript types).

FYI: Dash utilizes react-docgen to extract meta information: https://github.com/reactjs/react-docgen.

See also:
https://github.com/plotly/dash/blob/3334c07f59cb1ee9bc4596ebbdce6edb41f94968/dash/development/component_generator.py#L39-L73
https://github.com/plotly/dash/blob/e8ac94919105a91c76a966c21aca2ec7b0297e22/dash/extract-meta.js#L81-L97