Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 33 additions & 15 deletions docs/FrontendStructure.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## Folder Structure
## Folder Structure

### Naming Conventions:

Expand All @@ -8,38 +8,51 @@ Naming convention for folders: Kebab Case (e.g. folder-name)
### Folder Structure:

In general, we want to group code by pages and features, not by file type.
Each route segment has a `/components` folder which contains all elements which are solely used in this route.
Files that are shared between route segments, are located in the following shared folders:
Each route segment has a `_components` folder which contains all elements which are solely used in this route.
Files that are shared between route segments are located in the following shared folders:

- `\layout`: Overall application appearance including theming, menu etc.
- `\lib`: Shared logic and types as well as interfaces to external apis.
- `\components`: All components which can be shared between several routes.
- `\assets`: Static assets such as images, icons oder other similar files.
- `\assets`: Static assets such as images, icons or other similar files.
- `\stores`: Shared client-side state stores.

```
|- src
|--- app/[locale]
|----- _components
|------- shared components for the [locale] segment
|----- viewer
|------- components
|------- _components
|--------- submodel
|--------- submodel-elements
|--------- transfer
|------- page.tsx
|----- settings
|------- components
|--------- theme-settings
|--------- id-generation-settings
|------- *page.tsx*
|------- _components
|--------- id-settings
|--------- role-settings
|--------- mnestix-infrastructure
|------- page.tsx
|----- templates
|------- components
|--------- template-edit
|------- _components
|--------- blueprint-edit
|------- [id]
|--------- *page.tsx*
|------- *page.tsx*
|--------- page.tsx
|------- page.tsx
|----- product
|------- _components
|------- ...
|----- compare
|------- _components
|--------- add-aas
|------- ...
|----- list
|------- _components
|--------- filter
|------- ...
|----- asset
|------- _components
|------- ...
|--- assets
|--- components
Expand All @@ -48,10 +61,15 @@ Files that are shared between route segments, are located in the following share
|----- menu
|----- theme
|--- lib
|----- apis
|----- utils
|----- api
|----- util
|----- hooks
|----- types
|----- enums
|----- services
|----- errors
|----- database
|----- ...
|--- stores
|--- i18n
```
3 changes: 2 additions & 1 deletion wiki/Adding-Languages.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@

### Available Languages

Currently, Mnestix Browser supports three languages, available from the language selector located on the top-right side:
Currently, Mnestix Browser supports four languages, available from the language selector located on the top-right side:

- English (default language)
- Deutsch (German)
- Español (Spanish)
- Nederlands (Dutch)

### Language conventions and format

Expand Down
12 changes: 6 additions & 6 deletions wiki/Docker-Compose-Files.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ docker command.
- **docker-compose/compose.dev.yml** - override file to run Mnestix Browser in a development environment. A development
image will be built if it is not found in the local Docker Image Cache.<br>
**Mnestix Browser on port 3000 - http://localhost:3000** <br>
**Mnestix Api on port 5064 - http://localhost:5064** <br>
**Mnestix AAS Generator on port 5064 - http://localhost:5064** <br>
**AAS Repo on port 8081 - http://localhost:8081/swagger-ui/index.html**

- **docker-compose/compose.digital-twin-registry.yml** - adds the BaSyx Digital Twin registry instead
Expand Down Expand Up @@ -60,10 +60,10 @@ docker compose -f compose.yml -f docker-compose/compose.dev.yml -f docker-compos

Additional services used by the Mnestix browser:

- **mnestix-api** - API service from the Mnestix ecosystem designed to expand Mnestix Browser functionalities, adding
- **mnestix-aas-generator** - service from the Mnestix ecosystem designed to expand Mnestix Browser functionalities, adding
AAS List, Template Builder and allowing for the configuration of custom settings such as themes and aasId
generation. (**On port 5054 - http://localhost:5064/swagger/index.html#/**)
This component has been split into the [Mnestix Proxy](https://github.com/eclipse-mnestix/mnestix-proxy/wiki)
generation. (**On port 5064 - http://localhost:5064/swagger/index.html#/**)
The former **Mnestix API** has been split into the [Mnestix Proxy](https://github.com/eclipse-mnestix/mnestix-proxy/wiki)
and the [Mnestix AAS Generator](https://github.com/eclipse-mnestix/mnestix-aas-generator/wiki); see their wikis for details.

> **Note:** The BaSyx Go environment requires **Mnestix AAS Generator >= 1.3.0** for compatibility. See the
Expand All @@ -86,7 +86,7 @@ section.
### Existing images in dockerhub

Our Docker images are available on Docker Hub [Mnestix Browser](https://hub.docker.com/r/mnestix/mnestix-browser)
and [Mnestix Api](https://hub.docker.com/r/mnestix/mnestix-api). You can pull the images using the following commands:
and [Mnestix AAS Generator](https://hub.docker.com/r/mnestix/mnestix-aas-generator). You can pull the images using the following commands:

#### To pull a specific version, use the version tag:

Expand All @@ -95,5 +95,5 @@ docker pull mnestix/mnestix-browser:tag
```

```sh
docker pull mnestix/mnestix-api:latest
docker pull mnestix/mnestix-aas-generator:latest
```
9 changes: 6 additions & 3 deletions wiki/Feature-Overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,13 @@ Mnestix AAS Browser is also **optimized for mobile view** to have a **great user
Mnestix can **visualize every submodel** even if it is not standardized by IDTA. There are some submodels **visualized
in an extra user-friendly manner**. These are:

- Digital Nameplate
- Handover Documentation
- Carbon Footprint
- **and more!**
- Technical Data
- Handover Documentation
- Time Series
- Hierarchical Structures
- Bill of Applications
- Reference Counter

Moreover, dedicated visualizations for submodels can be added as a further feature.

Expand Down
2 changes: 1 addition & 1 deletion wiki/Getting-Started-with-Developing.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ You may need to set the initial URL to http://localhost:3000.
To check what other options exist to run the Mnestix Browser, see the yarn scripts in `package.json`. Highlights are:

- `yarn dev` to start the browser in a hot reloading dev environment.
- `yarn prettier`, `yarn format` and `yarn lint` to apply code formatting and linting.
- `yarn format` and `yarn lint` to apply code formatting and linting.
- `yarn test` and `yarn test:headless` to run cypress tests locally.
- `yarn docker:prod` will build everything with the production flag.
- `yarn docker:test` will run all tests in the docker environment.
Expand Down
15 changes: 9 additions & 6 deletions wiki/How-to-Create-Custom-Submodel-Visualizations.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,18 +91,20 @@ export default function CustomSubmodel({ submodel }: SubmodelVisualizationProps)
## Map the visualization

In order for Mnestix to automatically use your visualization, you have to provide the mapping between your visualization and the semantic id which your custom visualization should be used for.
This is done in the file `src/app/[locale]/viewer/_components/submodel/SubmodelsCustomVisualizationMap.ts` which looks similar to this:
This is done in the file `src/app/[locale]/viewer/_components/submodel/SubmodelCustomVisualizationMap.ts` which looks similar to this:

```ts
export const submodelsCustomVisualizationMap = {
[SubmodelSemanticIdEnum.CoffeeConsumptionContainer]: CoffeeConsumptionDetail,
export const submodelCustomVisualizationMap = {
[SubmodelSemanticIdEnum.CarbonFootprint]: CarbonFootprintDetail,
[SubmodelSemanticIdEnum.CarbonFootprintIRDI]: CarbonFootprintDetail,
[SubmodelSemanticIdEnum.CarbonFootprintV1]: CarbonFootprintDetail,
[SubmodelSemanticIdEnum.CarbonFootprintIrdi]: CarbonFootprintDetail,
[SubmodelSemanticIdEnum.ReferenceCounterContainer]: ReferenceCounterDetail,
[SubmodelSemanticIdEnum.TimeSeries]: TimeSeriesDetail,
[SubmodelSemanticIdEnum.HierarchicalStructuresV10]: HierarchicalStructuresDetail,
[SubmodelSemanticIdEnum.HierarchicalStructuresV11]: HierarchicalStructuresDetail,
[SubmodelSemanticIdEnum.BillOfApplications]: BillOfApplicationsDetail,
[SubmodelSemanticIdEnum.TechnicalDataV11]: TechnicalDataDetail,
[SubmodelSemanticIdEnum.HandoverDocumentationV20]: HandoverDocumentationDetail,
[/*Your semantic id as a string*/]: /*React component name*/,
};
```
Expand Down Expand Up @@ -134,9 +136,10 @@ import { findValueByIdShort } from 'lib/util/SubmodelResolverUtil';
and use it in your component

```ts
const value = findValueByIdShort(submodel.submodelElements, 'MyIDshort', 'en');
const value = findValueByIdShort(submodel.submodelElements, 'MyIDshort', null, 'en');
```

The third argument is an optional `semanticId` (pass `null` to match by `idShort` only); the fourth is the locale.
It will automatically return the requested language value for a MultiLanguageProperty.

# 4. Internationalization
Expand All @@ -155,7 +158,7 @@ This may be changed to always use the currently selected language by calling the

```ts
const locale = useLocale();
const value = findValueByIdShort(submodel.submodelElements, 'MyIDshort', locale);
const value = findValueByIdShort(submodel.submodelElements, 'MyIDshort', null, locale);
```

## Using current locale for internationalized messages
Expand Down
4 changes: 2 additions & 2 deletions wiki/Keycloak-Configuration.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
> **Note:** Keycloak support is available starting from version 1.1.0 and above.
>
> For Mnesitx API configuration details, please refer to the API documentation available
> on [Docker Hub](https://hub.docker.com/r/mnestix/mnestix-api).
> For Mnestix AAS Generator configuration details, please refer to the documentation available
> on [Docker Hub](https://hub.docker.com/r/mnestix/mnestix-aas-generator).

### Setting Up Keycloak for Docker Development

Expand Down
18 changes: 7 additions & 11 deletions wiki/Maintaining.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,6 @@ Check the configurations for Rider under `.idea/` folder
We use Prettier and ESLint to keep our frontend code clean. Having a ESLint warning **will break the pipeline**. It's
therefore always a good idea to run `yarn format` and `yarn lint` before you commit.

#### Run prettier check

```sh
yarn prettier
```

#### Run prettier (be aware, this changes files!)

```sh
Expand All @@ -39,7 +33,7 @@ yarn lint
```

If you want specific files or folders to be excluded from linting (e.g. generated files), you can add them
to `.eslintignore` and `.prettierignore`
to the `ignores` config in `eslint.config.js` and to `.prettierignore`

### Cypress Testing

Expand Down Expand Up @@ -76,10 +70,12 @@ support.
This change aims to prevent server overload and ensure smoother navigation through resource lists.


### Regenerate the OpenAPI client
If you need to regenerate the OpenAPI client, you can do so by running:
### Regenerate the OpenAPI clients
There are two generated OpenAPI clients. Regenerate them with:

```sh
yarn openapi:generate
yarn generate-aas-apis # BaSyx AAS client
yarn generate-mnestix-apis # Mnestix AAS Generator client
```
By adapting `src/lib/api/openapitools.json`, you can change the OpenAPI client generation settings e.g. the input spec and its version.
By adapting the respective `openapitools.json` (`src/lib/api/aas/openapitools.json` and
`src/lib/api/mnestix-aas-generator/openapitools.json`), you can change the OpenAPI client generation settings e.g. the input spec and its version.
21 changes: 6 additions & 15 deletions wiki/Mnestix-Configuration-Settings.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ Mnestix provides the following configuration options. You can adapt the values i
| `REGISTRY_API_URL` | | Address of the AAS Registry Service to retrieve the related descriptor for an AAS |
| `SUBMODEL_REGISTRY_API_URL` | | Address of the Submodel Registry Service to retrieve the related descriptor for a Submodel |
| `MNESTIX_AAS_GENERATOR_API_URL` | | Mnestix Aas Generator with a lot of business comfort features to create AAS via templates |
| `SERIALIZATION_API_URL` | | Address of the service used to serialize AAS (e.g. for the AASX export/download). Typically points to the AAS repository or the Mnestix Proxy. |
| `CONCEPT_DESCRIPTION_REPO_API_URL` | | Default Concept Description Repository |
| `LOG_LEVEL` | "info" | Server side log level of Mnestix Browser. "fatal" or "error" or "warn" or "info" or "debug" or "trace" or "silent" |
| `MNESTIX_V2_ENABLED` | "true" | Setting to 'false' to support older Mnestix API versions (v1._._), the support for those Mnestix API versions will be stopped in the near future |
Expand Down Expand Up @@ -246,8 +247,8 @@ found [on the IDTA website](https://industrialdigitaltwin.org/wp-content/uploads
> the [Mnestix Proxy](https://github.com/eclipse-mnestix/mnestix-proxy/wiki) (secures and routes the AAS infrastructure)
> and the [Mnestix AAS Generator](https://github.com/eclipse-mnestix/mnestix-aas-generator/wiki) (template/blueprint based AAS generation).

There also exists the Mnestix API, that provides different business
comfort features.
The Mnestix AAS Generator provides different business
comfort features, while the Mnestix Proxy secures them.
Here it is possible to set an API Key, for example, to secure your backend services like the repository or the discovery
service.
When running the proxy you can change the paths to the different
Expand Down Expand Up @@ -404,23 +405,13 @@ backend environment variable `Features__AllowRetrievingAllShellsAndSubmodels: fa
Remember that this also means that the functionality to list all AAS won't work anymore in the Mnestix Browser, so
disable this functionality with the environment variable `AAS_LIST_FEATURE_FLAG: false`.

#### AAS List V2 Feature Details

The `AAS_LIST_V2_FEATURE_FLAG` is a feature flag introduced as part of a preview release.
It enables access to an updated list implementation that operates independently of the Mnestix API.

This flag is currently disabled by default (false) and is available only in preview.
It is not yet recommended for production environments.

To enable the feature for testing or preview purposes, set the flag to true in your configuration.

#### AzureAD Service

One can also add an AzureAD Service to give people deeper access, this enables the "Login" Button in the Mnestix
Browser.
After logging in, users have access to even more functionality.
To see how to connect to an Azure Tenant and enable the login functionality see
the [official Mnestix API documentation](https://hub.docker.com/r/mnestix/mnestix-api).
the [official Mnestix AAS Generator documentation](https://hub.docker.com/r/mnestix/mnestix-aas-generator).

#### I want to create multiple AAS

Expand All @@ -429,13 +420,13 @@ the [previous section](#i-want-to-use-more-advanced-features).
After logging in it is possible to configure the ID Generation Functionality of the backend.
Here it is possible to automatically generate AAS using only a short ID of the Asset.
How the AAS Creator in conjunction with the ID Generations Functionality works can be seen in
the [official Mnestix API documentation](https://hub.docker.com/r/mnestix/mnestix-api).
the [official Mnestix AAS Generator documentation](https://hub.docker.com/r/mnestix/mnestix-aas-generator).

One can also use the Template Builder with the Data Ingest Endpoint to send arbitrary JSON files to the API and
automatically add them to a specified AAS.
This enables easy integration into existing ETL processes.
How exactly this works can be seen in
the [official Mnestix API documentation](https://hub.docker.com/r/mnestix/mnestix-api).
the [official Mnestix AAS Generator documentation](https://hub.docker.com/r/mnestix/mnestix-aas-generator).

Below you'll find a small overview on how the components interact with each other:
![Overview of all Mnestix Functionality](https://xitaso.com/wp-content/uploads/final_LP_Desktop_Mnestix_AAS_0424_cor.svg)
2 changes: 1 addition & 1 deletion wiki/Role-Based-Access-Control.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Every logged-in user is allowed to visit following pages:

If a logged-in user has the 'mnestix-admin' role set, the user is able to visit following pages:

- Dashboard, List, Templates, Settings (ID Settings, Data Sources, Role Management)
- Dashboard, List, Templates, Settings (ID structure, Infrastructures, Role management)

### Configuring RBAC:

Expand Down
2 changes: 1 addition & 1 deletion wiki/_Sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
## Advanced

- [Templates and Blueprints](Templates-and-Blueprints)
- [How to Create Custom Submodel Views](How-to-create-custom-submodel-visualizations)
- [How to Create Custom Submodel Views](How-to-Create-Custom-Submodel-Visualizations)
- [Configuring Mnestix for different versions](Different-versions-configuration)

## Related Mnestix Components
Expand Down