The Sampo-UI framework consists of a client and a backend. This repository includes an example
config of a semantic portal with four perspectives with two different
SPARQL endpoints. In order to connect to new SPARQL endpoints, the client and the
backend need to be modified accordingly.
### Coding style
### Folder structure
The [JavaScript style guide, linter, and formatter](https://standardjs.com) module (named "standard" in package.json) is installed by default as development dependency. Do not install or create any additional style definitions or configurations. Instead, install an appropriate [plugin](https://standardjs.com/index.html#are-there-text-editor-plugins) for your text editor. If there are no plugins available for your favourite editor, it is highly recommended to switch into a supported editor.
### Configuration and folder structure
The Sampo-UI framework consists of a client and a backend. This repository includes an example of a user interface with four faceted search perspectives. The perspectives are connected to five existing
SPARQL endpoints using backend configurations. In order to connect to new SPARQL endpoints, the client and the backend need to be configured and modified accordingly.
The general idea of Sampo-UI is that the focus of the client and its configurations is on displaying data. The business logic of fetching the data using various search paradigms is placed on the backend (folder named "server"). To reduce the trouble of passing all configurations and SPARQL queries from the client to the backend, the client and the backend are configured separately.
It is recommended that you create the files that are specific to your portal in subfolders,
to separate them from the general files of Sampo-UI. You can just copy the five folders named *sampo* and rename them with the name of your portal to get a starting base for your files.
to separate them from the core files of Sampo-UI. You can just copy the five folders named "sampo" and rename them with the name of your portal to get a starting base for your React components, reducers, and configuration files. As can be seen from the example configurations and SPARQL queries, the variable names used in the SPARQL queries need to match with the variable names in the reducers of the client. The reducers are used to receive the data from the backend.
The figure below shows the locations different configuration folders and files.
```
src
...
...
@@ -82,7 +87,7 @@ src
┃ ┣ components
┃ ┃ ┣ perspectives
┃ ┃ ┃ ┗ YOUR_PORTAL
┃ ┃ ┃ ┃ ┣ FacetedSearchPerspective.js <-- combine your perspective components here
┃ ┃ ┃ ┃ ┣ FacetedSearchPerspective.js <-- import all perspectives here
┃ ┃ ┃ ┃ ┣ Perspective1.js
┃ ┃ ┃ ┃ ┣ ...
┃ ┣ configs
...
...
@@ -90,6 +95,8 @@ src
┃ ┃ ┃ ┣ GeneralConfig.js
┃ ┃ ┃ ┣ PerspectiveConfig.js
┃ ┃ ┃ ┗ PerspectiveConfigOnlyInfoPages.js
┃ ┣ containers
┃ ┃ ┗ SemanticPortal.js <-- import FacetedSearchPerspective component and root reducer here
┃ ┣ reducers
┃ ┃ ┗ YOUR_PORTAL <-- add reducers for all your perspectives
┃ ┃ ┃ ┣ fullTextSearch.js
...
...
@@ -99,16 +106,16 @@ src
┃ ┃ ┣ index.js <-- combine your reducers here
┃ ┣ translations
┃ ┃ ┗ YOUR_PORTAL
┃ ┃ ┃ ┣ localeEN.js
┃ ┃ ┃ ┣ localeEN.js <-- add translations for all components
┃ ┃ ┃ ┣ ...
┗ server
┃ ┣ sparql
┃ ┃ ┣ YOUR_PORTAL
┃ ┃ ┃ ┣ perspective_configs
┃ ┃ ┃ ┃ ┗ ... <-- endpoint and facet configs for each perspective
┃ ┃ ┃ ┃ ┗ ... <-- add SPARQL endpoint and facet configs for each perspective
┃ ┃ ┃ ┣ sparql_queries
┃ ┃ ┃ ┃ ┗ ... <-- SPARQL queries
┃ ┃ ┃ ┗ BackendSearchConfig.js <-- combine your backend config into this file
┃ ┃ ┃ ┗ BackendSearchConfig.js <-- import and combine your backend configs into this file
┃ ┗ index.js <-- import the backend config file here
```
...
...
@@ -116,14 +123,15 @@ src
### Client
Sampo-UI's React components are documented [here](https://semanticcomputing.github.io/sampo-ui).
Sampo-UI's React components are documented [here](https://semanticcomputing.github.io/sampo-ui) using Storybook.
Sampo-UI's client is based on the following JavaScript libraries:
Here is a list of the main JavaScript libraries on which the Sampo-UI client is built on:
*[React – A JavaScript library for building user interfaces](https://reactjs.org/)
*[Material-UI – React components for faster and easier web development.](https://material-ui.com/)
*[Material-UI – React components for faster and easier web development](https://material-ui.com/)
*[Redux – A Predictable State Container for JS Apps](https://redux.js.org/)
