More reason details

- don't use thumbnail_url, filename for attachments (rely on settings to
  tell the root content directory)

script.js

@@ -365,6 +365,7 @@ function _mkelem(etype, child) {
 }
 
 var h3     = _mkelem.bind(this, 'h3');
+var h4     = _mkelem.bind(this, 'h4');
 var div    = _mkelem.bind(this, 'div');
 var li     = _mkelem.bind(this, 'li');
 var span   = _mkelem.bind(this, 'span');
@@ -372,78 +373,6 @@ var italic = _mkelem.bind(this, 'i');
 var bold   = _mkelem.bind(this, 'b');
 var ul     = _mkelem.bind(this, 'ul');
 
-function magnetLinkHash(m) {
-    return m.split(':').slice(-1)[0];
-}
-
-function name(r) {
-    var info_hash = magnetLinkHash(r.magnet);
-    var a = document.createElement('a');
-    a.href = window.location.origin +
-        '/' + info_hash + '?dn=' + encodeURIComponent(r.name.slice(0, 75));
-    a.addEventListener('click', aClickNav);
-    a.appendChild(text(r.name));
-
-    return a;
-}
-
-function magnet(r) {
-    var a = document.createElement('a');
-
-    a.href = r.magnet + '&dn=' + encodeURIComponent(r.name.slice(0, 75));
-    a.appendChild(text(String.fromCodePoint(129522) + ':?xt'));
-
-    return a;
-}
-
-/*
-calculateScore :: Int -> POSIXTime -> Double
-calculateScore n t = (e ** ((log maxDbl / endt) * (x - t0)) - 1) * (fromIntegral n)
-    where
-        maxDbl = 10 ** 300
-        t0 = 1572391617
-        endt = t0 + (1.577 * 10**10)
-        x = realToFrac t
-        e = exp 1
-
-inverseScore :: Double -> Integer
-inverseScore score = round $ ((log (score + 1)) / (log maxDbl / endt) + t0)
-    where
-        maxDbl = 10 ** 300
-        t0 = 1572391617
-        endt = t0 + (1.577 * 10**10)
-*/
-
-function currentScore() {
-    var t0 = 1572391617;
-    var x = Date.now() / 1000;
-    var endt = t0 + (1.577 * 10**10)
-
-    return Math.E ** ((Math.log(10 ** 300) / endt) * ((x - t0) - 1))
-}
-
-function score(r) {
-    score = Number(r.score);
-    return text((Math.log(score / CurrentScore)).toFixed(2));
-}
-
-function invertScore(score) {
-    var t0 = 1572391617;
-    var maxDbl = 10 ** 300
-    var endt = t0 + (1.577 * 10 ** 10)
-    return Math.round((Math.log(score + 1) / (Math.log(maxDbl) / endt)) + t0);
-}
-
-var TableHeadings =
-    [ ['Name', name ]
-    , ['Size', function(r) { return text(r.total_size) }]
-    , ['Files', function(r) { return text(r.filecount) }]
-    , ['', magnet]
-    , ['Score', score]
-    ];
-
-var TableHeadingNames = TableHeadings.map(function(t){ return t[0]; });
-
 function keepElements(elem_selectors) {
     var document_root = document.querySelector('main');
     document_root.innerHTML = '';
@@ -496,20 +425,18 @@ function caught(m, e) {
     alert(new Error(m + e.message));
 };
 
-function renderReasons() {
-    return span(text('This is Why'));
-}
-
 function mkSpamImgElement(img_description) {
     var img_elem = document.createElement('img');
     var mime = img_description.mimetype;
     var thumb_url;
+
     if (!img_description.thumbnail) {
         thumb_url = `/bin/?path=${GlobalVars.settings.audio_mpeg_thumbnail_path}&mimetype=image/jpeg`
     } else {
-        thumb_url = `/bin/?path=${img_description.thumbnail}&mimetype=image/jpeg`
+        thumb_url = `/bin/?path=${GlobalVars.settings.content_directory}/${img_description.md5_hash}_thumbnail.jpg&mimetype=image/jpeg`
     }
-    var image_url = `/bin/?path=${img_description.filename}&mimetype=${mime}`
+
+    var image_url = `/bin/?path=${GlobalVars.settings.content_directory}/${img_description.md5_hash}&mimetype=${mime}`
     img_elem.setAttribute('src', thumb_url);
     img_elem.setAttribute('decoding', 'async');
     img_elem.setAttribute('loading', 'lazy');
@@ -517,14 +444,26 @@ function mkSpamImgElement(img_description) {
     var a_elem = document.createElement('a');
     a_elem.setAttribute('href', image_url);
     a_elem.appendChild(img_elem);
+
     var img_container_elem = div(a_elem);
     img_container_elem.classList.add('post--image_container');
     return img_container_elem;
 }
 
+function renderNav() {
+    var nav = document.createElement('nav');
+    var a_elem = _mkelem('a', text('All Known Spam Posts'));
+    a_elem.addEventListener('click', function() {
+        changeUrl('/', null, true);
+    });
+    a_elem.setAttribute('href', '#');
+    nav.appendChild(a_elem);
+    return nav
+}
+
 function renderPostElem(post) {
     var postContainer = div();
-    postContainer.className = 'post';
+    postContainer.classList.add('post');
     var postElem = div();
     postElem.classList.add('post--body_container');
     postContainer.appendChild(postElem);
@@ -532,15 +471,62 @@ function renderPostElem(post) {
     bodyTextElem.classList.add('post--body');
     bodyTextElem.innerText = post.body;
 
+    if (post.known_spam_post_attachment) {
         post.known_spam_post_attachment.forEach(function(attachment) {
           postElem.appendChild(mkSpamImgElement(attachment));
         });
+    }
 
     postElem.appendChild(bodyTextElem);
 
     return postContainer;
 }
 
+function renderKnownSpamAttachments(attachments) {
+    var container = div();
+    container.classList.add('attachment');
+    attachments.forEach(function(a) {
+        container.appendChild(mkSpamImgElement(a));
+    });
+    return container;
+}
+
+function renderReasons(post) {
+    var container = div(h3(text('Reasons for being considered spam:')));
+    container.appendChild(renderReasonsUl(post));
+    var reasonDetails = post.reason_details;
+
+    if (reasonDetails) {
+        var reasonDetailsContainer = div();
+        reasonDetailsContainer.className = 'reason-details';
+
+        if (reasonDetails.frequent_attachment_details) {
+            var attachmentList = ul();
+            reasonDetails.frequent_attachment_details.forEach(function (attachment) {
+                attachmentList.appendChild(li(text(attachment.filename)));
+            });
+            reasonDetailsContainer.appendChild(h4(text('Previously posted matching attachments:')));
+            reasonDetailsContainer.appendChild(div(attachmentList));
+        }
+
+        if (reasonDetails.frequent_text_details) {
+            var textPosts = div();
+
+            reasonDetails.frequent_text_details.forEach(function(post) {
+                textPosts.appendChild(renderPostElem(post));
+            });
+
+            reasonDetailsContainer.appendChild(h4(text('Previously posted matching text:')));
+            reasonDetailsContainer.appendChild(textPosts);
+        }
+
+        container.appendChild(h3(text('Reason Details:')));
+        container.appendChild(reasonDetailsContainer);
+    }
+
+    return container;
+}
+
 var REASONS = {
   RECENTLY_POSTED_ATTACHMENT_ABOVE_RATE: 1 << 0,
   LEXICAL_ANALYSIS_SHOWS_NONSENSE:       1 << 1,
@@ -564,18 +550,22 @@ function reasonsFromBitmap(n) {
   return reasons;
 }
 
-function renderOverviewPost(post) {
+function renderReasonsUl(post){
-    var postContainer = renderPostElem(post);
     var reasons = ul();
     reasonsFromBitmap(post.reason).forEach(function(r) {
         reasons.appendChild(li(text(r)));
     });
+    return reasons;
+}
+
+function renderOverviewPost(post) {
+    var postContainer = renderPostElem(post);
     postContainer.appendChild(h3(text('Reasons:')));
-    postContainer.appendChild(div(reasons));
+    postContainer.appendChild(div(renderReasonsUl(post)));
     return postContainer;
 }
 
-function loadKnownSpamImages() {
+function loadKnownSpamPosts() {
     pageInfoText.innerText = 'Loading known spam post';
     cancelGlobalEvts();
 
@@ -593,6 +583,7 @@ function loadKnownSpamImages() {
             pageInfoText.innerText = 'Have these known spam posts:';
             var mainElem = document.querySelector('main');
             mainElem.innerHTML = '';
+
             json.forEach(function (post) {
                 var postElem = renderOverviewPost(post);
 
@@ -704,7 +695,7 @@ function changeUrl(path, search_query, push_state) {
 
 function handlePageRoot(_, query_params) {
     console.log("handlePageRoot", query_params);
-    return loadKnownSpamImages();
+    return loadKnownSpamPosts();
 }
 
 function showSpamPost(path_data, _) {
@@ -724,6 +715,7 @@ function showSpamPost(path_data, _) {
 
     var mainElem = document.querySelector('main');
     mainElem.innerHTML = '';
+    mainElem.appendChild(renderNav());
     mainElem.appendChild(postSectionElem);
 
     var h2 = document.createElement('h2');
@@ -734,6 +726,9 @@ function showSpamPost(path_data, _) {
     var knownSpamAttachmentsSectionElem = document.createElement('section');
     mainElem.append(knownSpamAttachmentsSectionElem);
 
+    var reasonsSectionElem = document.createElement('section');
+    mainElem.appendChild(reasonsSectionElem);
+
     get(url, cancel, headers)
         .then(function(response) {
             var json = JSON.parse(response);
@@ -743,6 +738,7 @@ function showSpamPost(path_data, _) {
             json.forEach(function(p) {
                 var postElem = renderPostElem(p);
                 postSectionElem.appendChild(postElem);
+                reasonsSectionElem.appendChild(renderReasons(p))
             });
 
         })
@@ -756,6 +752,8 @@ function showSpamPost(path_data, _) {
         .then(function(response) {
             var json = JSON.parse(response);
             console.log("known spam attachments:", json);
+            knownSpamAttachmentsSectionElem
+                .appendChild(renderKnownSpamAttachments(json));
         })
         .catch(caught.bind(this, "Failed to load known spam attachments. Reason:"));
 

settings.json

@@ -1,5 +1,7 @@
 {
+  "postgrest_url": "http://192.168.4.147:3000",
   "postgrest_url": "http://localhost:3000",
   "jwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoic3BhbV9ub3RpY2VyIn0.j6-6HSBh-Wf5eQovT9cF1ZCNuxkQOqzBFtE3C8aTG3A",
-  "audio_mpeg_thumbnail_path": "/etc/SpamNoticer/static/mpg.png"
+  "audio_mpeg_thumbnail_path": "/etc/SpamNoticer/static/mpg.png",
+  "content_directory": "/var/www/spam"
 }

style.css

@@ -23,6 +23,7 @@ header {
     margin-right: 1em;
 }
 
-.post--body_container {
+.post--body_container,
+.attachment {
   display: flow-root;
 }