Merge pull request #869 from genenetwork/features/Integrate-editing-doc-files

Integrate gn editor for files.

17 files changed, 154 insertions, 64 deletions

diff --git a/gn2/wqflask/__init__.py b/gn2/wqflask/__init__.py
index 00fe5127..d959598d 100644
--- a/gn2/wqflask/__init__.py
+++ b/gn2/wqflask/__init__.py
@@ -34,6 +34,7 @@ from gn2.wqflask.api.markdown import facilities_blueprint
 from gn2.wqflask.api.markdown import blogs_blueprint
 from gn2.wqflask.api.markdown import news_blueprint
 from gn2.wqflask.api.markdown import xapian_syntax_blueprint
+from gn2.wqflask.api.markdown import gn_docs_blueprint
 from gn2.wqflask.api.jobs import jobs as jobs_bp
 from gn2.wqflask.oauth2.routes import oauth2
 from gn2.wqflask.oauth2.client import user_logged_in
@@ -109,6 +110,7 @@ app.jinja_env.globals.update(
 
 
 # Registering blueprints
+app.register_blueprint(gn_docs_blueprint, url_prefix="/gn_docs")
 app.register_blueprint(glossary_blueprint, url_prefix="/glossary")
 app.register_blueprint(references_blueprint, url_prefix="/references")
 app.register_blueprint(links_blueprint, url_prefix="/links")
diff --git a/gn2/wqflask/api/markdown.py b/gn2/wqflask/api/markdown.py
index aa7dd3c4..f9e87ee3 100644
--- a/gn2/wqflask/api/markdown.py
+++ b/gn2/wqflask/api/markdown.py
@@ -7,6 +7,8 @@ import requests
 import markdown
 import os
 import sys
+import urllib.parse
+from pathlib import Path
 
 from bs4 import BeautifulSoup  # type: ignore
 
@@ -27,6 +29,25 @@ news_blueprint = Blueprint("news_blueprint", __name__)
 xapian_syntax_blueprint = Blueprint("xapian_syntax_blueprint", __name__)
 
 blogs_blueprint = Blueprint("blogs_blueprint", __name__)
+gn_docs_blueprint = Blueprint("gn_docs_blueprint", __name__)
+
+
+def fetch_raw_markdown(file_path):
+    """
+    This method fetches files from genenetwork:gn docs repo
+    """
+    # todo remove hardcoded file path
+    safe_query = urllib.parse.urlencode({"file_path": file_path})
+    response = requests.get(
+        f"http://localhost:8091/edit?{safe_query}")
+    response.raise_for_status()
+    return response.json()
+
+
+def render_markdown_as_html(content):
+    """This method converts markdown to html for render"""
+    return markdown.markdown(content, extensions=["tables"])
+
 
 
 def render_markdown(file_name, is_remote_file=True):
@@ -97,35 +118,53 @@ def get_blogs(user: str = "genenetwork",
     return dict(sorted(blogs.items(), key=lambda x: x[0], reverse=True))
 
 
-@glossary_blueprint.route('/')
+@gn_docs_blueprint.route('/glossary')
 def glossary():
+    file_data = fetch_raw_markdown(file_path="general/glossary/glossary.md")
     return render_template(
-        "glossary.html",
-        rendered_markdown=render_markdown("general/glossary/glossary.md")), 200
+        "generic_gn_docs.html",
+        rendered_markdown=render_markdown_as_html(file_data["content"]),
+        file_path=file_data["file_path"],
+        file_title=Path(file_data["file_path"]).stem
+    )
 
 
-@references_blueprint.route('/')
+@gn_docs_blueprint.route('/references')
 def references():
+
+    file_data = fetch_raw_markdown(
+        file_path="general/references/references.md")    
     return render_template(
-        "references.html",
-        rendered_markdown=render_markdown("general/references/references.md")), 200
+        "generic_gn_docs.html",
+        rendered_markdown=render_markdown_as_html(file_data["content"]),
+        file_path=file_data["file_path"],
+        file_title=Path(file_data["file_path"]).stem
+    )
 
 
-@news_blueprint.route('/')
+@gn_docs_blueprint.route('/news')
 def news():
+    file_data = fetch_raw_markdown(file_path="general/news/news.md")
     return render_template(
-        "news.html",
-        rendered_markdown=render_markdown("general/news/news.md")), 200
+        "generic_gn_docs.html",
+        rendered_markdown=render_markdown_as_html(file_data["content"]),
+        file_path=file_data["file_path"],
+        file_title=Path(file_data["file_path"]).stem
+    )
 
 
-@xapian_syntax_blueprint.route('/')
+@gn_docs_blueprint.route('/xapian')
 def xapian():
+    file_data = fetch_raw_markdown(file_path="general/search/xapian_syntax.md")
     return render_template(
-        "search-syntax.html",
-        rendered_markdown=render_markdown("general/search/xapian_syntax.md")), 200
+        "generic_gn_docs.html",
+        rendered_markdown=render_markdown_as_html(file_data["content"]),
+        file_path=file_data["file_path"],
+        file_title=Path(file_data["file_path"]).stem
+    )
 
 
-@environments_blueprint.route("/")
+@gn_docs_blueprint.route("/environments")
 def environments():
 
     md_file = get_file_from_python_search_path("wqflask/DEPENDENCIES.md")
@@ -148,47 +187,70 @@ def environments():
             200
         )
     # Fallback: Fetch file from server
+    file_data = fetch_raw_markdown(
+        file_path="general/environments/environments.md")
     return (render_template(
         "environment.html",
         svg_data=None,
-        rendered_markdown=render_markdown(
-            "general/environments/environments.md")),
-            200)
+        rendered_markdown=render_markdown_as_html(file_data["content"])))
 
 
-@environments_blueprint.route('/svg-dependency-graph')
+@gn_docs_blueprint.route('/svg-dependency-graph')
 def svg_graph():
     directory, file_name, _ = get_file_from_python_search_path(
         "wqflask/dependency-graph.svg").partition("dependency-graph.svg")
     return send_from_directory(directory, file_name)
 
 
-@links_blueprint.route("/")
+@gn_docs_blueprint.route("/links")
 def links():
+    file_data = fetch_raw_markdown(file_path="general/links/links.md")
     return render_template(
-        "links.html",
-        rendered_markdown=render_markdown("general/links/links.md")), 200
+        "generic_gn_docs.html",
+        rendered_markdown=render_markdown_as_html(file_data["content"]),
+        file_path=file_data["file_path"],
+        file_title=Path(file_data["file_path"]).stem
+    )
 
 
-@policies_blueprint.route("/")
+@gn_docs_blueprint.route("/policies")
 def policies():
+    file_data = fetch_raw_markdown(file_path="general/policies/policies.md")
     return render_template(
-        "policies.html",
-        rendered_markdown=render_markdown("general/policies/policies.md")), 200
+        "generic_gn_docs.html",
+        rendered_markdown=render_markdown_as_html(file_data["content"]),
+        file_path=file_data["file_path"],
+        file_title=Path(file_data["file_path"]).stem
+    )
 
 
-@facilities_blueprint.route("/")
+@gn_docs_blueprint.route("/facilities")
 def facilities():
-    return render_template("facilities.html", rendered_markdown=render_markdown("general/help/facilities.md")), 200
+    file_data = fetch_raw_markdown(file_path="general/help/facilities.md")
+    return render_template("generic_gn_docs.html",
+                           rendered_markdown=render_markdown_as_html(
+                               file_data["content"]),
+                           file_path=file_data["file_path"],
+                           file_title=Path(file_data["file_path"]).stem
+                           )
 
 
-@blogs_blueprint.route("/<path:blog_path>")
+@gn_docs_blueprint.route("/blogs/<path:blog_path>")
 def display_blog(blog_path):
     return render_template("blogs.html", rendered_markdown=render_markdown(blog_path))
 
 
-@blogs_blueprint.route("/")
+@gn_docs_blueprint.route("/blogs")
 def blogs_list():
     blogs = get_blogs()
 
     return render_template("blogs_list.html", blogs=blogs)
+
+
+@gn_docs_blueprint.errorhandler(requests.exceptions.HTTPError)
+def page_not_found(error):
+    """ Return error 404 """
+    return {"Reason": error.response.reason,
+            "error_status_code": error.response.status_code,
+            "error_msg": error.response.text
+            }
diff --git a/gn2/wqflask/templates/base.html b/gn2/wqflask/templates/base.html
index 9c4ebfdd..7db9aed6 100644
--- a/gn2/wqflask/templates/base.html
+++ b/gn2/wqflask/templates/base.html
@@ -82,16 +82,16 @@
                         <li class="">
                             <a href="/help" class="dropdow-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Help <span class="caret"></a>
                                 <ul class="dropdown-menu">
-                                    <li><a href="{{ url_for('references_blueprint.references') }}">References</a></li>
+                                    <li><a href="{{ url_for('gn_docs_blueprint.references') }}">References</a></li>
                                     <li><a href="/tutorials">Webinars, Tutorials/Primers</a></li>
-                                    <li><a href="{{ url_for('blogs_blueprint.blogs_list') }}">Blogs</a></li>
-                                    <li><a href="{{ url_for('glossary_blueprint.glossary') }}">Glossary of Term</a></li>
+                                    <li><a href="{{ url_for('gn_docs_blueprint.blogs_list') }}">Blogs</a></li>
+                                    <li><a href="{{ url_for('gn_docs_blueprint.glossary') }}">Glossary of Term</a></li>
                                     <li><a href="http://gn1.genenetwork.org/faq.html">FAQ</a></li>
-                                    <li><a href="{{ url_for('policies_blueprint.policies') }}">Policies</a></li>
-                                    <li><a href="{{ url_for('links_blueprint.links') }}">Links</a></li>
-                                    <li><a href="{{ url_for('facilities_blueprint.facilities') }}">Facilities</a></li>
-                                    <li><a href="{{ url_for('environments_blueprint.environments') }}">Environments</a></li>
-                                    <li><a href="/news">GN1 News</a></li>
+                                    <li><a href="{{ url_for('gn_docs_blueprint.policies') }}">Policies</a></li>
+                                    <li><a href="{{ url_for('gn_docs_blueprint.links') }}">Links</a></li>
+                                    <li><a href="{{ url_for('gn_docs_blueprint.facilities') }}">Facilities</a></li>
+                                    <li><a href="{{ url_for('gn_docs_blueprint.environments') }}">Environments</a></li>
+                                    <li><a href="{{ url_for('gn_docs_blueprint.news') }}">GN1 News</a></li>
                                 </ul>
                         </li>
                         <li class="">
diff --git a/gn2/wqflask/templates/blogs_list.html b/gn2/wqflask/templates/blogs_list.html
index 6bad4628..a74d24a2 100644
--- a/gn2/wqflask/templates/blogs_list.html
+++ b/gn2/wqflask/templates/blogs_list.html
@@ -40,7 +40,7 @@
             <div class="blog_title">
                 <ul>
                     <li>
-                        <a href="{{ url_for('blogs_blueprint.display_blog',blog_path = blog.full_path)}}">{{blog['subtitle']}}</a>
+                        <a href="{{ url_for('gn_docs_blueprint.display_blog',blog_path = blog.full_path)}}">{{blog['subtitle']}}</a>
                     </li>
                 </ul>
             </div>
@@ -49,4 +49,4 @@
         {%endfor%}
     </div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/gn2/wqflask/templates/facilities.html b/gn2/wqflask/templates/facilities.html
index 56b127f9..ee4c84db 100644
--- a/gn2/wqflask/templates/facilities.html
+++ b/gn2/wqflask/templates/facilities.html
@@ -10,7 +10,7 @@
 
  <div class="github-btn-container">
     <div class="github-btn">
-        <a href="https://github.com/genenetwork/gn-docs/blob/master/general/help/facilities.md">
+        <a href="/editor/edit?file-path=general/help/facilities.md">
             Edit Text
             <img src="/static/images/edit.png">
         </a>
@@ -21,4 +21,4 @@
 
 </div>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/gn2/wqflask/templates/generic_gn_docs.html b/gn2/wqflask/templates/generic_gn_docs.html
new file mode 100644
index 00000000..57723f0b
--- /dev/null
+++ b/gn2/wqflask/templates/generic_gn_docs.html
@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+{% block title %}{{ file_title|capitalize }}{% endblock %}
+{% block css %}<link rel="stylesheet" type="text/css" href="/static/new/css/markdown.css" />{% endblock %}
+{% block content %}
+    <div class="github-btn-container">
+        <div class="github-btn">
+            <a href="/editor/edit?file-path={{ file_path }}">
+                Edit Text
+                <img src="/static/images/edit.png">
+            </a>
+        </div>
+    </div>
+    <div id="markdown" class="container">{{ rendered_markdown|safe }}</div>
+{% endblock %}
diff --git a/gn2/wqflask/templates/glossary.html b/gn2/wqflask/templates/glossary.html
index aaee7c5a..4922d39e 100644
--- a/gn2/wqflask/templates/glossary.html
+++ b/gn2/wqflask/templates/glossary.html
@@ -10,7 +10,7 @@
 
 <div class="github-btn-container">
     <div class="github-btn">
-        <a href="https://github.com/genenetwork/gn-docs/blob/master/general/glossary/glossary.md">
+        <a href="/editor/edit?file-path=general/glossary/glossary.md">
             Edit Text
             <img src="/static/images/edit.png">
         </a>
diff --git a/gn2/wqflask/templates/gn_editor.html b/gn2/wqflask/templates/gn_editor.html
index e5c649d1..d89aaf0a 100644
--- a/gn2/wqflask/templates/gn_editor.html
+++ b/gn2/wqflask/templates/gn_editor.html
@@ -157,11 +157,13 @@
       let fileExt =   (filePath.substring(filePath.lastIndexOf('.')+1, filePath.length) || "md").toLowerCase();
       let data = {{ content|tojson }}
 
-      localStorage.setItem("gn_editor_sha" ,hash)
+	localStorage.setItem("gn_editor_sha" ,hash)
+	htmx.on("#output", "updateDataEvent", function(event){
+	  data = editor.getValue()
+	})
       htmx.on("#output", "commitEvent", function(event){
           htmx.ajax("POST", "/editor/commit", {target: "#output", swap:"innerHTML",values: {'msg':event.detail.payload, 'content': editor.getValue(), "hash": localStorage.getItem("gn_editor_sha"), "file_path": filePath}})
-      })
-
+	})
       htmx.on("#output", "diffEvent", function(event){
           var fileName = "{{ file_path }}"
           var diffContent = Diff.createTwoFilesPatch(fileName,fileName, data, editor.getValue())
@@ -186,7 +188,6 @@
 
       htmx.on("#diffBtn","click",function(event){
           //dispatch your event here
-	  console.log("Clicked diff btn here")
 	  htmx.find("#output").dispatchEvent(
           new CustomEvent("diffEvent", {
               bubbles: true,
diff --git a/gn2/wqflask/templates/gn_editor_commit.html b/gn2/wqflask/templates/gn_editor_commit.html
index 84ebd818..2eb3e60c 100644
--- a/gn2/wqflask/templates/gn_editor_commit.html
+++ b/gn2/wqflask/templates/gn_editor_commit.html
@@ -23,15 +23,17 @@
         <br>
         <br>
         <div class="row">
-            <button id="btn-commit" class="btn btn-primary col-lg-3 col-lg-offset-1 col-sm-4 col-sm-offset-1">Commit</button>
-            <button id="btn-diff" class="btn col-lg-3 col-lg-offset-1  col-sm-4 col-sm-offset-1">Show Diff</button>
+            <button id="btn-commit"
+                    class="btn btn-primary col-lg-3 col-lg-offset-1 col-sm-4 col-sm-offset-1">Commit</button>
+            <button id="btn-diff"
+                    class="btn col-lg-3 col-lg-offset-1  col-sm-4 col-sm-offset-1">Show Diff</button>
         </div>
         <br>
         <div id="diff_page"></div>
     </div>
 </section>
 {% block js %}
-    <script>
+<script>
   htmx.on("#btn-commit", "click", function(event){
       let msg = htmx.find("#commit-message").value.trim()
       if (msg != ""){
@@ -51,5 +53,5 @@
           }),
       );
   })
-    </script>
+</script>
 {% endblock %}
diff --git a/gn2/wqflask/templates/gn_editor_results_page.html b/gn2/wqflask/templates/gn_editor_results_page.html
index 666bd432..6eaeb941 100644
--- a/gn2/wqflask/templates/gn_editor_results_page.html
+++ b/gn2/wqflask/templates/gn_editor_results_page.html
@@ -37,10 +37,19 @@
 </section>
 {% block js %}
     <script>
-  var commitSha = "{{ commit_sha }}";
-  if (commitSha !="" && commitSha!= undefined){
-      localStorage.setItem("gn_editor_sha", commitSha)
-  }
+      var commitSha = "{{ commit_sha }}";
+      if (commitSha !="" && commitSha!= undefined){
+	  prev_commit = localStorage.getItem("gn_editor_sha")
+          localStorage.setItem("gn_editor_sha", commitSha)
+	  if (prev_commit !=  commitSha) {
+	      //update the contennt
+      htmx.find("#output").dispatchEvent(
+          new CustomEvent("updateDataEvent", {
+              bubbles: true,
+              detail: {},
+          }),
+      );
+   }}
 
     </script>
 {% endblock %}
diff --git a/gn2/wqflask/templates/index_page.html b/gn2/wqflask/templates/index_page.html
index f0840425..734cd075 100755
--- a/gn2/wqflask/templates/index_page.html
+++ b/gn2/wqflask/templates/index_page.html
@@ -257,7 +257,7 @@
                             Gene Ontology</a>.</li>
 
                         <li><b>RIF=diabetes LRS=(9 999 Chr2 100 105) transLRS=(9 999 10)</b>
-                        finds diabetes-associated transcripts with peak <a href="{{ url_for('glossary_blueprint.glossary') }}#E">
+                        finds diabetes-associated transcripts with peak <a href="{{ url_for('gn_docs_blueprint.glossary') }}#E">
                         trans eQTLs</a> on Chr 2 between 100 and 105 Mb with LRS
                         scores between 9 and 999.</li>
                       </ul>
diff --git a/gn2/wqflask/templates/links.html b/gn2/wqflask/templates/links.html
index 6e91adae..4a134c96 100644
--- a/gn2/wqflask/templates/links.html
+++ b/gn2/wqflask/templates/links.html
@@ -10,7 +10,7 @@
 
 <div class="github-btn-container">
     <div class="github-btn ">
-        <a href="https://github.com/genenetwork/gn-docs/blob/master/general/links/links.md">
+        <a href="/editor/edit?file-path=general/links/links.md">
             Edit Text
             <img src="/static/images/edit.png">
         </a>
@@ -21,4 +21,4 @@
    {{ rendered_markdown|safe }}
 
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/gn2/wqflask/templates/news.html b/gn2/wqflask/templates/news.html
index a615564b..df8e02ef 100644
--- a/gn2/wqflask/templates/news.html
+++ b/gn2/wqflask/templates/news.html
@@ -10,7 +10,7 @@
 
  <div class="github-btn-container">
     <div class="github-btn">
-        <a href="https://github.com/genenetwork/gn-docs/blob/master/general/news/news.md">
+        <a href="/editor/edit?file-path=general/news/news.md">
             Edit Text
             <img src="/static/images/edit.png">
         </a>
diff --git a/gn2/wqflask/templates/policies.html b/gn2/wqflask/templates/policies.html
index e36c9e08..d7b0e3f9 100644
--- a/gn2/wqflask/templates/policies.html
+++ b/gn2/wqflask/templates/policies.html
@@ -10,7 +10,7 @@
 
  <div class="github-btn-container">
     <div class="github-btn ">
-        <a href="https://github.com/genenetwork/gn-docs/blob/master/general/policies/policies.md">
+        <a href="/editor/edit?file-path=general/policies/policies.md">
             Edit Text
             <img src="/static/images/edit.png">
         </a>
@@ -20,4 +20,4 @@
    {{ rendered_markdown|safe }}
 
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/gn2/wqflask/templates/references.html b/gn2/wqflask/templates/references.html
index 04e60361..d858e10f 100644
--- a/gn2/wqflask/templates/references.html
+++ b/gn2/wqflask/templates/references.html
@@ -6,7 +6,7 @@
 {% block content %}
 <div class="github-btn-container">
     <div class="github-btn">
-        <a href="https://github.com/genenetwork/gn-docs/blob/master/general/references/references.md">
+        <a href="/editor/edit?file-path=general/references/references.md">
             Edit Text
             <img src="/static/images/edit.png">
         </a>
@@ -16,4 +16,4 @@
     {{ rendered_markdown|safe }}
 </div>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/gn2/wqflask/templates/search-syntax.html b/gn2/wqflask/templates/search-syntax.html
index 52538826..e4ab7907 100644
--- a/gn2/wqflask/templates/search-syntax.html
+++ b/gn2/wqflask/templates/search-syntax.html
@@ -10,7 +10,7 @@
 
  <div class="github-btn-container">
     <div class="github-btn">
-        <a href="https://github.com/genenetwork/gn-docs/blob/master/general/search/xapian_syntax.md">
+        <a href="/editor/edit?file-path=general/search/xapian_syntax.md">
             Edit Text
             <img src="/static/images/edit.png">
         </a>
@@ -21,4 +21,4 @@
 
 </div>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/gn2/wqflask/views.py b/gn2/wqflask/views.py
index e306cc2c..d5fcedfe 100644
--- a/gn2/wqflask/views.py
+++ b/gn2/wqflask/views.py
@@ -322,8 +322,8 @@ def gnqna():
 @app.route("/editor/edit", methods=["GET"])
 @require_oauth2
 def edit_gn_doc_file():
-    file_path = request.args.get("file-path", "")
-    response = requests.get(f"http://localhost:8091/edit?file_path={file_path}")
+    file_path = urllib.parse.urlencode({"file_path": request.args.get("file-path", "")})
+    response = requests.get(f"http://localhost:8091/edit?{file_path}")
     response.raise_for_status()
     return render_template("gn_editor.html", **response.json())