Open ridoo opened 10 months ago
Regarding this issue I think it is worth to note, that the size of this repository has grown huge (around 1GB! already).
Probably, this is due to the fact, that this repo represents actually a Django app which ships all static files, i.e. the compiled JS assets. However, as the geonode_mapstore_client
is installed from git repository anyway, it may become faster (depending on the fast your network is) to compile all JavaScript resource when GeoNode base image is being built.
Is there any advice how to deal with this problem? @mattiagiupponi is this a current limitation, that we cannot implement extensions/plugins separate from the geonode-mapstore-plugin, i.e. code laying somewhere else? Do you have any idea how to approach this? Otherwise I would have to fork the whole repository just for some simple plugins.
What I want to do is to separate plugin development:
mapstore-project create extension
Button
)index.json
to /static/mapstore/
which declares to load js from local dev server (started by npm start
)_geonode_config.html
(for example dataset_viewer.cfg
)The default extension (from the template) loads ok and I can see the message. However, importing common components (like the Button
) I get compiler errors like this (in the Browser's development console):
Error loading MapStore extension "MyPlugin": Error: Cannot find module '@js/components/Button'
And this from the npm start
output:
ERROR in ./js/extension/plugins/Extension.jsx 31:0-163
Module not found: Error: Can't resolve '@js/selectors/resource' in '/home/ridoo/data/coding/projects/plasticops/geonode-plasticops/geonode/apps/litter_assessment/client/js/extension/plugins'
@ container entry ./plugin[0]
hi @ridoo, @allyoucanmap could answer your questions. At the moment there isn't an "official" way. We have experimented with various alternatives. The latest one was building a MapStore Extensions.
In general, what we did was to develop and build an extension (with MapStore as the only dependency) with the mapstore-project compile extension
command, place it under the geonode-project/tree/master/src/project_name/static/mapstore/extensions path, and configure it inside the index.json
file, which is the index of the available MapStore extensions.
Extensions is the approach that we will continue to pursue since it also goes in the direction of uploading and configuring extensions at runtime. MapStore already supports this with the Application Contexts. The GeoNode client will soon have them, along with an updated version of MapStore itself. The development is at a good point. What will remain to be done is implementing the backend in GeoNode to support the upload of the extensions.
@giohappy That sound good. I saw @dsuren1 is working on that, right? To me uploading plugins is not important. I just want to implement plugins/extensions re-using stuff from geonode-mapstore-client without placing everything inside a whole fork. Would this even be possible with Application Contexts and do you have a plan, when it becomes usable?
At the moment there isn't an "official" way. We have experimented with various alternatives. The latest one was building a MapStore Extensions.
In fact, this is what I am trying to do. The challenge is to get the geonode-mapstore-client imports right. What I tried to describe is, that there's no good dependency for the extension's package.json
from where I can import. The build (prod and dev) complain about the missing imports.
However, I tried some things. For example, I linked the geonode-mapstore-client project into my node_modules
folder and added the path to webpack's aliases, making @js
map to multiple paths:
alias: {
"@mapstore/framework": projectConfig.frameworkPath,
"@js": [
path.resolve(appDirectory, "node_modules/geonode-mapstore-client/js"),
path.resolve(appDirectory, "js")
]
}
Maybe the mapstore-project
could be made more flexible with regard passing some webpack overrides from the extension's package.json
scripts (@offtherailz @afabiani what do you think?). But, for no surprise, the build includes all the geonode-mapstore-client code and results in an Extension/index.js
which is around half a Mega-byte.
Another hack was to comment out the cesium/index.css
import in Map.jsx
as it raised another error. I saw, the imports are different in master
but this would result in a similar error, I guess.
All these are quite hacky try-arounds. If you do not see any other option, I fear, forking geonode-mapstore-client is the way I have to go.
@allyoucanmap will probably be able to give some feedback and guidance on this.
In one of our activities we configured the following package.json
, but I'm not sure if it would work for you.
{
"name": "client",
"version": "1.0.0",
"description": "mapstore extension",
"eslintConfig": {
"extends": [
"@mapstore/eslint-config-mapstore"
],
"parserOptions": {
"babelOptions": {
"configFile": "./node_modules/mapstore/build/babel.config.js"
}
},
"globals": {
"__MAPSTORE_PROJECT_CONFIG__": false,
"__MAPSTORE_EXTENSION_CONFIG__": false
}
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all",
"not IE 11",
"not UCAndroid 12.12"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"scripts": {
"compile": "mapstore-project compile extension && node ./postCompile.js",
"lint": "eslint js --ext .jsx,.js",
"start": "mapstore-project start extension",
"test": "mapstore-project test extension",
"test:watch": "mapstore-project test:watch extension"
},
"devDependencies": {
"@mapstore/project": "1.0.22"
},
"dependencies": {
"mapstore": "git+https://github.com/geosolutions-it/MapStore2.git#2022.01.xx"
},
"mapstore": {
"extensionName": "EmpiricalEquationCalculator"
}
}
@giohappy @allyoucanmap In fact, this is exactly what I am doing. However, with this I am only able to create the MapStore extension. But how to integrate the extension with geonode-mapstore-client (components, state, etc.)? For example, a simple button in the dataset_view
which triggers some kind of action based on the shown resource.
As described, I have tried to push the limits but it seems that I have to create another fork for such a simple extension/plugin. Am I wrong here?
FWIW is to have some importable geonode-mapstore-client API which I can use to seemlessly implement plugins for geonode-mapstore-client. As far I can see, having just a mere MapStore plugin fells short if you want to (re-)use components and state of the geonode-mapstore-client.
I guess, this is not an easy task and would need deeper thoughts how to make this possible.
Edit: I added the enhancement
label an did minor edits on the description (e.g. removed the bug title)
We will need ideas from @allyoucanmap here :)
@ridoo @giohappy
But how to integrate the extension with geonode-mapstore-client (components, state, etc.)? For example, a simple button in the dataset_view which triggers some kind of action based on the shown resource.
We have some training documentation where it's described how to include a mapstore extension inside geonode-mapstore-client. The approach described in the training doc does not allow to access directly the custom modules/components from the geonode-mapstore-client but it allows to interact with the geonode-mapstore-client state and inject components inside pages. We could think on a way to package/expose only the specific modules/methods of the geonode-mapstore-client project such as actions, api and selectors. I'm not sure about the component yet, probably for the most common ones it could be better to port them in the mapstore core and remove from geonode-mapstore-client.
... but it allows to interact with the geonode-mapstore-client state and inject components inside pages.
Interesting. Still limited, but may be enough for my simple case. Do you have a simple example, how to interact with the state inside the extension?
We could think on a way to package/expose only the specific modules/methods of the geonode-mapstore-client project such as actions, api and selectors. I'm not sure about the component yet, probably for the most common ones it could be better to port them in the mapstore core and remove from geonode-mapstore-client.
To be honest, I did not expect you are thinking of making geonode-mapstore-client client part of the MapStore project itself. I always thought of it as an actual client implementation using the MapStore framework. Not sure, if moving everything to MapStore is convoluting the framework. Does MapStore organize code to separate framework from specific implementations?
However, if this would be possible, I think the geonode-mapstore-client repository could be thinned to contain the python integration only.
npmjs does not list a (to be fair a very outdated) version of the geonode-mapstore-client. I understand that this repository is actually a python contrib app which provides single page UI (based on MapStore) as compiled static assets. However, the problem is, that there is no way* to add geonode-mapstore-client as JS dependency so that I import and re-use its modules.
(* of course I could link to a local working copy of geonode-mapstore-client, but this is not the idea how this should actually work, right?)
However, my plan is to extend existing plugins (i.e.
DetailsViewer
) and adjustlocalConfig.json
to make my own changes which I can ship with another contrib module. This contrib module adds a new resource type which I want to configure on the UI side. Before, I had to make my adjustments in a geonode-mapstore-client fork, but now I want to challenge the stack (geonode => geonode-mapstore-client => contrib module) to ship the UI changes within the contrib module itself.For more context, look here: https://github.com/geosolutions-it/MapStore2/issues/9354
Expected Behavior
npm install @geonode/geonode-mapstore-client
or the like works.Other things I tried
Trying to
npm install 'https://gitpkg.now.sh/geonode/geonode-mapstore-client/geonode_mapstore_client/client?4.1.1'
runs into a gateway error. The repository is so big (due to the compiled JS assets), it becomes quite unhandy.