{"id":13565468,"url":"https://github.com/International-Data-Spaces-Association/DataspaceConnectorUI","last_synced_at":"2025-04-03T22:31:31.311Z","repository":{"id":36982582,"uuid":"339731752","full_name":"International-Data-Spaces-Association/DataspaceConnectorUI","owner":"International-Data-Spaces-Association","description":"User interface for the Dataspace Connector.","archived":false,"fork":false,"pushed_at":"2023-12-14T13:43:43.000Z","size":3181,"stargazers_count":10,"open_issues_count":14,"forks_count":14,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-04T19:41:27.543Z","etag":null,"topics":["ids","international-data-spaces","ui","user-interface","vuejs","vuetify"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/International-Data-Spaces-Association.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-17T13:25:30.000Z","updated_at":"2024-03-06T12:19:59.000Z","dependencies_parsed_at":"2023-12-14T10:26:10.183Z","dependency_job_id":"db65781d-20c5-4b6a-ae98-142e06a1337e","html_url":"https://github.com/International-Data-Spaces-Association/DataspaceConnectorUI","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/International-Data-Spaces-Association%2FDataspaceConnectorUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/International-Data-Spaces-Association%2FDataspaceConnectorUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/International-Data-Spaces-Association%2FDataspaceConnectorUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/International-Data-Spaces-Association%2FDataspaceConnectorUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/International-Data-Spaces-Association","download_url":"https://codeload.github.com/International-Data-Spaces-Association/DataspaceConnectorUI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247090245,"owners_count":20881938,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ids","international-data-spaces","ui","user-interface","vuejs","vuetify"],"created_at":"2024-08-01T13:01:47.547Z","updated_at":"2025-04-03T22:31:29.943Z","avatar_url":"https://github.com/International-Data-Spaces-Association.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## Dataspace Connector UI\n\nUser interface for the [Dataspace Connector](https://github.com/International-Data-Spaces-Association/DataspaceConnector).\n\nThe following illustration visualizes the interaction of the [Dataspace Connector](https://github.com/International-Data-Spaces-Association/DataspaceConnector), the [IDS Messaging Services](https://github.com/International-Data-Spaces-Association/IDS-Messaging-Services), the Configuration Manager, and it’s GUI. All components have a defined API that allows individual components to be removed or replaced. The Dataspace Connector can be deployed standalone and can be connected to existing backend systems. Configuration Manager and GUI facilitate the operation and configuration of the connector. If desired, the Dataspace Connector may be replaced by another connector implementation, either integrating the IDS Messaging Services or not.\n\n![Overall architecture](https://github.com/International-Data-Spaces-Association/DataspaceConnector/blob/main/docs/assets/images/dsc_architecture.png)\n\n## Requirements\n* Install and start [Dataspace Connector](https://github.com/International-Data-Spaces-Association/DataspaceConnector)\n* Install [Node.js v.14](https://nodejs.org/en/download/)\n\n## Installation\n\nUse the package manager [npm](https://nodejs.org/en/download/) in root directory to install DataspaceConnector UI:\n\n```bash\nnpm install --no-audit\n```\n\n## Usage\n\n### Start Dataspace Connector UI\nUse the package manager [npm](https://nodejs.org/en/download/) in root directory to start Dataspace Connector UI:\n```bash\nnpm start\n```\nAccess: [localhost:8082](http://localhost:8082) \n\n### Change UI port\n\nChange `package.json` in root directory:\n```bash\n\"serve\": \"vue-cli-service serve --open --port [PORT]\"\n```\n\n### Change Dataspace Connector host \u0026 port\n\nChange in `src/backend/index.js`:\n```bash\nlet connectorUrl = \"https://localhost:8080\"\n```\n\n### Change theme\n\nYou can change the main colors of the user interface in `src/theme/default.js`\n\n### Protect backend with Basic Auth\nIf you need to protect the website via Basic Auth, you can adjust the username and password via environment variables of the backend, simply by adjusting the `src/backend/.env` file or by setting the environment variables in your Docker environment.\nTo activate the protection, you need to provide a username and a password, both with a length \u003e 0. Otherwise (default behaviour), it is inactive.\n```\nBASIC_AUTH_USER=username\nBASIC_AUTH_PASSWORD=password\n```\n\n### Test backend\n\nThe UI backend provides an endpoint (http://[localhost:8083]/testdata) that can be used as backend connection (type: REST) in the DSC for testing purposes.\nThis can process POST and GET requests.\n\n## Start with Docker\n\nBuild docker image:\n```bash\nsudo docker build -t dataspace-connector-ui .\n```\nRun docker image:\n```bash\nsudo docker-compose up\n```\nAccess: [localhost:8083](http://localhost:8083) \n\n### Change host/port \u0026 authentification of Dataspace Connector on docker start\n\nChange in `docker-compose.yml`:\n```bash\nenvironment:\n          - CONNECTOR_URL=https://localhost:8080\n          - CONNECTOR_USER=testuser\n          - CONNECTOR_PASSWORD=testpw\n```\n\n## Add custom attributes to Resources\nThe Dataspace Connector allows to define additional attributes for each of its entities (see [Dataspace Connector Documentation](https://international-data-spaces-association.github.io/DataspaceConnector/Documentation/v6/DataModel). If the additional fields are set for a `Resource` entity, this information can be used to provider further metadata, e.g. for registering these data at an IDS Metadata Broker (which must support these Metadata-fields too). The Dataspace Connector UI provides the functionality to define custom fields, which are shown in the frontend to define such additional information on a Resource level (see Screenshot below). By default the functionality is disabled and thus not shown in the UI.\n\n![Screenshot of additional meta information for a Resource offering](images/feature-additional-parameters.png)\n\nYou can define additional elements via three input options: \n- text fields\n- select boxes (e.g., a category)\n- select boxes with according sub-select boxes (e.g., category with sub-categories) \n\n### Enable and adjust the configuration\nTo enable the feature, go to the backend folder `src/backend/` and adjust `.env` file: `USE_ONTOLOGY = true`. In case you are deploying the frontend via Docker set environment variables accordingly. The processing of the feature takes place in `ontologyLoader.js`. A demo configuration is already given by the files `src/backend/ontology.ttl` and `src/backend/ontology.config.json`.\n\n#### Adjust the ontology\nYou need to adjust the content of the file `src/backend/ontology.ttl`, which already provides some examples.\n\n##### Select boxes\nFor select boxes, you have to define an `owl:class` element:\n```\ndsc:DataCategory \n    a owl:Class ;\n    rdfs:label \"Data category\"@en ;\n    rdfs:comment \"Class of all data categories.\"@en .\n                 \ndsc:dataCategory \n    a owl:ObjectProperty ;\n    rdfs:domain ids:Resource ;\n    rdfs:range dsc:DataCategory ;\n    rdfs:label \"Data category\"@en .\n```\n\nIf you want to define a select box with a sub-select box, in addition you need to add (do not forget to link the elements of the class to this sub-category (see below)):\n```\ndsc:DataSubcategory \n    a owl:Class ;\n    rdfs:label \"Data subcategory\"@en ;\n    rdfs:comment \"Class of all data subcategories.\"@en .\n                    \ndsc:dataSubcategory \n    a owl:ObjectProperty ;\n    rdfs:domain ids:Resource ;\n    rdfs:range dsc:DataSubcategory ;\n    rdfs:label \"Data subcategory\"@en .\n```\n\nTo add categories to the root select box, simply add elements referring to the class:\n```\ncat:Infrastructure \n    a dsc:DataCategory ;\n    rdfs:label \"Infrastructure\"@en .\n```\n\nTo add elements for sub-select boxes, add them accordingly: \n```\nsub:RoadNetwork \n    a cat:Infrastructure ;\n    rdf:type   dsc:DataSubcategory ;\n    rdfs:label \"Road Network\"@en .\n```\n\n##### Text fields\nFor text fields, you have to define an `owl:DatatypeProperty` element:\n```\ndsc:dataModel \n    a owl:DatatypeProperty ;\n    rdfs:domain ids:Resource ;\n    rdfs:range rdfs:Literal ;\n    rdfs:label \"Data model\"@en .\n```\n\n#### Customizing\nIn case you cannot stick to the given ontology, you may change the static variables for predicates and objects to identify the structure of the given ontology in `ontologyLoader.js`. \n\n#### Adjust the configuration `ontology.config.json`\nIn order to map and display the additional fields, you need to adjust the configuration file. Each select box needs to be defined as object in `select` array, and text fields need to be defined as objects in `text` array.\n```\n{\n  \"select\":[\n    {...}, ..., {...}\n  ],\n  \"text\":[\n    {...}, ..., {...}\n  ]\n}\n```\n\n#### Select box configuration\nYou need to define four properties on each object:\n- `\"identifier\": string`: The identifier of the ontology class for a select box, e.g. `http://w3id.org/dsc#DataCategory`. This identifier is used to analyze the structure of your ttl file. Be aware that this identifier is overwritten within the process of parsing, as the expected key needs to be a parameter instead of a class. Thus, in this example `http://w3id.org/dsc#dataCategory` would be the key (notice the lower case `d`)\n- `\"required\": boolean`: If it is required to select an option from the select box.\n- `\"identifier_children\": string`: The identifier of the ontology class for a sub-select box, e.g. `http://w3id.org/dsc#DataSubcategory`. This field is not used for parsing. It is just used for the front-end to determine the correct key for the selected value.\n- `\"required_children\": boolean`: If it is required to select an option from the sub-select box.\n\n#### Text field configuration\nYou need to define two properties on each object:\n- `\"identifier\": string`: The identifier of the ontology class for a text field, e.g. `http://w3id.org/dsc#dataModel`.\n- `\"required\": boolean`: If it is required to enter text in the text field.\n\n\n## Development\nPlease read the [development guide](https://github.com/International-Data-Spaces-Association/DataspaceConnectorUI/blob/develop/DEVELOPMENT_GUIDE.md).\n\n\n## Contributing\nPlease read through our [contributing guidelines](https://github.com/International-Data-Spaces-Association/DataspaceConnectorUI/blob/develop/CONTRIBUTING.md).\n\n### Maintainer\n\n**This project is currently no longer maintained but looking for new maintainers.**\n\nApplications for maintainers shall be directed to the [International Data Spaces Association](mailto:info@internationaldataspaces.org).\n\nThis project was previously maintained by Fraunhofer FKIE and after that by sovity GmbH.\nPlease do not approach former maintainers. If you have questions, plase open an issue / discussion for the community or approach the [International Data Spaces Association](mailto:info@internationaldataspaces.org).\n\n### Former Contributor and Maintainer\n* [Sebastian Opriel](https://github.com/SebastianOpriel), [sovity GmbH](https://sovity.de)\n* [Bastian Wetljen](https://github.com/BastianWel), [Fraunhofer FKIE](https://www.fkie.fraunhofer.de)\n* [Sebastian Opriel](https://github.com/SebastianOpriel), [sovity GmbH](https://sovity.de)\n* [Melissa Das](https://github.com/melissadas), [sovity GmbH](https://sovity.de)\n* [Philipp Reusch](https://github.com/pdrd), [sovity GmbH](https://sovity.de)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInternational-Data-Spaces-Association%2FDataspaceConnectorUI","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FInternational-Data-Spaces-Association%2FDataspaceConnectorUI","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInternational-Data-Spaces-Association%2FDataspaceConnectorUI/lists"}