[hma] Match debug page is more implemented

hasher-matcher-actioner/src/OpenMediaMatch/static/js/autoreload.js

@@ -1,6 +1,8 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
 // Reload the page automagically 
-setTimeout(function(){
+setTimeout(function () {
     window.location.reload();
- }, 
- 240000  // 4 min in ms
- );
+},
+    240000  // 4 min in ms
+);

hasher-matcher-actioner/src/OpenMediaMatch/static/js/main.js

@@ -0,0 +1,3 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+var OMM = OMM || {};

hasher-matcher-actioner/src/OpenMediaMatch/static/js/match_dbg.js

@@ -0,0 +1,63 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+var OMM = OMM || {};
+
+OMM.match_dbg = {
+    onFileChange: (id) => {
+        const form = document.getElementById(id + "-file-upload");
+        const container = document.getElementById(id + "-img");
+        const dest_div = document.getElementById(id + "-signals");
+
+        if (!('files' in form) || form.files.length !== 1) {
+            return;
+        }
+        dest_div.replaceChildren([]);
+        const formData = new FormData();
+        const file = form.files[0];
+        formData.append("photo", file);
+
+        const reader = new FileReader();
+        reader.onload = () => {
+            const imgUrl = reader.result;
+            const img = new Image();
+            img.src = imgUrl;
+            img.style = "max-width: 180px; max-height: 180px;"
+            container.replaceChildren(img);
+        };
+        reader.readAsDataURL(file);
+
+        fetch('/h/hash', {
+            method: 'POST',
+            body: formData
+        })
+            .then(response => response.json())
+            .then(data => {
+                // Handle the response from the server here
+                OMM.match_dbg.renderHashResult(id, data);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+    },
+    renderHashResult: (id, result) => {
+        const dest_div = document.getElementById(id + "-signals");
+
+        const signalList = Object.entries(result).map(([signal_type, val]) => {
+            const text = `${signal_type}: ${val}`;
+            return `<li><div class="text-truncate" style="cursor: pointer;" data-toggle="tooltip" title="copy to clipboard ${val}" onclick="navigator.clipboard.writeText('${val}')">
+            ${text}
+          </div></li>`
+
+        }).join('');
+        const signalHTML = `
+              <h4>Signal Types</h4>
+              <ul>${signalList}</ul>
+          `;
+        dest_div.innerHTML = signalHTML;
+    },
+    copyHash: (id, hash_text) => {
+        const src = document.getElementById(id);
+        navigator.clipboard.writeText(hash_text)
+        src.toolti
+    },
+};

hasher-matcher-actioner/src/OpenMediaMatch/templates/bootstrap.html.j2

@@ -19,7 +19,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
         crossorigin="anonymous"></script>
-    <script src="{{ url_for('static', filename='js/autoreload.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
 </body>
 
 </html>

hasher-matcher-actioner/src/OpenMediaMatch/templates/components/match_dbg_upload.html.j2

@@ -1,6 +1,6 @@
 <div class="card text-dark bg-light box-shadow h-md-250 h-100 mx-auto">
     <div class="row align-items-center m-2">
-        <div class="col">
+        <div class="col" id="{{ upload_id }}-img">
             <svg class="bd-placeholder-img card-img-top" width="180" height="180" xmlns="http://www.w3.org/2000/svg"
                 role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
                 <title>Placeholder</title>
@@ -10,15 +10,11 @@
             </svg>
         </div>
         <div class="col align-items-center">
-            <input class="form-control" type="file">
+            <input class="form-control" type="file" onchange="OMM.match_dbg.onFileChange('{{ upload_id }}')"
+                id="{{ upload_id }}-file-upload">
         </div>
     </div>
 
-    <div class="card-body d-flex flex-column align-items-mid">
-        <h4>Signal Types</h4>
-        <ul>
-            <li>PDQ: 12354</li>
-            <li>MD5: 12354</li>
-        </ul>
+    <div class="card-body d-flex flex-column align-items-mid" id="{{ upload_id }}-signals">
     </div>
 </div>

hasher-matcher-actioner/src/OpenMediaMatch/templates/pages/match_dbg.html.j2

@@ -5,18 +5,30 @@
     </div>
     <div class="row justify-content-center gx-5">
         <div class="col-6">
+            {% with upload_id="match_dbg_left" %}
             {% include "components/match_dbg_upload.html.j2" %}
+            {% endwith %}
         </div>
         <div class="col-6">
+            {% with upload_id="match_dbg_right" %}
             {% include "components/match_dbg_upload.html.j2" %}
+            {% endwith %}
         </div>
     </div>
-    <div class="container my-2 text-center">
-        <h4>Match Results:</h4>
-        <ul>
-            <li>Verdict: Match</li>
-            <li>PDQ: 31</li>
-            <li>md5: 0</li>
-        </ul>
+    <div class="container my-2" hidden> {# TODO: implement the rest #}
+        <div class="row justify-content-center">
+            <div class="col-4">
+                <div class="card p-4">
+                    <h4 class="card-title text-center">Match Results</h4>
+                    <ul>
+                        <li>Verdict: Match</li>
+                        <li>PDQ: 31</li>
+                        <li>md5: 0</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
     </div>
-</div>
+</div>
+
+<script src="{{ url_for('static', filename='js/match_dbg.js') }}"></script>