[analyzer] minor fixes

OneDeadKey · Nov 25, 2024 · fabe90c · fabe90c
1 parent 280c8d8
commit fabe90c
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 37 deletions.
diff --git a/kalamine/server.py b/kalamine/server.py
@@ -1,6 +1,7 @@
 import threading
 import webbrowser
 from http.server import HTTPServer, SimpleHTTPRequestHandler
+from importlib import metadata
 from pathlib import Path
 from xml.etree import ElementTree as ET
 
@@ -40,6 +41,10 @@ def main_page(layout: KeyboardLayout, angle_mod: bool = False) -> str:
                 <script>angle_mod = {"true" if angle_mod else "false"}; </script>
             </head>
             <body>
+                <p style="float: right; text-align: right;">
+                    <a href="https://github.com/OneDeadKey/kalamine">kalamine</a>
+                    v{metadata.version('kalamine')}<br>🦆
+                </p>
                 <dl>
                     <dt>Name</dt>
                     <dd>{layout_ref}</dd>
@@ -151,6 +156,11 @@ class LayoutHandler(SimpleHTTPRequestHandler):
         def __init__(self, *args, **kwargs) -> None:  # type: ignore
             kwargs["directory"] = str(Path(__file__).parent / "www")
             super().__init__(*args, **kwargs)
+            self.extensions_map = {
+                    "json": "application/json",
+                    "css": "text/css",
+                    "js": "text/javascript",
+            }
 
         def do_GET(self) -> None:
             self.send_response(200)

diff --git a/kalamine/www/demo.js b/kalamine/www/demo.js
@@ -3,7 +3,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
   const keyboard = document.querySelector('x-keyboard');
   const input    = document.querySelector('input');
-  const geometry = document.querySelector('select');
+  const geometry = document.querySelector('#geometry');
 
   if (!keyboard.layout) {
     console.warn('web components are not supported');

diff --git a/kalamine/www/mjs/layout-analyzer.js b/kalamine/www/mjs/layout-analyzer.js
@@ -1,6 +1,6 @@
   const substituteChars = {
-    '\u00a0': ' ', // ( ) no-break space
-    '\u202f': ' ', // ( ) narrow no-break space
+    '\u00a0': ' ', // no-break space
+    '\u202f': ' ', // narrow no-break space
 
     '\u00ab': '"', // («) left-pointing double angle quotation mark
     '\u00bb': '"', // (») right-pointing double angle quotation mark
@@ -268,8 +268,8 @@ export function analyzeKeyboardLayout(
     };
 
     const isScissor = (kc1, kc2, finger1, finger2) => {
-      var finger1Height = getKeyRow(kc1);
-      var finger2Height = getKeyRow(kc2);
+      let finger1Height = getKeyRow(kc1);
+      let finger2Height = getKeyRow(kc2);
 
       switch (finger1.at(1) + finger2.at(1)) {
         case '45':

diff --git a/kalamine/www/mjs/stats-table.js b/kalamine/www/mjs/stats-table.js
@@ -9,12 +9,12 @@ class StatsTable extends HTMLElement {
     super();
     const shadow = this.attachShadow({ mode: 'open' });
 
-    // Stupid hack to get the height of a 'tr' element
+    // Stupid hack to get the height of a 'tr' element (XXX not working)
     const tableRowElement = document.createElement('tr');
     tableRowElement.innerHTML = 'random placeholder text';
     shadow.appendChild(tableRowElement);
     this.maxHeightCollapsed =
-      this.maxLinesCollapsed * tableRowElement.offsetHeight;
+      Math.max(180, this.maxLinesCollapsed * tableRowElement.offsetHeight);
 
     // Actually build the content of the element (+ remove the stupid tr)
     shadow.innerHTML = `
@@ -48,13 +48,11 @@ class StatsTable extends HTMLElement {
         cursor: pointer;
         clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
       }
-      button.showLess {
+      .showLess + button {
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
       }
       </style>
 
-      <!-- Using a style attribute on top of the stylesheet, as it is used by
-           the button 'click' event-listner -->
       <div id='wrapper' style='max-height: ${this.maxHeightCollapsed}px;'></div>
       <button style='display: none'></button>
     `;
@@ -64,17 +62,11 @@ class StatsTable extends HTMLElement {
     this.innerHTML = ''; // Remove original content
 
     // Setting up the `see more` button
-    // Using 'function' to set 'this' to the button (self is the web component)
-    const self = this;
-    shadow.querySelector('button').addEventListener('click', function () {
-      const wrapper = shadow.getElementById('wrapper');
-      if (wrapper.style.maxHeight == `${self.maxHeightCollapsed}px`) {
-        wrapper.style.maxHeight = `${wrapper.children[0].offsetHeight}px`;
-        this.className = 'showLess';
-      } else {
-        wrapper.style.maxHeight = `${self.maxHeightCollapsed}px`;
-        this.className = '';
-      }
+    shadow.querySelector('button').addEventListener('click', () => {
+      wrapper.style.maxHeight = wrapper.className === ''
+        ? `${wrapper.children[0].offsetHeight}px`
+        : `${this.maxHeightCollapsed}px`;
+      wrapper.classList.toggle('showLess');
     });
   }
 
@@ -84,7 +76,7 @@ class StatsTable extends HTMLElement {
     table.innerHTML =
       `<tr><th colspan='2'>${table.title}</td></tr>` +
       Object.entries(values)
-        .filter(([digram, freq]) => freq >= 10 ** -precision)
+        .filter(([_, freq]) => freq >= 10 ** -precision)
         .sort(([_, freq1], [__, freq2]) => freq2 - freq1)
         .map(
           ([digram, freq]) =>

diff --git a/kalamine/www/mjs/stats.js b/kalamine/www/mjs/stats.js
@@ -1,14 +1,8 @@
-import { getSupportedChars, analyzeKeyboardLayout } from './layout-analyzer.js';
+import { analyzeKeyboardLayout } from './layout-analyzer.js';
 
 window.addEventListener('DOMContentLoaded', () => {
-  const inputField = document.querySelector('input');
-  const keyboard   = document.querySelector('x-keyboard');
-
-  const headingColor = 'rgb(127, 127, 127)'; // getComputedStyle(document.querySelector('h3')).color;
-
+  const keyboard = document.querySelector('x-keyboard');
   let corpus = {};
-  let keyChars = {};
-  let impreciseData = false;
 
   // display a percentage value
   const fmtPercent = (num, p) => `${Math.round(10 ** p * num) / 10 ** p}%`;
@@ -57,10 +51,7 @@ window.addEventListener('DOMContentLoaded', () => {
   };
 
   const showReport = () => {
-    keyChars = getSupportedChars(keyboard.layout.keyMap, keyboard.layout.deadKeys);
-    const report = analyzeKeyboardLayout(keyboard, corpus, keyChars, headingColor);
-    console.log(corpus);
-    console.log(report);
+    const report = analyzeKeyboardLayout(keyboard, corpus);
 
     document.querySelector('#sfu stats-canvas').renderData({
       values: report.totalSfuSkuPerFinger,
@@ -82,7 +73,7 @@ window.addEventListener('DOMContentLoaded', () => {
     showPercentAll('#load small', report.loadGroups.map(sumUpBarGroup), 1);
     showPercent('#unsupported-all', report.totalUnsupportedChars, 3);
 
-    document.querySelector('#imprecise-data').hidden = !impreciseData;
+    document.querySelector('#imprecise-data').hidden = !report.impreciseData;
 
     document
       .querySelector('#bottlenecks stats-table')
@@ -94,11 +85,16 @@ window.addEventListener('DOMContentLoaded', () => {
   document
     .getElementById('corpus')
     .addEventListener('change', event => {
-      fetch(`corpus/${event.target.value}.json`)
+      const corpusName = event.target.value;
+      const noCorpus = (corpusName === '-');
+      document.getElementById('analyzer').hidden = noCorpus;
+      if (noCorpus) {
+        return;
+      }
+      fetch(`corpus/${corpusName}.json`)
         .then(response => response.json())
         .then(data => {
           corpus = data;
-          document.getElementById('analyzer').hidden = false;
           showReport();
         });
     });

diff --git a/kalamine/www/style.css b/kalamine/www/style.css
@@ -52,6 +52,10 @@ select {
     text-wrap: balance;
 }
 
+#analyzer {
+    padding-bottom: 2em;
+}
+
 h2 {
     border-bottom: 1px dotted currentcolor;
 }