\n \n Visualize input monomers and output\n configurations of the system\n \n
\n
\n \n Add constraints to the system to give the user\n more control over the input\n \n
\n
\n \n \n
\n What is a TBN?\n
\n
\n The Thermodynamic Binding Networks (TBN) model abstracts the thermodynamics \n of a chemical system as counting the number of bonds and separate complexes.\n A TBN is composed of individual monomers that have one or\n more binding sites that can bind with the binding sites of other\n monomers. TBNs have the following properties:\n
\n
\n \n Complementary binding sites across monomers will bind together\n to form polymers. A configuration\n that maximizes that number of bonds is known as a saturated configuration.{\" \"}\n \n
\n
\n \n We say the entropy of a configuration is the number of separate polymers.\n Among all saturated configurations, \n the TBN tends towards a state of maximum entropy,\n where the monomers are arranged in a way that maximizes the\n the number of separate polymers formed. This\n is known as a stable configuration. \n \n
\n
\n \n \n
\n TBN Example\n
\n
\n The following three images display an example of a TBN and two\n possible binding configurations: a{\" \"}\n saturated configuration and a\n stable configuration.\n
\n
\n \n \n \n The TBN above consists of four monomers: two\n monomers with one binding site and two monomers with two binding\n sites.\n \n \n \n \n \n The configuration above shows an example of a{\" \"}\n saturated configuration for the TBN because the\n configuration maximizes the number of bonds formed.\n \n \n \n \n \n This shows a stable configuration because the\n configuration maximizes the number of bonds and polymers formed.\n The entropy of the system is three as there are\n three polymers formed.{\" \"}\n \n \n
\n \n \n Input Format\n \n
\n
\n In the input, each line represents a monomer{\" \"}\n and each\n space-delineated token represents a{\" \"}\n binding site. In the example shown below,\n
\n
\n \n Monomer 1 has two binding sites: a* and b*\n \n
\n
\n \n Monomer 2 has two binding sites: a and b\n \n
\n
\n \n Monomer 3 has one binding site: a\n \n
\n
\n \n Monomer 4 has one binding site: b\n \n
\n
\n \n
\n a* b* \n a b \n a* \n b*\n
\n
\n
\n
\n There is also an option to label the inputs to be used in\n constraints. To label a binding site, use a colon\n (:) followed by the binding site label you\n would like. To label a monomer, use a{\" \"}\n {\"greater than sign\"} (>) followed by the\n monomer label. In the example shown below,\n
\n
\n \n Monomer 1 has two binding sites: a* (labeled b1) and b*\n \n
\n
\n \n Monomer 2 (labeled m1) has two binding sites: a and b (labeled\n b2)\n \n
\n
\n \n Monomer 3 (labeled m2) has one binding site: a\n \n
\n
\n \n Monomer 4 has one binding site: b\n \n
\n
\n \n
\n a*:b1 b* \n a b:b2 >m1\n \n a* >m2\n \n b*\n
\n
\n \n \n Constraints\n \n
\n Together\n
\n
\n Specifying TOGETHER attempts to force the specified monomers to\n bind into a polymer:\n
\n
\n
\n {\"TOGETHER {m1} {m2} {m3} ...\"}\n
\n
\n
\n Not Together\n
\n
\n Specifying NOTTOGETHER prevents two monomers from being in the\n same polymer:\n
\n
\n
{\"NOTTOGETHER {m1} {m2}\"}
\n
\n
\n Free\n
\n
\n Specifying FREE attempts to force the specified monomer to not\n bind to any other monomer:\n
\n
\n
{\"FREE {m1}\"}
\n
\n
\n Not Free\n
\n
\n Specifying NOTFREE forces specified monomer to bind to any\n other monomer:\n
\n
\n
{\"NOTFREE {m1}\"}
\n
\n
\n Paired\n
\n
\n Specifying PAIRED attempts to force two binding sites to bind\n together:\n
\n
\n
{\"PAIRED {b1} {b2}\"}
\n
\n
\n Not Paired\n
\n
\n Specifying NOTPAIRED prevents two binding sites from binding\n together:\n
\n
\n
{\"NOTPAIRED {b1} {b2}\"}
\n
\n
\n Any Paired\n
\n
\n Specifying ANYPAIRED forces a binding site to bind to some\n other binding site:\n
\n
\n
{\"ANYPAIRED {b1}\"}
\n
\n
\n Not Any Paired\n
\n
\n Specifying NOTANYPAIRED attempts to force the specified binding\n site to not bind to any other binding site:\n
\n
\n
{\"NOTANYPAIRED {b1}\"}
\n
\n \n
Advanced Features
\n
\n Number of Configurations\n
\n
\n The number of configurations box will attempt to generate n\n stable configurations with the specified constraints if it is\n possible. If there are less than n stable configurations, then it will\n begin finding configurations with n-1 polymers.\n
\n
\n Minimum Polymers\n
\n
\n If you are certain that there will be at least a certain number of\n polymers, specifying the minimum number of polymers will\n greatly speed up calculations for inputs with a lot of monomers. This\n is because the algorithm works by finding stable configurations with 1\n polymer, 2 polymers, etc. until failure. Specifying minimum polymer\n will make it start searching at the number inputted and increase\n upward until failure. If you would like to learn more about how the\n algorithm works, please see the paper in the about page.\n
\n
\n If the algorithm is unable to find a stable configuration in{\" \"}\n 90 seconds the server will timeout.\n If this occurs, there are two solutions. First, if you timeout at a\n polymer count = [x], try to run the computation again with minimum\n polymers set to [x] to reduce earlier computation phases.\n Alternatively, you can run the server locally using Docker or directly\n cloning the project from our GitHub repository. You can find a link to\n our GitHub Repository in the About Page.\n
\n \n );\n }\n}\n\nexport default Help;\n","import React, {Fragment} from \"react\"\nimport Grid from '@material-ui/core/Grid';\nimport Card from '@material-ui/core/Card';\nimport Avatar from '@material-ui/core/Avatar';\nimport CardContent from '@material-ui/core/CardContent';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Container from '@material-ui/core/Container';\nimport CardActionArea from '@material-ui/core/CardActionArea';\nimport CardMedia from '@material-ui/core/CardMedia';\nimport CardActions from '@material-ui/core/CardActions';\nimport Typography from '@material-ui/core/Typography';\nimport LinkedInIcon from '@material-ui/icons/LinkedIn';\nimport IconButton from '@material-ui/core/IconButton';\nimport GitHubIcon from '@material-ui/icons/GitHub';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\n\nimport varun from '../images/varun.jpeg';\nimport benson from '../images/benson.jpeg';\nimport steven from '../images/steven.jpeg';\nimport kyle from '../images/kyle.jpeg';\nimport hasan from '../images/hasan.jpeg';\nimport anthony from '../images/anthony.jpeg';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n },\n large: {\n width: theme.spacing(15),\n height: theme.spacing(15),\n },\n container: {\n alignContent: \"flex-start\",\n alignItems: \"center\",\n justify: \"center\",\n justifyContent: \"center\",\n },\n title: {\n margin: theme.spacing(4, 0, 2),\n },\n lists: {\n\n padding: \"5px\"\n }\n\n}));\n\n\nfunction About() {\n const classes = useStyles();\n\n return \n\n \n \n\n \n \n
About
\n
StableGen is an online tool for calculating and visualizing thermodynamically preferred \n (stable) states of abstract chemical systems modeled as Thermodynamic Binding Networks.
\n
Please reach out to the team if you have any feedback about this website: we would love to make\n any changes that you feel would improve the tool. Hope you enjoy it!
\n};\n\nexport default Error\n","import React from \"react\";\nimport { Route, Switch } from \"react-router-dom\";\nimport Help from \"./components/helpComponents/help\";\nimport About from \"./components/about\";\nimport Compute from \"./components/computeComponents/compute\";\nimport Error from \"./components/error\";\n\nexport default function Routes() {\n return (\n \n \n \n \n \n \n );\n}","import React from \"react\";\n\nimport Paper from '@material-ui/core/Paper';\nimport Tabs from \"@material-ui/core/Tabs\";\nimport Tab from \"@material-ui/core/Tab\";\nimport Grid from \"@material-ui/core/Grid\";\nimport Routes from \"./Routes\"\nimport logo from \"./images/logo.png\";\nimport { Route, Link, BrowserRouter } from \"react-router-dom\";\nimport { withStyles, withTheme} from \"@material-ui/core/styles\";\nimport Provider from './components/provider.js';\n\nimport \"./App.css\";\n\nconst LogoToNavigate = ({ history }) => (\n history.push(\"/\")} className=\"Logo\" />\n);\n\nconst Logo = () => (\n } />\n);\n\nconst ColorPaper = withStyles({\n root: {\n color: \"black\",\n backgroundColor: \"#FAFAFA\"\n }\n})(Paper);\n\nfunction App() {\n return (\n \n \n
\n \n \n );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\nimport { BrowserRouter } from 'react-router-dom';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n","module.exports = __webpack_public_path__ + \"static/media/logo.14440365.png\";"],"sourceRoot":""}
\n 
\n 
\n