CaosDB Webui Ext Map

Map extension for the CaosDB Webui based on Leaflet and React.

Available Scripts

In the tools directory you can run

./copy-map-to-webui.sh

Which on a mac with Linkahead running in Docker builds the Map and copies it into the docker container

In the project directory, you can run:

npm run mock

Runs the map in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm run mock:standalone

Shows the map component only configured in accordance with the standalone.config.js file in the root directory.

npm run mock:dev:standalone

As above but accesses Linkahead instance through defined URL in webpack.config.js

npm run build:standalone

Builds the map component configured in accordance with the standalone.config.js file in the root directory and without the toggle button.

npm run build:dev:standalone

As above but accesses Linkahead instance through defined URL in webpack.config.js

npx serve -s dist -l 5000

In order to test standalone iFrame

• Configure the /select_query.json file to have the appropriate format string
• Configure the src parameter in the Iframe - iframe/index.html - to be the url of the npx server and an appropriate query string e.g http://localhost:5000?authorId=14104
• We support multiple and optional entries here if the FormatString is correctly specified e.g formatString: "SELECT id, name, parent, Event.latitude, Event.longitude FROM Dataset WITH AN authors=${authorId} [[ OR authors=${authorId} ]]", Here we have one optional block so the authorId can be optionally included in the Url or not (and this supports multiple authorId's). The very first authorsId in the string is required ``[[ ]]` square brackets signify that this part is optional.
• To include multiple id's in the URL use as follows: http://localhost:5000?authorId=14104,1607,1908
• Run npm run build:standalone first, then the above npx command. This runs a web server of the built version of the standalone app.
• In the browser open ${YOUR_PATH_TO_THE _CODE}/caosdb-webui-ext-map/iframe/index.html

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm cypress

Launches Cypress GUI. Info here from their website: https://docs.cypress.io/app/end-to-end-testing/testing-your-app

• Make sure npm run build:dev:standalone is running the app
• Open Cypress with above command
• To test select E2E Testing
• Select Test file which at the time of writing, only standalone-map is available

npm cypress:run

Runs all Cypress tests in commandline.

npm cypress:cicd

Command to run all Cypress tests in commandline when weburl is reachable and with addition of custom URL e.g if Pipeline using Bash: URL=http://localhost:8082/?authorId=14104 npm run cypress:cicd

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run format

Runs the formatter (prettier) on the src/ directory.

npm run lint

Runs the linter (eslint) on the src/ directory.

npm run tsc

Runs typescript test of all typescript files (excepting explicity ignored ones).

Deployment (with LinkAhead)

1. Build the bundle in the react map repo with npm run build.
2. Copy the build directory to custom/caosdb-server/caosdb-webui/src/ext/include/reactmap.
3. Provide a ext_map.json under custom/caosdb-server/caosdb-webui/conf/ext/json/ext_map.json.
4. Start linkahead with envoy enabled and with webui ref = f-react-map.
5. Browse to localhost:8081. Optionally insert test data via ./misc/map_test_data.py.