This is a generic browser front end project, specific instances used in the IHTSDO browsers are customized in branches of this project.

This project is an HTML / JS application that uses the IHTSDO SNOMED CT Interaction Components (https://github.com/IHTSDO/snomed-interaction-components) to create aa SNOMED CT Browser.

The browser connects to a backend REST API provided by the project: https://github.com/IHTSDO/sct-snapshot-rest-api

The browser is a one page HTML/JS app, the components (widgets) used to navigate and display SNOMED CT content are used as an external dependency.

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

The index.html defines the connection parameters that will passed to each of the components on initialization:

var options = {
                serverUrl: "http://browser.ihtsdotools.org/snomed",
                edition: "en-edition",
                release: "v20160631",

These parameters include the server, the edition and the release,

Converting and loading all of the data into the mongo database (for the rest server which serves this UI) can be time consuming. If you choose to only load one country's release you can use the following in index.html

            //It can be time consuming to load all the collections into mongo.  If you are only loading one collection
            //set it here and all GUI elements will use this collection.  Used by switchReleases function
            var mongoDetails = {
                useMe: true,//if set to false this is ignored and normal defaults are taken
                database: 'test',
                collection: 'concepts',
                mongoRestServer: 'http://localhost:3000/snomed'
            }

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

The buttons that link to the browser with specific languages and releases need to be customized on each implementation to match available content.

Customization points: *Dropdown for Release Selection:

<li class="navbar-btn" id="edition-selector">
   <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            <span class="i18n" data-i18n-id="i18n_release">Release</span>:&nbsp;<span id="editionLabel">Multi-english Edition 20140604</span> <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
     <li><a href="javascript:void(0);" onclick="switchRelease('Multi-english Edition 20140604', 'multi-edition', 'v20140701', '900000000000509007');reloadCurrentPerspective();">Multi-english Edition 20140604</a></li>
                                

*Buttons for Release Selection:

<div id="welcome-perspective"  class="bperspective">
     <div class="jumbotron">
     <h1><span class="i18n" data-i18n-id="i18n_welcome">Welcome</span></h1>
     <p><span class="i18n" data-i18n-id="i18n_home1">This is a beta... a work in progress of ways to browse and search SNOMED CT as part of development within the IHTSDO Open Tooling Framework, by the IHTSDO and its development partners</span></p>
     <p><span class="i18n" data-i18n-id="i18n_home2">Please select a SNOMED CT release and a perspective from the top menu to start, or...</span></p>
      <p><a class="btn btn-primary btn-lg" role="button" onclick="switchRelease('Multi-english Edition 20140604', 'multi-edition', 'v20140701', '900000000000509007');switchLanguage('en_US', 'img/flags/us.png', true);switchToFullHeight(404684003, 138875005);"><img src="img/flags/gb.png">&nbsp;&nbsp;&nbsp;Go browsing...</span><br><span class="small">Multi-English Browser</span></a>

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

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.