Skip to content
System Dynamics Model building tool.
TypeScript CSS HTML JavaScript Other
Branch: master
Clone or download
Latest commit 531251a Jan 10, 2020
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin Added script to compare language files [#170116509] Dec 4, 2019
cypress Add Cypress test for About menu Jan 9, 2019
graphics-src Icon for 'increase less and less' & 'decrease less and less' [#97031890] Jun 18, 2015
src Use simulation engine V2 + RK4 by default Jan 10, 2020
test Update tests Jan 10, 2020
.babelrc Removed coffeescript compiler Oct 18, 2018
.env.sample Use s3_website gem for AWS S3 deployment of dev site. [#94524052] Jun 2, 2015
.gitignore Ignore intellij IDE settings Nov 14, 2018
.travis.yml Pinned travis dist to trusty to fix s3_website Java version issue Jun 13, 2019
Gemfile Use s3_website gem for AWS S3 deployment of dev site. [#94524052] Jun 2, 2015
Gemfile.lock Use s3_website gem for AWS S3 deployment of dev site. [#94524052] Jun 2, 2015
LICENSE Initial commit after moving from the model-survey repo. Feb 19, 2015 Replaced gulp with webpack Oct 19, 2018 Replaced gulp with webpack Oct 19, 2018
building-models.sublime-project Project file which ignores node_modules/, public/ & dist/ folders. Feb 26, 2015
coffeelint.json Add line-endings rule to CoffeeLint configuration so that Windows lin… May 25, 2017 Shared Codap-Ivy icons from… Oct 9, 2015
cypress.json Setup Cypress, basic commands/helpers, and add a few tests Nov 16, 2018
package-lock.json Version 1.20.1 Dec 20, 2019
package.json Version 1.20.1 Dec 20, 2019
postcss.config.js Replaced gulp with webpack Oct 19, 2018 Replaced gulp with webpack Oct 19, 2018
s3_website.yml update config for new s3_website gem Oct 27, 2017
tsconfig.json Changed browserify to use typescript, build fails with 2520 errors Oct 18, 2018
tslint.json Converted remaining views to React.Component and removed globals Oct 29, 2018
webpack.config.js Try to fix travis S3 deployment Jan 9, 2019

Sage Modeler

Build Status

A System Dynamics modeling tool, under development by the Building Models Project of Concord Consortium.

See the application running here:

Other useful links:

  • Codap – The Data Analysis Platform we are using.
  • Codap Sage Icons – A shared icon font for Building Models (ivy) and CODAP.
  • MySystem – a simple concept mapping with node/edge graphs.
  • Model Survey – Assessing available node/edge graphing tools.
  • jsPlumb – The graphing toolkit we are currently using.
  • React – Javscript component development toolkit.
  • MIT License – The license we are using.

Development Setup

  1. Install the global dependencies:

    • Node.js: brew install node on OS X `
  2. Check out the project and install the local dependencies:

    • git checkout
    • cd building-models
    • npm install
  3. Run:

    • npm start — watches the project sources in ./src/ and builds artifacts into dev and starts webserver.
    • Edit code in ./src/, watch live changes in browser. (Webpack will build your changes automatically to ./dev/ and will automatically refresh your browser when it sees changes there.)
    • Place static files you want to be copied to dev/ in src/assets/

    If you get an node error about "too many files open," try running ulimit -n 2560

  4. Test (after webpack has run, or while it is running):

    • ./node_modules/mocha/bin/mocha -w to run mocha tests (located in ./test/)

    The -w flag should keep the tests running everytime you make a code change (if webpack is still running), but occasionally a hard-error of a test will force you to start them up again.

  5. Test Sage running in CODAP:

Manual Github Pages deployment:

  • Read ./ before running it.
  • run ./ This should:
    • Check out new clone of this repo into dest, checking out the gh-pages branch by default
    • Run npm build on your current codebase to generate all assets into ./dist/
    • Push changes up to gh-pages on github.
  • See the model at

Automatic CI branch deployment

  • Named branches or pushed tags get deployed to S3 automatically by travis.
  • The URL for branch deploys is<branchname>/sage.html
  • The production branch is deployed to
  • Read .travis.yml and for more information.

Production Deployment

  1. Checkout the production branch.
  2. Make changes …
  3. git push


The master English strings file is src/code/utils/lang/en-US-master.json, which is a standard JSON file except that JavaScript-style comments are allowed. (Comments are stripped before use.) Changes to English strings should be made in the master English strings file. All other language files in src/code/utils/lang/*.json are output files generated by script. Translations for other languages are managed via the Building Models project (authentication required) on POEditor, which provides free hosting services for open source projects.


After making changes to the master English strings file (src/code/utils/lang/en-US-master.json), run the strings:build script to strip comments and deploy the src/code/utils/lang/en-US.json file for building:

npm run strings:build

To push changes to the master English strings file to POEditor, run the strings:push script:

npm run strings:push -- -a <poeditor-api-token>

The API token must be provided as an argument to the strings:push script or it can be set as an environment variable:

export POEDITOR_API_TOKEN=<poeditor-api-token>

To update the strings files within the project, run the strings:pull script:

npm run strings:pull -- -a <poeditor-api-token>

As with the strings:push script, the API token must be provided or be set as an environment variable. The strings:pull script builds the English strings as well so all strings files will be up to date.

After pulling updated strings, the modified files can be committed to git, turned into a Github Pull Request, etc. Note that POEditor supports Github integration which could potentially automate part of this, but that requires further investigation.

Unicode escapes are converted to their UTF-8 equivalents when pushed, i.e. strings are viewed/edited in their "user" form in POEditor, and they remain in their UTF-8 form when pulled. For characters that are better left in their Unicode escape form, such as non-printable characters like ZERO-WIDTH-SPACE ("\u200b") and the RIGHT-TO-LEFT-MARK ("\u200f"), the scripts support a custom Unicode escape sequence such that "[u200b]" and "[u200f]" are converted to "\u200b" and "\u200f" respectively when pulled.

The ZERO-WIDTH-SPACE character can be used to indicate that the empty string is the correct translation for a string in a particular language. If the string were simply left untranslated, then POEditor would 1) show it as untranslated in the POEditor UI and 2) replace it with the English string when pulled. The ZERO-WIDTH-SPACE prevents POEditor from treating the string as untranslated, but it is rendered like an empty string.

Adding a language

To add a new language:

  1. Add the language to the POEditor project
  2. Add the language code to the list of languages in bin/
  3. Load the new language file in src/code/utils/translate.js

Note that there is probably a way to eliminate the need for step 3 above by requiring all JSON files in the src/code/utils/lang directory (except for en-US-master.json), but that has not been implemented yet.

Updating the shared fonts.

To update the icon fonts used in this project:

  1. Checkout and modify the shared icon-font project Codap Sage Icons
  2. Follow the directions there to deploy to github pages.
  3. Run to download a local copy of the CSS and fonts to this project.

Disabling Rollbar integration

If you want to disable Rollbar integration on your development machine just add a disableRollbar local storage option with the value true (as a string, all local storage values are strings). This value is checked in the index.html file prior to defining the Rollbar configuration object and loading the Rollbar remote Javascript.

You can’t perform that action at this time.