Skip to content

GitLab

pd2af
pd2af
Commit ac969264 authored by Yohan Jarosz's avatar Yohan Jarosz 🐶
Browse files
Options

Merge branch '1-only-make-converter-visible' into 'master' 

Resolve "Only make converter visible"

Closes #1

See merge request !3
parents 6832b172 82d5783a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 43 additions and 2684 deletions
code/start-server.rkt
View file @ ac969264
......@@ -9,7 +9,7 @@
(serve/servlet
translator
#:listen-ip #f ; #f - open to external http requests
#:port 80 ; standard port
#:port 8080
; #:servlet-regexp #rx"" ; capture all top-level requests
#:servlet-regexp #rx"/translate"
#:extra-files-paths (list (build-path (getenv "SRV_ROOT") "html"))
......
html/cases.html deleted 100644 → 0
View file @ 6832b172
This diff is collapsed.
html/index.html
View file @ ac969264
<!DOCTYPE html>
<html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- bulma -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"> -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script src="angular/components/ng-file-upload/ng-file-upload-all.js"></script>
<script src="angular/translator.js"></script>
<title>PD2AF - a conversion tool for SBGN diagrams</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/common.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,800" rel="stylesheet">
<link rel="stylesheet" href="styles/translator.css">
</head>
<body>
<div class="page_container">
......@@ -14,65 +21,46 @@
<img src="img/pd2af_logo.png" alt="pd2af logo" />
</div>
<nav>
<a href="index.html" class="current_page_nav">Start</a><a href="specification.html" >Specification</a><a href="cases.html" >Cases</a><a href="translator.html" >Try it!</a>
</nav>
</header>
<h1>Welcome to PD2AF Converter website!</h1>
<h2>About</h2>
<p>PD2AF Converter is a tool for translation of SBGN diagrams from PD to AF form.</p>
<p><a href="http://sbgn.github.io/sbgn">SBGN (Systems Biology Graphical Notation)</a> is a way we can describe processes inside and outside human and other organism <a href="https://en.wikipedia.org/wiki/Cell_(biology)">cells</a>.</p>
<p>SBGN Process Decription diagrams <em>(shortly PD)</em> are used to describe biochemical processes, and tend to become enourmously large, when new and new cell internal mechanisms are discovered. For simplifying possibly complex picture, another type of SBGN diagrams may be handy - Activity Flow diagrams <em>(shortly AF).</em></p>
<p>Usually, information in widespread pathways databases like <a href="http://genome.jp/kegg">KEGG</a>, <a href="http://reactome.org">Reactome</a> etc., is collected in the forms similar to SBGN PD diagrams. Often, they are large and it takes time to understand even the simple features of a processes and described system. Our tool, PD2AF Converter is intended to facilitate complex diagrams study by conversion of PD diagrams into a more simple view of AF diagrams.</p>
<p>To try PD2AF Converter in work, go to <a href="translator.html">Converter page</a>, provide it with your SBGN PD diagram files and get correspondent SBGN AF diagrams, that you will be able to open in your favorite SBGN editor</p>
<p>We hope that PD2AF Converter will be useful for you and will help you in your System Biology research activities.</p>
<h2>Implementation</h2>
<img src="img/application_components.png" class="illustration" alt="application components" />
<div class="p">For convenient implementation of Converter function, we have developed some infrastructure around it. The resulted system is shown on the picture above. The modules of the system are:
<ul>
<li><a href="https://gitlab.com/ddenniss/odysseus/blob/master/tabtree-format/html.rkt">Webpages Generator</a> - Processes html and css templates into correspondent html, css and svg files. Works like similar template engines (e.g. JSP, Django Template Language or SASS), but also allows insertions of Racket code snippets.</li><li><a href="https://gitlab.com/ddenniss/odysseus/tree/master/tabtree-format">Knowledge Tree Reader</a> - Handles files in .tree format, specially invented for convenient textual encoding of the key-value objects in hierarchy. This model often comes to be useful when we need to structurize some knowledge field or put some cognitive map into the text.</li><li><a href="https://github.com/prozion/odysseus-modules/tree/master/sbgn-lisp">SBGN-Lisp Language</a> - Special lisp-like syntax and related tools that allow to write SBGN in the form of sexp expressions. This brings an opportunity to codify SBGN otherwise graphical diagrams in the textual way. It is far more convenient to work with, comparing to SBGN-ML which is usually used to save diagram in computer-readable format (XML), but fails to be readable by human.</li><li><a href="https://github.com/prozion/odysseus-modules/tree/master/pd2af">PD2AF Converter</a> - Translates SBGN PD diagrams into SBGN AF. Also converts XML (SBGN ML) to sexp expression, and sexp expression back to XML.</li>
</ul>
</div>
<h2>Converter design</h2>
<img src="img/translator_design.png" class="illustration" alt="translator design" />
<div class="p">To convert PD SBGN diagram to the AF SBGN, data undergoes several stages of transformations. Red arrows show implemented transformations.
<ol>
<li>We build internal represenattion of the diagram, transforming XML to sexp expression.</li>
<li>Then, we clean and normalize sexp expression, make it ready for pattern matching</li>
<li>The stage of conversion of PD to AF itself. Program seeks matches in the patterns and substitute these patterns with prescripted AF forms.</li>
<li>After this the form is cleaned again, to provide more compact and sensible AF output</li>
<li>On the last stage we translate sexp expression back to XML, this time SBGN AF ML format. Further this XML file with AF diagram can be uploaded and viewed/edited in the SBGN editor, such as <a href="http://newteditor.org">Newt</a> or <a href="http://sbgn-ed.org">VANTED</a>.</li>
</ol>
</div>
<form ng-app="translator" ng-controller="AppController" ng-init="current_file='Select file'" name="form">
<section class="section">
<h1>PD > AF</h1>
<p>Translate SBGN diagrams from Process Description to Activity Flow. Please, upload file in XML format.</p>
<div class="box">
<div class="buttons">
<a ng-class="['button', translate_button? 'selected' : 'action']" ngf-select="refresh_filename($file)" ng-model="file" name="file">[[file_selector_button_text]]</a>
<a class="button action ng-hide" ng-show="translate_button" ng-click="submit()">Convert</a>
</div>
</div>
<div ng-show="error" class="box ng-hide error">
<h2>Translation error</h2>
<span>[[error_message]]</span>
<div class="box"><a class="button reset" ng-click="reset()">Reset</a></div>
</div>
<!-- <div ngshow="calculation_img"><img src="img/loading.gif" /></div> -->
<div ng-show="download_button" class="box ng-hide">
<table class="results_table">
<tbody>
<tr>
<td><p>Open result as AF SBGN file:</p></td>
<td><a href="/generated/[[af_filename]]">[[af_filename]]</a></td>
</tr>
<tr>
<td><p>Open result in Newt Editor:</p></td>
<td><a href="http://web.newteditor.org/?URL=[[af_fileurl]]" target="_blank"><img width="60" src="http://web.newteditor.org/app/img/newt-logo.png" /></a></td>
</tr>
<tr><td class="c" colspan="2"><div><a class="button reset" ng-click="reset()">Reset</a></div></td></tr>
</tbody>
</table>
</div>
<div class="placeholder"></div>
</section>
</form>
<footer>
<div>Page generated <b>30.07.2019</b></div>
</footer>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(52309366, "init", {
id:52309366,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/52309366" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div>
</body>
......
html/specification.html deleted 100644 → 0
View file @ 6832b172
This diff is collapsed.
html/translator.html deleted 100644 → 0
View file @ 6832b172
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- bulma -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"> -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script src="angular/components/ng-file-upload/ng-file-upload-all.js"></script>
<script src="angular/translator.js"></script>
<title>PD2AF - a conversion tool for SBGN diagrams</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/common.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,800" rel="stylesheet">
<link rel="stylesheet" href="styles/translator.css">
</head>
<body>
<div class="page_container">
<header>
<div class="logo">
<img src="img/pd2af_logo.png" alt="pd2af logo" />
</div>
<nav>
<a href="index.html" >Start</a><a href="specification.html" >Specification</a><a href="cases.html" >Cases</a><a href="translator.html" class="current_page_nav">Try it!</a>
</nav>
</header>
<form ng-app="translator" ng-controller="AppController" ng-init="current_file='Select file'" name="form">
<section class="section">
<h1>PD > AF</h1>
<p>Translate SBGN diagrams from Process Description to Activity Flow. Please, upload file in XML format.</p>
<div class="box">
<div class="buttons">
<a ng-class="['button', translate_button? 'selected' : 'action']" ngf-select="refresh_filename($file)" ng-model="file" name="file">[[file_selector_button_text]]</a>
<a class="button action ng-hide" ng-show="translate_button" ng-click="submit()">Convert</a>
</div>
</div>
<div ng-show="error" class="box ng-hide error">
<h2>Translation error</h2>
<span>[[error_message]]</span>
<div class="box"><a class="button reset" ng-click="reset()">Reset</a></div>
</div>
<!-- <div ngshow="calculation_img"><img src="img/loading.gif" /></div> -->
<div ng-show="download_button" class="box ng-hide">
<table class="results_table">
<tbody>
<tr>
<td><p>Open result as AF SBGN file:</p></td>
<td><a href="/generated/[[af_filename]]">[[af_filename]]</a></td>
</tr>
<tr>
<td><p>Open result in Newt Editor:</p></td>
<td><a href="http://web.newteditor.org/?URL=[[af_fileurl]]" target="_blank"><img width="60" src="http://web.newteditor.org/app/img/newt-logo.png" /></a></td>
</tr>
<tr><td class="c" colspan="2"><div><a class="button reset" ng-click="reset()">Reset</a></div></td></tr>
</tbody>
</table>
</div>
<div class="placeholder"></div>
</section>
</form>
<footer>
<div>Page generated <b>30.07.2019</b></div>
</footer>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(52309366, "init", {
id:52309366,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/52309366" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment