React component implementation #17
Conversation
#7 - code refactoring, - updating package dependencies, - export and building React components.
|
@Stukova I think the main |
|
@neesjanvaneck I have made some changes to the style of the React components so that they fit well into the page elements. I've fixed the placement of the control panel, interaction with the visualization and full screen mode. Also added two new dependencies:
|
@rokotyan @neesjanvaneck Done 85061b7. |
Thanks a lot for these fixes @Stukova! I found four other issues related to the style of the React components:
|
|
@Stukova Since the update of "mobx": "^4.9.3" -> "^6.6.0" (and "mobx-react-lite": "^1.4.1" -> "^3.4.0"), the following warnings appear in the console:
|
- use case-sensitive names, - use prefix @ to avoid confusion in the import.
Stukova
force-pushed
the
feature/export-react-components
branch
from
9b8c688 to
7bc24e7
Compare
https://mobx.js.org/api.html#makeautoobservable makeAutoObservable has the same effect as extendObservable, but does not trigger strict-mode warnings
When using the React component in the application with React 18, the slider height is higher.
This reverts commit 34c41f4.
This reverts commit 9e78724.
Share button and URL preview panel
This reverts commit 5019981.
Prevent from duplicate Worker code
This reverts commit fa220c2.
I would like to introduce the changes that add support to our project for building React components, as suggested in the issue #7. Further below I have described all the changes I have made.
The main change I've made is upgrading Webpack 4 to Webpack 5. Webpack 5 has better support for creating a library. Related changes:
--colorskey. Colors are enabled by default in Webpack 5 (Docs:--colorsis not a valid options in webpack 5 rails/webpacker#3138 (comment)).--watchkey. Dev server will reload/refresh the page by default.--verbosekey to Webpack configstats.loggingoption.--display-error-detailskey to Webpack configstats.errorDetailsoption.I've also add new scripts for building React components library:
build-component/build-component:vosviewerscript,build-component:dimensionsscript,build-component:zeta-alphascript,build-component:roriscript.They build a component for each project in the lib folder and copy the
package.jsonto the same place as well.See copy-package-json.js Node script where
package.jsonis created.I've also add lib folder to a
.gitignorelist.As for refactoring, I moved
Helmetcomponent from each App to the entry point for the Application. It creates a title for the page, that is no needed in the React component.And added
DATA_MAP,DATA_NETWORKandDATA_JSONstring global variable. Papaparse, which is located inside Web Worker, will not upload local files. Local files will be downloaded from outside Web Worker using therequirefunction.DATA_MAP,DATA_NETWORKandDATA_JSONarejsonConfig.parameters.map,jsonConfig.parameters.networkandjsonConfig.parameters.jsonstring values. I did this way, sorequirewill get a global string variable.Requiredoesn't support an argument as a variable. (@rokotyan )As a result of using
require, I deleted fromwebpack.config.jsoncopying of data files. Now all local data files are created as a separate module file.Note! Because of
require,config.json,config-zeta-alpha.jsonandconfig-dimensions.jsondoes not supportparameters.map,parameters.networkandparameters.jsonas the URL value. @neesjanvaneck do you see a case where a file from a URL will be needed as an initial file for an Application or a React component?I've updated, added or removed the following packages.
Updated:
Added:
Added node-polyfill-webpack-plugin (https://github.com/webpack/changelog-v5#automatic-nodejs-polyfills-removed). tinyurl uses http and https but not have them as a dependencies. htmlparser2 uses buffer as well.
Added workerize-loader. Webpack 5 have build-in worker loader, but it doesn't have the inline option. Inline option useful for building libraries.
Removed:
Globalfrom "@emotion/core" ->injectGlobalfrom "@emotion/css".withStylesthat we are using from "@mui/styles" can be replaced with build-in Mui componentssxproperty.window.location.search.I've also moved MobX, mobx-react-lite, React and ReactDOM to a peerDependencies. These packages must be in
package.jsonfor the React components aspeerDependencies, but not sure if it is ok if they are in the mainpackage.jsonaspeerDependencies. (@rokotyan )@rokotyan , could you please review the parts where I noticed you in the description.
@neesjanvaneck could you please review the React component library names.
Example of using the component:
parametersprop include all parameters that was supported from a URL string query anddata- an initial network data.parametersanddataare optional props.dataprop has the same type that has json data in the current state.