From cd8274066284699212c8db652ab875339c808b40 Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Thu, 21 Jul 2022 13:51:22 +0100
Subject: [PATCH] Improve UI usability

---
 core/api/views/threshold.py      |  1 +
 core/static/chart.js             |  2 +
 core/templates/modals/info.html  |  8 ++--
 core/templates/ui/drilldown.html |  1 +
 core/templates/ui/results.html   | 72 +++++++++++++++++++++++++-------
 5 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/core/api/views/threshold.py b/core/api/views/threshold.py
index 03a8612..68681f7 100644
--- a/core/api/views/threshold.py
+++ b/core/api/views/threshold.py
@@ -96,6 +96,7 @@ class ThresholdInfoModal(LoginRequiredMixin, APIView):
         else:
             inter_chans = []
         context = {
+            "net": net,
             "nick": nick,
             "channel": channel,
             "chans": channels,
diff --git a/core/static/chart.js b/core/static/chart.js
index ee10484..df45866 100644
--- a/core/static/chart.js
+++ b/core/static/chart.js
@@ -21,6 +21,8 @@ new Chart(ctx, {
     ],
   },
   options: {
+    responsive: true,
+    maintainAspectRatio: false,
     parsing: {
       xAxisKey: 'date',
       yAxisKey: 'value',
diff --git a/core/templates/modals/info.html b/core/templates/modals/info.html
index f0ad2f0..a5d5224 100644
--- a/core/templates/modals/info.html
+++ b/core/templates/modals/info.html
@@ -60,7 +60,7 @@
       </div>
       <div id="tab-content">
         <div class="is-active" data-content="1">
-          <h4 class="subtitle is-4">Channels {{ nick }} is on</h4>
+          <h4 class="subtitle is-4">Channels for {{ nick }} on {{ net }}</h4>
           {% for channel in chans %}
             <a class="panel-block">
               <span class="panel-icon">
@@ -71,7 +71,7 @@
           {% endfor %}
         </div>
         <div data-content="2">
-          <h4 class="subtitle is-4">Users on {{ channel }}</h4>
+          <h4 class="subtitle is-4">Users on {{ channel }} for {{ net }}</h4>
           {% for user in users %}
             <a class="panel-block">
               <span class="panel-icon">
@@ -82,7 +82,7 @@
           {% endfor %}
         </div>
         <div data-content="3">
-          <h4 class="subtitle is-4">Users sharing channels with {{ nick }}</h4>
+          <h4 class="subtitle is-4">Users sharing channels with {{ nick }} on {{ net }}</h4>
           {% for user in inter_users %}
             <a class="panel-block">
               <span class="panel-icon">
@@ -93,7 +93,7 @@
           {% endfor %}
         </div>
         <div data-content="4">
-          <h4 class="subtitle is-4">Channels sharing users with {{ channel }}</h4>
+          <h4 class="subtitle is-4">Channels sharing users with {{ channel }} on {{ net }}</h4>
           {% for channel in inter_chans %}
             <a class="panel-block">
               <span class="panel-icon">
diff --git a/core/templates/ui/drilldown.html b/core/templates/ui/drilldown.html
index 7149b9e..a4f3f21 100644
--- a/core/templates/ui/drilldown.html
+++ b/core/templates/ui/drilldown.html
@@ -3,6 +3,7 @@
 {% block content %}
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script>
+    // tabbed browsing for the modal
     function initTabs() {
     TABS.forEach((tab) => {
       tab.addEventListener('click', (e) => {
diff --git a/core/templates/ui/results.html b/core/templates/ui/results.html
index 140322d..a3c353a 100644
--- a/core/templates/ui/results.html
+++ b/core/templates/ui/results.html
@@ -5,20 +5,18 @@
     <div style="display: none" id="jsonData" data-json="{{ data }}">
     </div>
     <div class="box">
-      <canvas id="volume"></canvas>
+      <div style="height: 30rem">
+        <canvas id="volume"></canvas>
+      </div>
       <script src="{% static 'chart.js' %}"></script>
     </div>
     <div class="box">
-      <span class="tag is-success">Online</span>
-      <span class="tag is-danger">Offline</span>
-      <span class="tag is-warning">Unknown</span>
-      IRC: <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
-      Discord: <i class="fa-brands fa-discord" aria-hidden="true"></i>
       <div class="table-container">
         <table class="table is-striped is-hoverable is-fullwidth">
           <thead>
             <tr>
               <th>src</th>
+              <th>type</th>
               <th>ts</th>
               <th>msg</th>
               <th>host</th>
@@ -28,15 +26,51 @@
               <th>net</th>
             </tr>
           </thead>
-
           <tbody>
             {% for item in results %}
               <tr>
                 <td>
                   {% if item.src == 'irc' %}
-                    <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
+                    <span class="icon" data-tooltip="IRC">
+                      <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
+                    </span>
                   {% elif item.src == 'dis' %}
-                    <i class="fa-brands fa-discord" aria-hidden="true"></i>
+                    <span class="icon" data-tooltip="Discord">
+                      <i class="fa-brands fa-discord" aria-hidden="true"></i>
+                    </span>
+                  {% endif %}
+                </td>
+                <td>
+                  {% if item.type == 'msg' %}
+                    <span class="icon" data-tooltip="Message">
+                      <i class="fa-solid fa-message"></i>
+                    </span>
+                  {% elif item.type == 'join' %}
+                    <span class="icon" data-tooltip="Join">
+                      <i class="fa-solid fa-person-to-portal"></i>
+                    </span>
+                  {% elif item.type == 'part' %}
+                    <span class="icon" data-tooltip="Part">
+                      <i class="fa-solid fa-person-from-portal"></i>
+                    </span>
+                  {% elif item.type == 'quit' %}
+                    <span class="icon" data-tooltip="Quit">
+                      <i class="fa-solid fa-circle-xmark"></i>
+                    </span>
+                  {% elif item.type == 'kick' %}
+                    <span class="icon" data-tooltip="Kick">
+                      <i class="fa-solid fa-user-slash"></i>
+                    </span>
+                  {% elif item.type == 'nick' %}
+                    <span class="icon" data-tooltip="Nick">
+                      <i class="fa-solid fa-signature"></i>
+                    </span>
+                  {% elif item.type == 'mode' %}
+                    <span class="icon" data-tooltip="Mode">
+                      <i class="fa-solid fa-gear"></i>
+                    </span>
+                  {% else %}
+                    {{ item.type }}
                   {% endif %}
                 </td>
                 <td>
@@ -47,11 +81,20 @@
                 <td>{{ item.host }}</td>
                 <td>
                   {% if item.online is True %}
-                    <span class="tag is-success">{{ item.nick }}</span>
+                    <span class="icon has-text-success has-tooltip-success" data-tooltip="Online">
+                      <i class="fa-solid fa-circle"></i>
+                    </span>
+                    {{ item.nick }}
                   {% elif item.online is False %}
-                    <span class="tag is-danger">{{ item.nick }}</span>
+                    <span class="icon has-text-danger has-tooltip-danger" data-tooltip="Offline">
+                      <i class="fa-solid fa-circle"></i>
+                    </span>
+                    {{ item.nick }}
                   {% else %}
-                    <span class="tag is-warning">{{ item.nick }}</span>
+                    <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
+                      <i class="fa-solid fa-circle"></i>
+                    </span>
+                    {{ item.nick }}
                   {% endif %}
                 </td>
                 <td>
@@ -62,9 +105,8 @@
                       hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}", "channel": "{{ item.channel }}"}'
                       hx-target="#modals-here" 
                       hx-trigger="click"
-                      class="btn btn-primary"
-                      _="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">
-                        Information
+                      class="btn btn-primary">
+                      Information
                     </button>
                     <div id="modals-here"></div>
                   {% endif %}