Merge pull request #12 from DeepLabCut/niels/update_display

Update display to have 1 table per benchmark
DeepLabCut · Sep 13, 2024 · 1dbaa49 · 1dbaa49
2 parents 53bb905 + d139b1d
commit 1dbaa49
Show file tree

Hide file tree

Showing 25 changed files with 963 additions and 554 deletions.
diff --git a/docs/_sources/index.rst.txt b/docs/_sources/index.rst.txt
@@ -19,9 +19,29 @@ Click on columns to sort in ascending or descending order.
 Press ``Ctrl`` while selecting columns to sort by multiple columns.
 Hover over a column name to get additional explanations for the metric.
 
+TRI-MOUSE
+^^^^^^^^^
+
 .. raw:: html
-   :file: generated/table.html
+   :file: generated/tableTRI-MOUSE.html
+
+FISH
+^^^^
+
+.. raw:: html
+   :file: generated/tableFISH.html
+
+MARMOSETS
+^^^^^^^^^
 
+.. raw:: html
+   :file: generated/tableMARMOSETS.html
+
+PARENTING-MOUSE
+^^^^^^^^^^^^^^^
+
+.. raw:: html
+   :file: generated/tablePARENTING.html
 
 .. toctree::
    :maxdepth: 2

diff --git a/docs/_sources/submission.rst.txt b/docs/_sources/submission.rst.txt
@@ -65,15 +65,21 @@ These looks as follows:
             "path/to/image.png" : (
                # animal 1
                {
-                  "snout" : (0, 1),
-                  "leftear" : (2, 3),
-                  ...
+                  "pose": {
+                    "snout" : (12, 17),
+                    "leftear" : (15, 13),
+                    ...
+                  },
+                  "score": 0.9172,
                },
                # animal 2
                {
-                  "snout" : (0, 1),
-                  "leftear" : (2, 3),
-                  ...
+                  "pose": {
+                     "snout" : (27, 138),
+                     "leftear" : (23, 142),
+                     ...
+                  },
+                  "score": 0.8534,
                },
             ),
             ...

diff --git a/docs/_static/copybutton.css b/docs/_static/copybutton.css
@@ -35,7 +35,8 @@ div.highlight  {
     position: relative;
 }
 
-.highlight:hover button.copybtn {
+/* Show the copybutton */
+.highlight:hover button.copybtn, button.copybtn.success {
 	opacity: 1;
 }
 

diff --git a/docs/_static/copybutton.js b/docs/_static/copybutton.js
@@ -20,7 +20,7 @@ const messages = {
   },
   'fr' : {
     'copy': 'Copier',
-    'copy_to_clipboard': 'Copié dans le presse-papier',
+    'copy_to_clipboard': 'Copier dans le presse-papier',
     'copy_success': 'Copié !',
     'copy_failure': 'Échec de la copie',
   },
@@ -102,18 +102,25 @@ const clearSelection = () => {
   }
 }
 
-// Changes tooltip text for two seconds, then changes it back
+// Changes tooltip text for a moment, then changes it back
+// We want the timeout of our `success` class to be a bit shorter than the
+// tooltip and icon change, so that we can hide the icon before changing back.
+var timeoutIcon = 2000;
+var timeoutSuccessClass = 1500;
+
 const temporarilyChangeTooltip = (el, oldText, newText) => {
   el.setAttribute('data-tooltip', newText)
   el.classList.add('success')
-  setTimeout(() => el.setAttribute('data-tooltip', oldText), 2000)
-  setTimeout(() => el.classList.remove('success'), 2000)
+  // Remove success a little bit sooner than we change the tooltip
+  // So that we can use CSS to hide the copybutton first
+  setTimeout(() => el.classList.remove('success'), timeoutSuccessClass)
+  setTimeout(() => el.setAttribute('data-tooltip', oldText), timeoutIcon)
 }
 
 // Changes the copy button icon for two seconds, then changes it back
 const temporarilyChangeIcon = (el) => {
   el.innerHTML = iconCheck;
-  setTimeout(() => {el.innerHTML = iconCopy}, 2000)
+  setTimeout(() => {el.innerHTML = iconCopy}, timeoutIcon)
 }
 
 const addCopyButtonToCodeCells = () => {
@@ -125,7 +132,8 @@ const addCopyButtonToCodeCells = () => {
   }
 
   // Add copybuttons to all of our code cells
-  const codeCells = document.querySelectorAll('div.highlight pre')
+  const COPYBUTTON_SELECTOR = 'div.highlight pre';
+  const codeCells = document.querySelectorAll(COPYBUTTON_SELECTOR)
   codeCells.forEach((codeCell, index) => {
     const id = codeCellId(index)
     codeCell.setAttribute('id', id)
@@ -141,10 +149,25 @@ function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
+/**
+ * Removes excluded text from a Node.
+ *
+ * @param {Node} target Node to filter.
+ * @param {string} exclude CSS selector of nodes to exclude.
+ * @returns {DOMString} Text from `target` with text removed.
+ */
+function filterText(target, exclude) {
+    const clone = target.cloneNode(true);  // clone as to not modify the live DOM
+    if (exclude) {
+        // remove excluded nodes
+        clone.querySelectorAll(exclude).forEach(node => node.remove());
+    }
+    return clone.innerText;
+}
+
 // Callback when a copy button is clicked. Will be passed the node that was clicked
 // should then grab the text and replace pieces of text that shouldn't be used in output
 function formatCopyText(textContent, copybuttonPromptText, isRegexp = false, onlyCopyPromptLines = true, removePrompts = true, copyEmptyLines = true, lineContinuationChar = "", hereDocDelim = "") {
-
     var regexp;
     var match;
 
@@ -199,7 +222,12 @@ function formatCopyText(textContent, copybuttonPromptText, isRegexp = false, onl
 
 var copyTargetText = (trigger) => {
   var target = document.querySelector(trigger.attributes['data-clipboard-target'].value);
-  return formatCopyText(target.innerText, '', false, true, true, true, '', '')
+
+  // get filtered text
+  let exclude = '.linenos';
+
+  let text = filterText(target, exclude);
+  return formatCopyText(text, '', false, true, true, true, '', '')
 }
 
   // Initialize with a callback so we can modify the text before copy

diff --git a/docs/_static/copybutton_funcs.js b/docs/_static/copybutton_funcs.js
@@ -2,10 +2,25 @@ function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
+/**
+ * Removes excluded text from a Node.
+ *
+ * @param {Node} target Node to filter.
+ * @param {string} exclude CSS selector of nodes to exclude.
+ * @returns {DOMString} Text from `target` with text removed.
+ */
+export function filterText(target, exclude) {
+    const clone = target.cloneNode(true);  // clone as to not modify the live DOM
+    if (exclude) {
+        // remove excluded nodes
+        clone.querySelectorAll(exclude).forEach(node => node.remove());
+    }
+    return clone.innerText;
+}
+
 // Callback when a copy button is clicked. Will be passed the node that was clicked
 // should then grab the text and replace pieces of text that shouldn't be used in output
 export function formatCopyText(textContent, copybuttonPromptText, isRegexp = false, onlyCopyPromptLines = true, removePrompts = true, copyEmptyLines = true, lineContinuationChar = "", hereDocDelim = "") {
-
     var regexp;
     var match;
 

diff --git a/docs/_static/pygments.css b/docs/_static/pygments.css
@@ -22,6 +22,7 @@ span.linenos.special { color: #000000; background-color: #ffffc0; padding-left:
 .highlight .cs { color: #8f5902; font-style: italic } /* Comment.Special */
 .highlight .gd { color: #a40000 } /* Generic.Deleted */
 .highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
+.highlight .ges { color: #000000; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
 .highlight .gr { color: #ef2929 } /* Generic.Error */
 .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
 .highlight .gi { color: #00A000 } /* Generic.Inserted */
@@ -54,7 +55,8 @@ span.linenos.special { color: #000000; background-color: #ffffc0; padding-left:
 .highlight .nt { color: #204a87; font-weight: bold } /* Name.Tag */
 .highlight .nv { color: #000000 } /* Name.Variable */
 .highlight .ow { color: #204a87; font-weight: bold } /* Operator.Word */
-.highlight .w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
+.highlight .pm { color: #000000; font-weight: bold } /* Punctuation.Marker */
+.highlight .w { color: #f8f8f8 } /* Text.Whitespace */
 .highlight .mb { color: #0000cf; font-weight: bold } /* Literal.Number.Bin */
 .highlight .mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
 .highlight .mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */

diff --git a/docs/_static/webpack-macros.html b/docs/_static/webpack-macros.html
@@ -1,4 +1,8 @@
-<!-- these macros are generated by "yarn build:production". do not edit by hand. -->
+<!--
+  AUTO-GENERATED from webpack.config.js, do **NOT** edit by hand.
+  These are re-used in layout.html
+-->
+{# Load FontAwesome icons #}
 {% macro head_pre_icons() %}
   <link rel="stylesheet"
     href="{{ pathto('_static/vendor/fontawesome/5.13.0/css/all.min.css', 1) }}">
@@ -8,18 +12,18 @@
     href="{{ pathto('_static/vendor/fontawesome/5.13.0/webfonts/fa-brands-400.woff2', 1) }}">
 {% endmacro %}
 
-{% macro head_pre_fonts() %}
-{% endmacro %}
-
-{% macro head_pre_bootstrap() %}
-  <link href="{{ pathto('_static/css/theme.css', 1) }}" rel="stylesheet" />
-  <link href="{{ pathto('_static/css/index.c5995385ac14fb8791e8eb36b4908be2.css', 1) }}" rel="stylesheet" />
+{% macro head_pre_assets() %}
+  <!-- Loaded before other Sphinx assets -->
+  <link href="{{ pathto('_static/styles/theme.css', 1) }}?digest=1999514e3f237ded88cf" rel="stylesheet">
+<link href="{{ pathto('_static/styles/pydata-sphinx-theme.css', 1) }}?digest=1999514e3f237ded88cf" rel="stylesheet">
 {% endmacro %}
 
 {% macro head_js_preload() %}
-  <link rel="preload" as="script" href="{{ pathto('_static/js/index.1c5a1a01449ed65a7b51.js', 1) }}">
+  <!-- Pre-loaded scripts that we'll load fully later -->
+  <link rel="preload" as="script" href="{{ pathto('_static/scripts/pydata-sphinx-theme.js', 1) }}?digest=1999514e3f237ded88cf">
 {% endmacro %}
 
 {% macro body_post() %}
-  <script src="{{ pathto('_static/js/index.1c5a1a01449ed65a7b51.js', 1) }}"></script>
+  <!-- Scripts loaded after <body> so the DOM is not blocked -->
+  <script src="{{ pathto('_static/scripts/pydata-sphinx-theme.js', 1) }}?digest=1999514e3f237ded88cf"></script>
 {% endmacro %}
diff --git a/docs/about.html b/docs/about.html
@@ -4,11 +4,13 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
+
     <title>About the benchmark &#8212; DeepLabCut benchmark</title>
 
-  <link href="_static/css/theme.css" rel="stylesheet" />
-  <link href="_static/css/index.c5995385ac14fb8791e8eb36b4908be2.css" rel="stylesheet" />
+  <!-- Loaded before other Sphinx assets -->
+  <link href="_static/styles/theme.css?digest=1999514e3f237ded88cf" rel="stylesheet">
+<link href="_static/styles/pydata-sphinx-theme.css?digest=1999514e3f237ded88cf" rel="stylesheet">
 
 
   <link rel="stylesheet"
@@ -18,15 +20,11 @@
   <link rel="preload" as="font" type="font/woff2" crossorigin
     href="_static/vendor/fontawesome/5.13.0/webfonts/fa-brands-400.woff2">
 
-
-
-
-
     <link rel="stylesheet" type="text/css" href="_static/pygments.css" />
-    <link rel="stylesheet" type="text/css" href="_static/basic.css" />
     <link rel="stylesheet" type="text/css" href="_static/copybutton.css" />
 
-  <link rel="preload" as="script" href="_static/js/index.1c5a1a01449ed65a7b51.js">
+  <!-- Pre-loaded scripts that we'll load fully later -->
+  <link rel="preload" as="script" href="_static/scripts/pydata-sphinx-theme.js?digest=1999514e3f237ded88cf">
 
     <script data-url_root="./" id="documentation_options" src="_static/documentation_options.js"></script>
     <script src="_static/jquery.js"></script>
@@ -42,12 +40,21 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script>
       $(function() {
-        $("#myTable").tablesorter();
+        $("#TRI-MOUSE").tablesorter();
+      });
+      $(function() {
+        $("#MARMOSETS").tablesorter();
+      });
+      $(function() {
+        $("#PARENTING").tablesorter();
+      });
+      $(function() {
+        $("#FISH").tablesorter();
       });
     </script>
 
   </head>
-  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
+  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="60">
 
     <div class="container-fluid" id="banner"></div>
 
@@ -109,16 +116,12 @@
       <div class="navbar-end-item">
         <ul id="navbar-icon-links" class="navbar-nav" aria-label="Icon Links">
         <li class="nav-item">
-          <a class="nav-link" href="https://github.com/deeplabcut/benchmark" rel="noopener" target="_blank" title="Github">
-            <span><i class="fab fa-github"></i></span>
-            <label class="sr-only">Github</label>
-          </a>
+          <a class="nav-link" href="https://github.com/deeplabcut/benchmark" rel="noopener" target="_blank" title="Github"><span><i class="fab fa-github"></i></span>
+            <label class="sr-only">Github</label></a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="https://twitter.com/DeepLabCut" rel="noopener" target="_blank" title="Twitter">
-            <span><i class="fab fa-twitter"></i></span>
-            <label class="sr-only">Twitter</label>
-          </a>
+          <a class="nav-link" href="https://twitter.com/DeepLabCut" rel="noopener" target="_blank" title="Twitter"><span><i class="fab fa-twitter"></i></span>
+            <label class="sr-only">Twitter</label></a>
         </li>
       </ul>
       </div>
@@ -153,13 +156,13 @@
 
               <div>
 
-  <div class="section" id="about-the-benchmark">
-<h1>About the benchmark<a class="headerlink" href="#about-the-benchmark" title="Permalink to this headline">¶</a></h1>
+  <section id="about-the-benchmark">
+<h1>About the benchmark<a class="headerlink" href="#about-the-benchmark" title="Permalink to this headline">#</a></h1>
 <div class="admonition note">
 <p class="admonition-title">Note</p>
 <p>TODO</p>
 </div>
-</div>
+</section>
 
 
               </div>
@@ -171,20 +174,20 @@ <h1>About the benchmark<a class="headerlink" href="#about-the-benchmark" title="
       </div>
     </div>
 
-  <script src="_static/js/index.1c5a1a01449ed65a7b51.js"></script>
-
-  <footer class="footer mt-5 mt-md-0">
+  <!-- Scripts loaded after <body> so the DOM is not blocked -->
+  <script src="_static/scripts/pydata-sphinx-theme.js?digest=1999514e3f237ded88cf"></script>
+<footer class="footer mt-5 mt-md-0">
   <div class="container">
 
     <div class="footer-item">
       <p class="copyright">
-    &copy; Copyright 2021, DeepLabCut Developers.<br/>
+    &copy; Copyright 2021, DeepLabCut Developers.<br>
 </p>
     </div>
 
     <div class="footer-item">
       <p class="sphinx-version">
-Created using <a href="http://sphinx-doc.org/">Sphinx</a> 4.2.0.<br/>
+Created using <a href="http://sphinx-doc.org/">Sphinx</a> 4.2.0.<br>
 </p>
     </div>