Skip to content

Commit

Permalink
Revert Mercury documentation styling for node v22.13.1.
Browse files Browse the repository at this point in the history
  • Loading branch information
ewelinagr committed Feb 26, 2025
1 parent 44bcf3b commit f137ad8
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 55 deletions.
36 changes: 18 additions & 18 deletions projects/mercury/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,17 @@ please read about the [project structure](Structure.md) first.

Prerequisites:

- [nodejs and npm](https://www.npmjs.com/get-npm)
- [yarn](https://yarnpkg.com/lang/en/)
- docker
- Java 17
- [nodejs and npm](https://www.npmjs.com/get-npm)
- [yarn](https://yarnpkg.com/lang/en/)
- docker
- Java 17

The Mercury frontend app needs a backend to communicate with. For convenience, there are a few scripts to use for local development:

- `yarn localdevelopment` starts Keycloak at port `5100`.
- `yarn saturn` starts the backend at port `8090`.
- `yarn pluto` starts a proxy server that also serves the frontend at port `8080`.
- `yarn start` starts the frontend and exposes it at port `3000`.
- `yarn localdevelopment` starts Keycloak at port `5100`.
- `yarn saturn` starts the backend at port `8090`.
- `yarn pluto` starts a proxy server that also serves the frontend at port `8080`.
- `yarn start` starts the frontend and exposes it at port `3000`.

For the first run, execute the following command to install all dependencies locally:

Expand All @@ -40,12 +40,12 @@ yarn dev

This will start:

- Keycloak (http://localhost:5100)
- PostgreSQL (port `9432`)
- Saturn (JDK 17 required, port `8090`)
- Pluto (proxy, including Mercury frontend, http://localhost:8080)
- Mercury frontend in development mode (http://localhost:3000)
- a [backend proxy](src/setupProxy.js) for Mercury
- Keycloak (http://localhost:5100)
- PostgreSQL (port `9432`)
- Saturn (JDK 17 required, port `8090`)
- Pluto (proxy, including Mercury frontend, http://localhost:8080)
- Mercury frontend in development mode (http://localhost:3000)
- a [backend proxy](src/setupProxy.js) for Mercury

The backend and frontend application will be available at http://localhost:8080/

Expand All @@ -58,10 +58,10 @@ In Keycloak, one setting needs to be configured manually: the permissions of the

### Libraries

- The UI uses many components from [Material UI](https://material-ui.com/).
- [axios](https://github.com/axios/axios) is used for http requests.
- [webdav](https://github.com/perry-mitchell/webdav-client) is used for connecting to WebDAV servers.
- [jsonld](https://github.com/digitalbazaar/jsonld.js) is used for unpacking JSON-LD responses.
- The UI uses many components from [Material UI](https://material-ui.com/).
- [axios](https://github.com/axios/axios) is used for http requests.
- [webdav](https://github.com/perry-mitchell/webdav-client) is used for connecting to WebDAV servers.
- [jsonld](https://github.com/digitalbazaar/jsonld.js) is used for unpacking JSON-LD responses.

### Code style

Expand Down
74 changes: 37 additions & 37 deletions projects/mercury/Structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,36 @@ The project follows the [feature based approach](https://reactjs.org/docs/faq-st

The feature folders (`collections`, `file`, `metadata`, `users`, `workspaces`) contain:

- \*API.js
- Service file to communicate with the backend.
- \*Page
- The main entry point for the feature/route
- Other specialized components specific to the feature
- \*API.js
- Service file to communicate with the backend.
- \*Page
- The main entry point for the feature/route
- Other specialized components specific to the feature

## Shared components and functions

- `/common` (Shared code)
- `/components`
- [CollectionInformationDrawer](src/collections/CollectionInformationDrawer.js) (Side panel contains collection info, collaborators/permissions and metadata for selected collection, directories or files)
- `/context` (shared/injected state/logic) [Read on React Context](https://reactjs.org/docs/context.html)
- `/hooks` (pure logic/state no UI) [Read on React Hooks](https://reactjs.org/docs/hooks-intro.html)
- [/services/Config.js](./src/common/services/Config.js) (configuration from backend)
- `/utils` (Utility files, pure functions)
- `/metadata` (could be renamed to linkeddata)
- Generic components (for metadata and vocabulary) are called LinkedData\*.js
- `/common` (shared components between Vocabulary and Metadata)
- values (the different form fields, text input, dates, dropdown etc.)
- [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js) This component and its child components are probably the most complex areas in the frontend code. Some refactoring might be required in case there is any expected changes and in order to make the code easier to maintain.
- [LinkedDataContext](./src/metadata/LinkedDataContext.js) with a provider [LinkedDataMetadataProvider](./src/metadata/LinkedDataMetadataProvider.js)
- [LinkedDataWrapper](./src/metadata/LinkedDataWrapper.js)
- 2 Wrappers to provide needed values to either metadata or vocabulary
- [UseLinkedData](src/metadata/common/UseLinkedData.js)
- Fetches the entity whether it's part of the metadata or vocabulary, using the provided subject
- [UseFormData](src/metadata/common/UseFormData.js)
- Contains the currently loaded form/entity values, changes, validation state and form operations.
- [UseFormSubmission](src/metadata/common/UseFormSubmission.js)
- Submits form changes and handles submission errors
- `/permissions`
- `/common` (Shared code)
- `/components`
- [CollectionInformationDrawer](src/collections/CollectionInformationDrawer.js) (Side panel contains collection info, collaborators/permissions and metadata for selected collection, directories or files)
- `/context` (shared/injected state/logic) [Read on React Context](https://reactjs.org/docs/context.html)
- `/hooks` (pure logic/state no UI) [Read on React Hooks](https://reactjs.org/docs/hooks-intro.html)
- [/services/Config.js](./src/common/services/Config.js) (configuration from backend)
- `/utils` (Utility files, pure functions)
- `/metadata` (could be renamed to linkeddata)
- Generic components (for metadata and vocabulary) are called LinkedData\*.js
- `/common` (shared components between Vocabulary and Metadata)
- values (the different form fields, text input, dates, dropdown etc.)
- [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js) This component and its child components are probably the most complex areas in the frontend code. Some refactoring might be required in case there is any expected changes and in order to make the code easier to maintain.
- [LinkedDataContext](./src/metadata/LinkedDataContext.js) with a provider [LinkedDataMetadataProvider](./src/metadata/LinkedDataMetadataProvider.js)
- [LinkedDataWrapper](./src/metadata/LinkedDataWrapper.js)
- 2 Wrappers to provide needed values to either metadata or vocabulary
- [UseLinkedData](src/metadata/common/UseLinkedData.js)
- Fetches the entity whether it's part of the metadata or vocabulary, using the provided subject
- [UseFormData](src/metadata/common/UseFormData.js)
- Contains the currently loaded form/entity values, changes, validation state and form operations.
- [UseFormSubmission](src/metadata/common/UseFormSubmission.js)
- Submits form changes and handles submission errors
- `/permissions`

## Metadata forms

Expand All @@ -48,16 +48,16 @@ key/IRI is the list of values for this property.

The forms components can be broken down as:

- [LinkedDataEntityFormContainer](./src/metadata/common/LinkedDataEntityFormContainer.js)
- Applies some specific logic according to the type of linked data (metadata or vocabulary) using [LinkedDataContext](./src/metadata/LinkedDataContext.js)
- This component fetches the linked data entity
- Keeps form values, changes and validations using useFormData
- Submits changes using useFormSubmission
- Supplies properties and callback functions to [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js)
- [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js)
- The main form view that provides each property and delegates actions to [LinkedDataProperty](./src/metadata/common/LinkedDataProperty.js)
- [LinkedDataProperty](./src/metadata/common/LinkedDataProperty.js)
- This is the one that is concerned with rendering each field. It uses the [LinkedDataValueComponentFactory](./src/metadata/common/values/LinkedDataValueComponentFactory.js) which is coming from [LinkedDataContext](./src/metadata/LinkedDataContext.js) to pick the right edit and add component of the field. The [LinkedDataValueComponentFactory](./src/metadata/common/values/LinkedDataValueComponentFactory.js) mainly uses the property datatype (plus a few attributes such as isRdfList) to the proper 'value' input component. There is a big list of value components, such as, [StringValue](./src/metadata/common/values/StringValue.js), [NumberValue](./src/metadata/common/values/NumberValue.js) and [SwitchValue](./src/metadata/common/values/SwitchValue.js) etc. that are found in the [/metadata/common/values](src/metadata/common/values) directory. Then depending on the property whether it's a relation shape (Relation shapes are reference values to other entities) or not the component will render either [LinkedDataRelationTable](./src/metadata/common/LinkedDataRelationTable.js) or [LinkedDataInputFieldsTable](./src/metadata/common/LinkedDataInputFieldsTable.js).
- [LinkedDataEntityFormContainer](./src/metadata/common/LinkedDataEntityFormContainer.js)
- Applies some specific logic according to the type of linked data (metadata or vocabulary) using [LinkedDataContext](./src/metadata/LinkedDataContext.js)
- This component fetches the linked data entity
- Keeps form values, changes and validations using useFormData
- Submits changes using useFormSubmission
- Supplies properties and callback functions to [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js)
- [LinkedDataEntityForm](./src/metadata/common/LinkedDataEntityForm.js)
- The main form view that provides each property and delegates actions to [LinkedDataProperty](./src/metadata/common/LinkedDataProperty.js)
- [LinkedDataProperty](./src/metadata/common/LinkedDataProperty.js)
- This is the one that is concerned with rendering each field. It uses the [LinkedDataValueComponentFactory](./src/metadata/common/values/LinkedDataValueComponentFactory.js) which is coming from [LinkedDataContext](./src/metadata/LinkedDataContext.js) to pick the right edit and add component of the field. The [LinkedDataValueComponentFactory](./src/metadata/common/values/LinkedDataValueComponentFactory.js) mainly uses the property datatype (plus a few attributes such as isRdfList) to the proper 'value' input component. There is a big list of value components, such as, [StringValue](./src/metadata/common/values/StringValue.js), [NumberValue](./src/metadata/common/values/NumberValue.js) and [SwitchValue](./src/metadata/common/values/SwitchValue.js) etc. that are found in the [/metadata/common/values](src/metadata/common/values) directory. Then depending on the property whether it's a relation shape (Relation shapes are reference values to other entities) or not the component will render either [LinkedDataRelationTable](./src/metadata/common/LinkedDataRelationTable.js) or [LinkedDataInputFieldsTable](./src/metadata/common/LinkedDataInputFieldsTable.js).

## Keep in mind

Expand Down

0 comments on commit f137ad8

Please sign in to comment.