From 65ce8e04505536e61b412efd11aef04b2a2c4094 Mon Sep 17 00:00:00 2001
From: Demurest <eric.apolonio@hotmail.com>
Date: Thu, 7 Nov 2024 16:03:49 -0300
Subject: [PATCH 1/3] chartjs time problem fix

---
 .../src/probability_api/static/probability.js | 44 ++++++++++++++-----
 .../probability_api/templates/prob.html.jinja | 22 ++++++++--
 2 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/lightcurve/src/probability_api/static/probability.js b/lightcurve/src/probability_api/static/probability.js
index fa5875fe9..90eff28f4 100644
--- a/lightcurve/src/probability_api/static/probability.js
+++ b/lightcurve/src/probability_api/static/probability.js
@@ -1,5 +1,4 @@
 let probability_data_aux
-let mychart
 
 let data = {
     labels: [],
@@ -101,10 +100,11 @@ export function init(){
 
     reverseData(raw_tax)
 
+
+    let mychart = new Chart(ctx, config);
     probability_data_aux = []
-    mychart = new Chart(ctx, config);
 
-    updateMyChart(initial_value, raw_tax, raw_group_prob_dict)
+    updateMyChart(mychart, initial_value, raw_tax, raw_group_prob_dict)
 
     custom_select.addEventListener('click', () => {
         custom_select.querySelector('.select').classList.toggle('open');
@@ -117,7 +117,7 @@ export function init(){
                 option.classList.add('selected');
                 option.closest('.select').querySelector('.select__trigger span').textContent = option.textContent;
 
-                updateMyChart(option.getAttribute("data-value"), raw_tax, raw_group_prob_dict)
+                updateMyChart(mychart, option.getAttribute("data-value"), raw_tax, raw_group_prob_dict)
             }
         })
     }
@@ -161,7 +161,7 @@ function getScale(max_value){
     return (max_value/3)
 }
 
-function updateMyChart(classifier_name, raw_tax, raw_group_prob_dict){
+function updateMyChart(mychart, classifier_name, raw_tax, raw_group_prob_dict){
     let max_value
     let classes_arr = raw_tax[classifier_name].classes
     let classifier_data = Object.values(raw_group_prob_dict[classifier_name])[0]
@@ -170,13 +170,13 @@ function updateMyChart(classifier_name, raw_tax, raw_group_prob_dict){
 
     max_value = maxValue(classifier_data)
 
-    removeDataChart()
-    updateDataChart(classes_arr, max_value)
+    removeDataChart(mychart)
+    updateDataChart(mychart, classes_arr, max_value)
 
-    isDark();
+    isDark(mychart);
 }
 
-function removeDataChart(){
+function removeDataChart(mychart){
     mychart.data.labels.length = 0;
     mychart.data.datasets.forEach((dataset) => {
         dataset.data.length = 0;
@@ -186,7 +186,7 @@ function removeDataChart(){
     mychart.update();
 }
 
-function updateDataChart(labels, max_value){
+function updateDataChart(mychart, labels, max_value){
     mychart.data.labels.push(...labels);
     mychart.data.datasets.forEach((dataset) => {
         dataset.data.push(...probability_data_aux);
@@ -198,7 +198,7 @@ function updateDataChart(labels, max_value){
     mychart.update();
 }
 
-function isDark(){
+function isDark(mychart){
     if(document.getElementById("probabilities-app").classList.contains("tw-dark")){
         mychart.config.options.scales.r.backgroundColor = 'rgba(245, 245, 245, 0.2)'
         mychart.config.options.scales.r.angleLines.color = '#F5F5F5'
@@ -207,4 +207,24 @@ function isDark(){
         
         mychart.update();
     }
-}
\ No newline at end of file
+}
+
+export function elementReady(selector) {
+    return new Promise((resolve, reject) => {
+      const el = document.querySelector(selector);
+      if (el) {
+        resolve(el);
+      }
+  
+      new MutationObserver((mutationRecords, observer) => {
+        Array.from(document.querySelectorAll(selector)).forEach(element => {
+          resolve(element);
+          observer.disconnect();
+        });
+      })
+      .observe(document.documentElement, {
+        childList: true,
+        subtree: true
+      });
+    });
+  }
\ No newline at end of file
diff --git a/lightcurve/src/probability_api/templates/prob.html.jinja b/lightcurve/src/probability_api/templates/prob.html.jinja
index 222a66cd8..b6974658b 100644
--- a/lightcurve/src/probability_api/templates/prob.html.jinja
+++ b/lightcurve/src/probability_api/templates/prob.html.jinja
@@ -1,5 +1,4 @@
 <script id="htmx-script" src="https://unpkg.com/htmx.org@1.9.11"></script>
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script  type="module" src="{{API_URL}}/static/probability.js"></script>
 <link rel="stylesheet" href="{{API_URL}}/static/probability.css">
 
@@ -46,9 +45,26 @@
 </div>
 
 
+
 <script type="module">
-import { init } from "{{API_URL}}/static/probability.js";
-  init();
+  import { init, elementReady } from "{{API_URL}}/static/probability.js";
+
+  function loadScript(src) {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = src;
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  }
+
+  loadScript("https://cdn.jsdelivr.net/npm/chart.js")
+    .then(() => elementReady('#probabilities-app'))
+    .then((el) => {
+      init();
+    })
+    .catch((error) => console.error('Failed to load Chart.js:', error));
 </script>
 
 <script id="probabilities-data" type="application/json">

From ac2a56791edf89f72cb3fd4f93d71271708cf0d9 Mon Sep 17 00:00:00 2001
From: Demurest <eric.apolonio@hotmail.com>
Date: Fri, 8 Nov 2024 17:15:55 -0300
Subject: [PATCH 2/3] radar tooltip fix

---
 .../probability_api/static/customToolTip.js   | 71 +++++++++++++++++++
 .../src/probability_api/static/probability.js | 11 +--
 .../probability_api/templates/prob.html.jinja |  2 +-
 3 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 lightcurve/src/probability_api/static/customToolTip.js

diff --git a/lightcurve/src/probability_api/static/customToolTip.js b/lightcurve/src/probability_api/static/customToolTip.js
new file mode 100644
index 000000000..174c6572c
--- /dev/null
+++ b/lightcurve/src/probability_api/static/customToolTip.js
@@ -0,0 +1,71 @@
+export function customToolTip(context) {
+    let tooltipEl = document.getElementById('chartjs-tooltip');
+
+    if(!tooltipEl){
+        tooltipEl = document.createElement('div')
+        tooltipEl.id = 'chartjs-tooltip';
+        tooltipEl.innerHTML = '<table></table>';
+        document.body.appendChild(tooltipEl);
+    }
+
+    let tooltipModel = context.tooltip;
+    
+    if(tooltipModel.opacity === 0){
+        tooltipEl.style.opacity = 0;
+        return;
+    }
+
+    tooltipEl.classList.remove('above', 'below', 'no-transform');
+    if(tooltipModel.yAlign){
+        tooltipEl.classList.add(tooltipModel.yAlign);
+    } else {
+        tooltipEl.classList.add('no-transform')
+    }
+
+    function getBody(bodyItem) {
+        return bodyItem.lines;
+    }
+
+    // set Text
+    if(tooltipModel.body){
+        let titleLines = tooltipModel.title || [];
+        let bodyLines = tooltipModel.body.map(getBody);
+
+        let innerHtml = '<thead>';
+
+        titleLines.forEach(function(title) {
+            innerHtml += '<tr><th style="color: #fff; width: 140px; height: 12px;padding: 4px;">' + title + ' (score)' + '</th></tr>';
+        });
+
+        innerHtml += '</thead><tbody>';
+
+        /** invertir objecto */
+        innerHtml += '<tr><td style="color: #fff; height: 12px; max-width: 100%;">' + bodyLines[0][0] + '</td></tr>'
+        
+        let style = ""
+        for (let index = bodyLines.length - 1; index >= 1; index--){
+            style = ' color: #fff;';
+            style = style + ' max-width: 100%;';
+            style = style + ' height: 12px;';
+            innerHtml += '<tr><td style="' + style + '">' + bodyLines[index][0] + '</td></tr>';
+        }
+
+        innerHtml += '</tbody>';
+
+        let tableRoot = tooltipEl.querySelector('table');
+        tableRoot.innerHTML = innerHtml;
+    }
+
+    let position = context.chart.canvas.getBoundingClientRect();
+    let bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);
+    console.log(bodyFont)
+
+    // Display, position, and set styles for font
+    tooltipEl.style.opacity = 1;
+    tooltipEl.style.backgroundColor = 'rgba(50, 50, 50, 0.7)'
+    tooltipEl.style.position = 'absolute';
+    tooltipEl.style.left = position.left + window.scrollX + tooltipModel.caretX + 'px';
+    tooltipEl.style.bottom = (window.innerHeight - (position.top + window.scrollY + tooltipModel.caretY)) + 'px';
+    tooltipEl.style.font = bodyFont.string;
+    tooltipEl.style.pointerEvents = 'none';
+}
\ No newline at end of file
diff --git a/lightcurve/src/probability_api/static/probability.js b/lightcurve/src/probability_api/static/probability.js
index 90eff28f4..9a82f0f79 100644
--- a/lightcurve/src/probability_api/static/probability.js
+++ b/lightcurve/src/probability_api/static/probability.js
@@ -1,3 +1,5 @@
+import { customToolTip } from "./customToolTip.js"
+
 let probability_data_aux
 
 let data = {
@@ -57,10 +59,11 @@ let config = {
                 display: false
             },
             tooltip: {
-                enabled: true,
-                mode: 'index',
+                enabled: false,
+                mode: 'dataset',
                 position: 'nearest',
-                titleFont: {
+                external: customToolTip,
+                /*titleFont: {
                     weight: 'bold'
                 },
                 displayColors: false,
@@ -82,7 +85,7 @@ let config = {
 
                         return tooltipText
                     }
-                }
+                }*/
             }
         },
 
diff --git a/lightcurve/src/probability_api/templates/prob.html.jinja b/lightcurve/src/probability_api/templates/prob.html.jinja
index b6974658b..ca4d86909 100644
--- a/lightcurve/src/probability_api/templates/prob.html.jinja
+++ b/lightcurve/src/probability_api/templates/prob.html.jinja
@@ -38,7 +38,7 @@
 
         </div>
 
-        <div class="md:tw-w-[80%] md:tw-h-[80%] sm:tw-w-[100%] sm:tw-h-[100%] tw-mx-auto tw-relative">
+        <div class="md:tw-w-[365px] md:tw-h-[250px] sm:tw-w-[100%] sm:tw-h-[100%] tw-mx-auto tw-relative">
             <canvas id="myChart"></canvas>
         </div>
     </div>

From d7eab3b64fdc5eeb34dbda5a5ff2ff1615da1220 Mon Sep 17 00:00:00 2001
From: Demurest <eric.apolonio@hotmail.com>
Date: Fri, 8 Nov 2024 17:28:34 -0300
Subject: [PATCH 3/3] delete comments and console logs

---
 .../probability_api/static/customToolTip.js   |  1 -
 .../src/probability_api/static/probability.js | 23 -------------------
 2 files changed, 24 deletions(-)

diff --git a/lightcurve/src/probability_api/static/customToolTip.js b/lightcurve/src/probability_api/static/customToolTip.js
index 174c6572c..afb5d1b8b 100644
--- a/lightcurve/src/probability_api/static/customToolTip.js
+++ b/lightcurve/src/probability_api/static/customToolTip.js
@@ -58,7 +58,6 @@ export function customToolTip(context) {
 
     let position = context.chart.canvas.getBoundingClientRect();
     let bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);
-    console.log(bodyFont)
 
     // Display, position, and set styles for font
     tooltipEl.style.opacity = 1;
diff --git a/lightcurve/src/probability_api/static/probability.js b/lightcurve/src/probability_api/static/probability.js
index 9a82f0f79..15e7a1566 100644
--- a/lightcurve/src/probability_api/static/probability.js
+++ b/lightcurve/src/probability_api/static/probability.js
@@ -63,29 +63,6 @@ let config = {
                 mode: 'dataset',
                 position: 'nearest',
                 external: customToolTip,
-                /*titleFont: {
-                    weight: 'bold'
-                },
-                displayColors: false,
-                callbacks: {
-                    title: function(){
-                        return "Probabilities (score)"
-                    },
-                    label: function(context){
-                        let tooltipText = [];
-                        let length = context.dataset.data.length - 1
-                        let data = context.dataset.data
-                        let labels = context.chart.data.labels
-                        
-                        tooltipText.push(`${labels[0]}: ${data[0]}`)
-
-                        for (let index = length; index >= 1; index--){
-                            tooltipText.push(`${labels[index]}: ${data[index]}`)
-                        }
-
-                        return tooltipText
-                    }
-                }*/
             }
         },