Merge branch 'develop' into feat/infer-txt

Author: rongxin-liu

compare50/_renderer/static/match.css

@@ -8,10 +8,11 @@ body, h1, h4, h5 {
 
 body {
     font-family: Proxima-Nova, sans-serif;
+    overflow: hidden;
 }
 
 .wrapper {
-    margin-left: 10em;
+    margin-bottom: 3em;
 }
 
 .view {
@@ -30,7 +31,7 @@ body {
 
 .sub_name {
     margin-top: 0.33em;
-    padding-right: 0px;
+    padding-left: 10px;
 }
 
 .row {
@@ -56,7 +57,7 @@ pre {
     border-top: 0;
     max-width:100%;
     width: 100%;
-    height: 100%;
+    height: 90vh;
 }
 
 .right {
@@ -67,7 +68,7 @@ pre {
     border-top: 0;
     max-width:100%;
     width: 100%;
-    height: 100%;
+    height: 90vh;
 }
 
 .fragment:before {
@@ -115,40 +116,40 @@ pre {
 }
 
 .line {
-    line-height: 1em;
+    line-height: 1.15em;
     font-family: Consolas, monospace;
 }
 
-#sidebar {
-    padding-left: 5px;
-    padding-right: 5px;
-    margin-left: -10em;
-    left: 10em;
-    width: 10em;
+#botbar {
     position: fixed;
-    height: 100%;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5em 1em;
     z-index: 1000;
 }
 
-#next_prev_match {
-    margin-top: .4em;
+.botbar-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
 }
 
-#passes {
-    margin-top: 10%;
-    margin-bottom: 10%;
+#next_prev_match {
+    margin: 0;
 }
 
-.matches_group {
-    margin-bottom: .4em;
+#passes {
+    margin: 0;
 }
 
 .brand {
     text-align: center;
     vertical-align: middle;
-    width: 100%;
     height: 2.20em;
-    margin-top: 0.13em;
+    margin: 0;
 }
 
 a.index-link {
@@ -178,6 +179,12 @@ a.index-link:hover {
     left: 110%;
 }
 
+.sub_name {
+    display: inline-block;
+    vertical-align: top;
+    white-space: nowrap;
+}
+
 .score_tooltip:hover .tooltiptext {
     visibility: visible;
 }

compare50/_renderer/static/match.js

@@ -262,7 +262,7 @@ function init_group_button(groups, view_name) {
     document.addEventListener("keyup", (event) =>  {
         if (event.key === ' ' || event.key == "]") {
             event.preventDefault();
-            go_to_adjacent_group(event, 1); 
+            go_to_adjacent_group(event, 1);
         }
     });
 
@@ -425,12 +425,16 @@ function select_view(name) {
     select_view._cache[CURRENT_VIEW] = true;
 }
 
-
 function make_split(name) {
     return Split([`#${name}left`,`#${name}right`], {
         elementStyle: function (dimension, size, gutterSize) {
-            window.dispatchEvent(new Event('resize'));
-            return {'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'}
+            requestAnimationFrame(() => {
+                document.getElementById(`${name}left_header`).style.width =
+                    document.getElementById(`${name}left`).offsetWidth + 'px';
+                document.getElementById(`${name}right_header`).style.width =
+                    document.getElementById(`${name}right`).offsetWidth + 'px';
+            });
+            return { 'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)' };
         },
         gutterStyle: function (dimension, gutterSize) { return {'flex-basis':  gutterSize + 'px'} },
         sizes: [50, 50],
@@ -440,7 +444,6 @@ function make_split(name) {
     });
 }
 
-
 document.addEventListener("DOMContentLoaded", event => {
     let id = parseInt(document.getElementsByClassName("id")[0].id);
 

compare50/_renderer/templates/match.html

@@ -1,9 +1,7 @@
-
-
 <div id="{{name}}" class="container-fluid h-100 view {{name}}">
-    <div class="row sticky-top bg-dark text-light" id="{{name}}sub_names">
-        {% for sub in sub_a, sub_b %}
-            <div class="col-sm-6 col-2 sub_name">
+    <div class="row sticky-top bg-dark text-light">
+        {% for sub, side in (sub_a, "left"), (sub_b, "right") %}
+            <div class="sub_name" id="{{name}}{{side}}_header">
                 <h5 title="{{sub.path}}">{{sub.name}} ({{sub.percentage}}%)</h5>
             </div>
         {% endfor %}

compare50/_renderer/templates/match_page.html

@@ -11,22 +11,21 @@
     </head>
     <body>
         <div class="wrapper" id="page">
-            <nav class="bg-dark text-center" id="sidebar">
+            <nav class="bg-dark text-light" id="botbar">
                 <div class="brand text-light">
                     <h4><a href="index.html" class="index-link"><b>compare50</b></a></h4>
                 </div>
-                <br/>
-                <div class="text-light id" id="{{id}}">{{id}} / {{max_id}}</div>
-                <div class="btn-group" role="group" aria-label="NextPrev" id="next_prev_match">
-                    <button type="button" class="btn btn-outline-light prev_match" id="prev_match" {{'disabled' if id <= 1 else ''}}><<</button>
-                    <button type="button" class="btn btn-outline-light next_match" id="next_match" {{'disabled' if id >= max_id else ''}}>>></button>
-                </div>
-                <div class="btn-group-vertical" role="group" aria-label="Views" id="passes">
-                {% for pass_ in passes %}
-                    <button type="button" class="btn btn-outline-light view_selector" id="{{pass_.__name__}}selector" title="{{pass_.__doc__}}">{{pass_.__name__}}</button>
-                {% endfor %}
-                </div>
-                <div id="group_nav">
+                <div class="botbar-right">
+                    <div class="text-light id" id="{{id}}">{{id}} / {{max_id}}</div>
+                    <div class="btn-group" role="group" aria-label="NextPrev" id="next_prev_match">
+                        <button type="button" class="btn btn-outline-light prev_match" id="prev_match" {{'disabled' if id <= 1 else ''}}><<</button>
+                        <button type="button" class="btn btn-outline-light next_match" id="next_match" {{'disabled' if id >= max_id else ''}}>>></button>
+                    </div>
+                    <div class="btn-group" role="group" aria-label="Views" id="passes">
+                        {% for pass_ in passes %}
+                            <button type="button" class="btn btn-outline-light view_selector" id="{{pass_.__name__}}selector" title="{{pass_.__doc__}}">{{pass_.__name__}}</button>
+                        {% endfor %}
+                    </div>
                     <div class="btn-group" role="group" aria-label="NextPrevGroup">
                         <button type="button" class="btn btn-outline-light matches_group" id="previous_group">&lt;</button>
                         <button type="button" class="btn btn-outline-light matches_group" id="next_group">&gt;</button>

setup.py

@@ -12,7 +12,7 @@
     license="GPLv3",
     description="This is compare50, with which you can compare files for similarities.",
     long_description="This is compare50, with which you can compare files for similarities.",
-    install_requires=["attrs>=18,<21", "intervaltree>=3,<4", "lib50>=2,<4", "numpy>=1.15,<2", "pygments>=2.2,<3", "jinja2>=3,<4", "termcolor>=1.1.0,<2", "tqdm>=4.32,<5", "importlib", "names"],
+    install_requires=["attrs>=18,<21", "intervaltree>=3,<4", "lib50>=2,<4", "numpy>=2,<3", "pygments>=2.2,<3", "jinja2>=3,<4", "termcolor>=1.1.0,<2", "tqdm>=4.32,<5", "names"],
     extras_require = {
         "develop": ["sphinx", "sphinx_rtd_theme", "sphinx-autobuild", "line_profiler"]
     },