This is a generic browser front end project, specific instances used in the IHTSDO browsers are customized in branches of this project.
The browser connects to a backend REST API provided by the project: https://github.com/IHTSDO/snowstorm
The index.html includes all the logic for rendering the Browser UI, switching between different SNOMED CT releases and UI layouts (perspectives).
- bootstrap-custom: folder that contains a custom build of the Boostrap framework
- css: stylesheets for this site
- external-libs: js libraries used by this site
- snomed-interaction-components: js, css and fonts for the SNOMED CT widgets contained in this site
- img: images for the site
- i18n: internationalization files for the site and the widgets
- index.html: one page application
This project uses the jquery-i18n-properties plugin to support internationalization, translation of the UI components to many languages. (https://github.com/jquery-i18n-properties/jquery-i18n-properties)
The i18n folder includes the base language file (/i18n/Languages.properties), this files defines the labels for English language:
i18n_app_name = IHTSDO SNOMED CT Browser
i18n_release = Release
i18n_perspective = Perspective
i18n_about = About
i18n_provide_feedback = Provide feedback on this browser
In other files, that include the ISO language code in the name, the labels are translated, like:
Languages_es.properties (Spanish)
i18n_app_name = Navegador de SNOMED CT
i18n_release = Edición
i18n_perspective = Perspectiva
i18n_about = Sobre
i18n_provide_feedback = Proporcione sus comentarios sobre este navegador
Languages_da.properties (Danish)
i18n_welcome = Velkommen
i18n_app_name = IHTSDO SNOMED CT Browser
i18n_release = Udgivelse
i18n_perspective = Visning
i18n_about = Om
i18n_provide_feedback = Send en kommentar om denne browser
Run npm install
to make the local application aware of your grunt installation.
The Grunt default task will create all these components, running grunt
in the root folder of the project will build all widgets and create the distribution files.
- js
- internal-libs/snomed-interaction-components.min.js
- css
- css/snomed-interaction-components.min.css
In order to obtain api-endpoint information within the local environment, a configuration similar to the following should be used:
user 'details here';
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
server {
listen 8080;
server_name localhost;
location / {
root /FileLocation/sct-browser-frontend/;
}
location /snowstorm/ {
proxy_pass https://dev-browser.ihtsdotools.org/snowstorm/;
}
}
}
The browser includes URL parameters that will act as shorcuts for opening the browser with pre-defined settings or content selections, skipping the need of selecting options from the main view.
Use: http://browser.ihtsdotools.org/index.html?perspective=full&conceptId1=195967001
Parameter | Example Value | Use |
---|---|---|
edition | MAIN/SNOMEDCT-ES, MAIN/SNOMEDCT-AU | Sets the edition that will be browsed, using the edition names defined by the backend. |
perspective | full,browsing,etc. | Sets the perspective to load. |
languages | en, es, da, pt | Sets the UI language. |
conceptId1 | any SCTID | Sets the first concept details widget to this concept. |
acceptLicense | true | the SNOMED CT Browser License is automatically accepted without displaying the modal window. This means that you are explicitly accepting the license. |
diagrammingMarkupEnabled | true | SNOMED CT diagramming Markup is enabled. |
To easily run this front end in a docker instance, do the following to build the docker image:
docker build -t snomedstorm-browser-nginx .
and then run the nginx container with:
docker run --name snowstorm-nginx -d -p 80:80 -v /host/pathtofiles:/usr/share/nginx/html:ro snomedstorm-browser-nginx
If you have different locations for the back API then make the necessary changes in the docker/nginx.conf
file in this repo.