Show diff for edited files.

3 files changed, 98 insertions, 80 deletions

diff --git a/gn2/wqflask/templates/gn_editor.html b/gn2/wqflask/templates/gn_editor.html
index d55662c3..4116c398 100644
--- a/gn2/wqflask/templates/gn_editor.html
+++ b/gn2/wqflask/templates/gn_editor.html
@@ -2,8 +2,10 @@
 {% block title %}Genenetwork Files Editor {% endblock %}
 
 {% block css %}
-<style>
 
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
+<style>
+  
 </style>
 {% endblock %}
 {% block search %}{% endblock %}
@@ -17,18 +19,16 @@
         </div>
         <div >
           <ul class="nav navbar-nav navbar-right">
-	    <li><a href="#" hx-get="/editor/commit" hx-target="#output" hx-trigger="click" hx-swap="innerHTML"  >Commit </a></li>
+            <li><a href="#" hx-get="/editor/commit" hx-target="#output" hx-trigger="click" hx-swap="innerHTML"  >Commit </a></li>
             <li><a href="#" hx-get="/editor/settings" hx-target="#output" hx-trigger="click" hx-swap="innerHTML"  >Settings </a></li>
             <li><a href="#">Help</a></li>
           </ul>
         </div>
       </div>
     </nav>
-
   </header>
-
   <div>
-    <div class="row">
+    <div class="row" id="gn-editor">
       <section class="col-sm-6" id="editor" style="height:100vh">
       </section>
       <section class="col-sm-6">
@@ -47,14 +47,18 @@
 {% block js %}
 <script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>
 
+<!-- Javascripts -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
+
 <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jquery-ui/jquery-ui.min.js') }}"></script>
 
 <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='htmx.min.js') }}"></script>
 
-
+<script src="https://cdn.jsdelivr.net/npm/diff@5.1.0/dist/diff.min.js"></script>
 <script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/marked-highlight/lib/index.umd.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>
 <script type="text/javascript">
 
   document.addEventListener('DOMContentLoaded', function() {
@@ -93,12 +97,12 @@
           scrollPastEnd: 0, // number -> !maxLines: if positive, user can scroll pass the last line and go n * editorHeight more distance
           fixedWidthGutter: false, // boolean: true if the gutter should be fixed width
           theme: "ace/theme/dracula", // theme string from ace/theme or custom?
-	  scrollSpeed: 2, // number: the scroll speed index
-          dragDelay: 0, 
+          scrollSpeed: 2, // number: the scroll speed index
+          dragDelay: 0,
           dragEnabled: true, // boolean: enable dragging
           focusTimout: 0, // number: the focus delay before focus starts.
           tooltipFollowsMouse: true, // boolean: true if the gutter tooltip should follow mouse
-                 // session options
+          // session options
           firstLineNumber: 1, // number: the line number in first line
           overwrite: false, // boolean
           newLineMode: 'auto', // "auto" | "unix" | "windows"
@@ -106,60 +110,66 @@
           useSoftTabs: true, // boolean: true if we want to use spaces than tabs
           tabSize: 4, // number
           wrap: true, // boolean | string | number: true/'free' means wrap instead of horizontal scroll, false/'off' means horizontal scroll instead of wrap, and number means number of column before wrap. -1 means wrap at print margin
-	  
+
           indentedSoftWrap: true, // boolean
           foldStyle: 'markbegin', // enum: 'manual'/'markbegin'/'markbeginend'.
           mode: 'ace/mode/markdown'
 
-    }
-    let hash = {{ hash|tojson }} 
-    let filePath = {{ file_path|tojson }}
-    localStorage.setItem("gn_editor_sha" ,hash)
-     document.querySelector("#output").addEventListener("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}})
-          })
-
-          document.querySelector("#output").addEventListener("updateEditor", function(event){
-              editor.setOptions({
-                  ...editor_configurations,
-                  ...event.detail.payload
-              })
-              editor.renderer.updateFull();
+      }
+      let hash = {{ hash|tojson }}
+      let filePath = {{ file_path|tojson }}
+      localStorage.setItem("gn_editor_sha" ,hash)
+      document.querySelector("#output").addEventListener("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())
+          var diffHtml = Diff2Html.html(diffContent, {
+              drawFileList: true,
+              matching: 'lines',
+              outputFormat: 'line-by-line',
+          });
+          htmx.find("#output").innerHTML = diffHtml
+      })
+
+
+      document.querySelector("#output").addEventListener("updateEditor", function(event){
+          editor.setOptions({
+              ...editor_configurations,
+              ...event.detail.payload
           })
-
-          var editor = ace.edit("editor");
-          editor.setOptions(editor_configurations);
-          editor.container.style.resize = "horizontal";
-          function updatePreview(){
-              const {markedHighlight} = globalThis.markedHighlight;
-              let new_marked = new marked.Marked(
-                  markedHighlight({
-                      langPrefix: 'hljs language-',
-                      highlight(code, lang) {
-                          const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-                          return hljs.highlight(code, { language }).value;
-                      }}));
-              new_marked.use({
-                  pedantic: false,
-                  gfm: true,
-              });
-
-              previewContent = document.querySelector("#output");
-              var markdownContent = editor.getValue();
-              var htmlContent = new_marked.parse(markdownContent)
-	      console.log(htmlContent)
-              previewContent.innerHTML = htmlContent;
-          }
-
+          editor.renderer.updateFull();
+      })
+      var editor = ace.edit("editor");
+      editor.setOptions(editor_configurations);
+      editor.container.style.resize = "horizontal";
+      function updatePreview(){
+          const {markedHighlight} = globalThis.markedHighlight;
+          let new_marked = new marked.Marked(
+              markedHighlight({
+                  langPrefix: 'hljs language-',
+                  highlight(code, lang) {
+                      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+                      return hljs.highlight(code, { language }).value;
+                  }}));
+          new_marked.use({
+              pedantic: false,
+              gfm: true,
+          });
+          previewContent = document.querySelector("#output");
+          var markdownContent = editor.getValue();
+          var htmlContent = new_marked.parse(markdownContent)    //work on error handling for invalid markdown
+          previewContent.innerHTML = htmlContent;
+      }
       editor.getSession().on("change", function(e){
-              updatePreview()
-          })
-      //do the fetch here
+          updatePreview()
+      })
       var data = {{ content|tojson }}
       editor.setValue(data, -1);
-    
 
-      });
+  });
 
 
 </script>
diff --git a/gn2/wqflask/templates/gn_editor_commit.html b/gn2/wqflask/templates/gn_editor_commit.html
index 0ea20adb..8fd1547b 100644
--- a/gn2/wqflask/templates/gn_editor_commit.html
+++ b/gn2/wqflask/templates/gn_editor_commit.html
@@ -9,41 +9,50 @@
     <div>
       <div class="row">
         <label class="col-sm-4" for="message"> <i>*Commit Message*</i></label>
-
       </div>
       <br>
       <div class="row">
         <textarea rows="12" class="col-sm-12" name="message" required id="commit-message">
         </textarea>
-
       </div>
     </div>
     <br>
     <br>
     <div class="row">
       <button id="btn-commit"
-	       class="btn btn-primary col-sm-2 col-sm-offset-1">
+              class="btn btn-primary col-sm-2 col-sm-offset-1">
         Commit
       </button>
+      <button id="btn-diff"
+              class="btn  col-sm-2 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 != ""){
-	  //fire custom event here re
-	  htmx.find("#output").dispatchEvent(
-          new CustomEvent("commitEvent", {
+          htmx.find("#output").dispatchEvent(
+              new CustomEvent("commitEvent", {
+                  bubbles: true,
+                  detail: {action: 'didInitialize', payload: msg},
+              }),
+          );
+      }
+  })
+  htmx.on("#btn-diff", "click", function(event){
+      htmx.find("#output").dispatchEvent(
+          new CustomEvent("diffEvent", {
               bubbles: true,
-              detail: {action: 'didInitialize', payload: msg},
+              detail: {},
           }),
       );
-      }
   })
 </script>
 {% endblock %}
diff --git a/gn2/wqflask/templates/gn_editor_results_page.html b/gn2/wqflask/templates/gn_editor_results_page.html
index 8cfa35dc..d502e882 100644
--- a/gn2/wqflask/templates/gn_editor_results_page.html
+++ b/gn2/wqflask/templates/gn_editor_results_page.html
@@ -11,30 +11,29 @@
     <h3>Error-message:
       <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{msg}}</i></b></mark></h3>
     {% else %}
-      <div>
-	<h3>New Commit Sha: <span class="lead">
-	    <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{commit_sha}}</i></b></mark>
-	</span></h3>
-         <br/>
-	<div class="lead"> <h3>Commit Message:
-	        <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{message}}</i></b></mark>
-	  </h3>
-	  
-	</div>
+    <div>
+      <h3>New Commit Sha: <span class="lead">
+          <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{commit_sha}}</i></b></mark>
+      </span></h3>
+      <br/>
+      <div class="lead"> <h3>Commit Message:
+          <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{message}}</i></b></mark>
+        </h3>
+
+      </div>
     </div>
     {% endif %}
-      <br>
+    <br>
   </div>
 </section>
-      
-{% block js %}
 
+{% block js %}
 <script>
   var commitSha = "{{ commit_sha }}";
   if (commitSha !="" && commitSha!= undefined){
-      localStorage.setItem("gn_editor_sha", commitSha)      
+      localStorage.setItem("gn_editor_sha", commitSha)
   }
- 
+
 </script>
 
 {% endblock %}