syntaxmatrix 2.5.6__py3-none-any.whl → 2.6.2__py3-none-any.whl

syntaxmatrix/templates/dashboard.html

@@ -11,52 +11,14 @@
         margin: 0;
         padding: 0;
       }
-      .dashboard-sidebar {
-        position: fixed;
-        top: 0; left: 0;
-        width: 200px; height: 100vh;
-        background: #f1f4f7;
-        border-right: 1px solid #ccc;
-        padding: 26px 10px 10px 14px;
-        box-sizing: border-box;
-        overflow-y: auto;    
-        z-index: 100;
-        font-size: clamp(0.95rem, 2vw, 1.09rem);
-      }
-      .dashboard-sidebar h2 {
-        font-size: clamp(1.12rem, 3vw, 1.28rem);
-        color: #007acc;
-        margin-top: 0;
-        margin-bottom: 32px;
-        font-weight: bold;
-        letter-spacing: 1px;
-      }
-      .sidebar-links {
-        margin-top: 22px;
-      }
-      .sidebar-links a {
-        display: block;
-        padding: 12px 10px 12px 0;
-        color: #333;
-        text-decoration: none;
-        font-size: clamp(0.93rem, 2vw, 1.08rem);
-        border-radius: 6px;
-        margin-bottom: 6px;
-        transition: background 0.2s, color 0.2s;
-      }
-      .sidebar-links a.active,
-      .sidebar-links a:hover {
-        background: #e0e5ee;
-        color: #007acc;
-        font-weight: bold;
-      }
+      
       .dashboard-main {
         margin-left: 220px;
         padding: 36px 40px 30px 10px;
         min-height: 100vh;
         box-sizing: border-box;
         overflow-x: auto;
-        background: #f8f9fb;
+        background: #dff0f5ff;
         font-size: clamp(0.98rem, 2vw, 1.07rem);
       }
       .dashboard-tabs {
@@ -85,7 +47,7 @@
         top: 2px;
       }
       .dashboard-content {
-        background: #fff;
+        background: #bbbbbd;
         width: 100%;
         padding: 10px;
         border-radius: 0 0 10px 10px;
@@ -95,6 +57,50 @@
         overflow-x: auto;
         margin-right: 1vw; 
       }
+
+      textarea#askai{
+        background: #e5e5e5cd;
+      }
+
+      .dashboard-sidebar {
+        position: fixed;
+        top: 0; left: 0;
+        width: 200px; height: 100vh;
+        background: #a3a4a5ff;
+        border-right: 1px solid #ccc;
+        padding: 26px 10px 10px 14px;
+        box-sizing: border-box;
+        overflow-y: auto;    
+        z-index: 100;
+        font-size: clamp(0.95rem, 2vw, 1.09rem);
+      }
+      .dashboard-sidebar h2 {
+        font-size: clamp(1.12rem, 3vw, 1.28rem);
+        color: #007acc;
+        margin-top: 0;
+        margin-bottom: 32px;
+        font-weight: bold;
+        letter-spacing: 1px;
+      }
+      .sidebar-links {
+        margin-top: 22px;
+      }
+      .sidebar-links a {
+        display: block;
+        padding: 12px 10px 12px 0;
+        color: #333;
+        text-decoration: none;
+        font-size: clamp(0.93rem, 2vw, 1.08rem);
+        border-radius: 6px;
+        margin-bottom: 6px;
+        transition: background 0.2s, color 0.2s;
+      }
+      .sidebar-links a.active,
+      .sidebar-links a:hover {
+        background: #e0e5ee;
+        color: #007acc;
+        font-weight: bold;
+      }
       
       .smx-table {
         padding: clamp(3px, 1vw, 9px) clamp(4px, 2vw, 13px);
@@ -156,31 +162,18 @@
         padding:0.2rem;
       }
       .del-btn:hover { opacity:0.8; background:red; }
-   
-      /* full-screen overlay */
-      #loader-overlay {
-        position: fixed;
-        top: 0; left: 0;
-        width: 100%; height: 100%;
-        background: rgba(241, 235, 235, 0);
-        display: none;
+
+      /* Make the Explore Data submit button compact instead of full-width */
+      .eda-submit-btn {
+        align-self: flex-start;      /* stop flex from stretching it to 100% */
+        width: auto;                 /* shrink to content */
+        min-width: 7.5rem;           /* tweak this if you want it smaller/larger */
+        padding: 6px 16px;           /* a bit tighter than the global button */
+        display: inline-flex;
         align-items: center;
         justify-content: center;
-        z-index: 9999;
-      }
-      /* simple spinner */
-      .loader {
-        border: 8px solid #eee;
-        border-top: 8px solid #333;
-        border-radius: 50%;
-        width: 60px; height: 60px;
-        animation: spin 1s linear infinite;
-      }
-      @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
       }
-
+      
       /* --- Mobile fixes --- */
       .dashboard-content img,
       .dashboard-content canvas,
@@ -206,8 +199,8 @@
         .dashboard-sidebar {
           position: fixed !important;
           inset: 0 auto 0 0;
-          width: 80vw !important;           /* drawer width */
-          max-width: 320px;
+          width: 48vw !important;           /* drawer width */
+          max-width: 200px;
           transform: translateX(-100%);
           transition: transform .28s ease;
           z-index: 1000;
@@ -590,29 +583,150 @@
       .eda-card h3{ color: #1f2937 !important; }
       .smx-stat h4{ color: #64748b !important; }
     </style>
+    <style>
+      div.li li {
+        margin-left: 35px;
+      }
+      /* 1. Style the arrow specifically */
+      .toggle-arrow {
+        display: inline-block;        /* CRITICAL: Allows the element to rotate */
+        transition: transform 0.2s;   /* Makes the rotation smooth */
+        margin-right: 6px;            /* Spacing between arrow and text */
+      }
+
+      /* 2. Rotate and color when the menu is OPEN */
+      details[open] summary .toggle-arrow {
+        transform: rotate(90deg);     /* Rotates the arrow downwards */
+        color: #007acc;               /* Changes color to blue */
+      }
+
+      /* 3. (Optional) Remove default browser markers to avoid double arrows */
+      details > summary {
+        list-style: none;
+      }
+      details > summary::-webkit-details-marker {
+        display: none;
+      }
+
+      /* Thinking dots that sit inside the Explore Data submit button */
+      /* Submit button: keep size constant while swapping text for dots */
+      .eda-submit-btn {
+        position: relative;
+        overflow: hidden;
+      }
+
+      .eda-btn-label {
+        display: inline-block;
+      }
+
+      /* Thinking dots overlay, centred in the button */
+      .eda-btn-spinner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: none;                 /* hidden until loading */
+        align-items: center;
+        justify-content: center;
+        gap: 0.15rem;
+      }
+
+      .eda-btn-spinner .dot {
+        width: 0.28rem;
+        height: 0.28rem;
+        border-radius: 999px;
+        background: currentColor;
+        opacity: 0.2;
+        display: inline-block;
+        margin: 0 0.08rem;
+        animation: edaBtnDots 1s infinite ease-in-out;
+      }
+
+      .eda-btn-spinner .dot:nth-child(2) {
+        animation-delay: 0.15s;
+      }
+
+      .eda-btn-spinner .dot:nth-child(3) {
+        animation-delay: 0.30s;
+      }
+
+      /* While loading: keep label in layout, but hide it visually */
+      .eda-btn-loading .eda-btn-label {
+        visibility: hidden;            /* keeps height and width */
+      }
+
+      .eda-btn-loading .eda-btn-spinner {
+        display: inline-flex;
+      }
+
+      @keyframes edaBtnDots {
+        0%, 60%, 100% {
+          opacity: 0.2;
+          transform: translateY(0);
+        }
+        30% {
+          opacity: 1;
+          transform: translateY(-0.16rem);
+        }
+      }
+
+      .sidebar-links {
+        margin-top: 22px;
+      }
+      .sidebar-links a {
+        display: block;
+        padding: 12px 10px 12px 0;
+        color: #333;
+        text-decoration: none;
+        font-size: clamp(0.93rem, 2vw, 1.08rem);
+        border-radius: 6px;
+        margin-bottom: 6px;
+        transition: background 0.2s, color 0.2s;
+      }
+      .sidebar-links a.active,
+      .sidebar-links a:hover {
+        background: #e0e5ee;
+        color: #007acc;
+        font-weight: bold;
+      }
+      /* Sub-links under a main section (e.g. Explore → Resize dataset) */
+      .sidebar-links a.sidebar-sub-link {
+        font-size: clamp(0.80rem, 1.4vw, 0.95rem);  /* smaller than main items */
+        padding: 6px 10px 6px 14px;                  /* slight indent to show hierarchy */
+        margin-bottom: 4px;
+        opacity: 0.95;
+      }
+
+      /* Optional: visual cue arrow for sub-items */
+      .sidebar-links a.sidebar-sub-link::before {
+        content: "↳ ";
+        font-size: 0.8em;
+        opacity: 0.7;
+      }
+    </style>
 
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 </head>
 <body>
   <div id="sidebarScrim" class="sidebar-scrim" aria-hidden="true"></div>
-  <div id="loader-overlay">
-    <div class="loader"></div>
-  </div>
   <div class="dashboard-sidebar">
-    <button class="sidebar-close" aria-label="Close menu">✕</button>
+   
     <h2>ML&nbsp;Lab</h2>
     <a href="/">return to home</a>
     <div class="sidebar-links">
       <a href="/dashboard?section=explore"{% if section == 'explore' %} class="active"{% endif %}>Explore</a>
-      
+
+      <!-- Explore subsets -->
+      <a href="{{ url_for('dataset_resize') }}" class="sidebar-sub-link">Resize dataset</a>
+
       <!-- Future: more links here -->
     </div>
+
   </div>
   <div class="dashboard-main">
     <button id="sidebarToggle" class="sidebar-toggle" aria-label="Open menu"></button>
     <ul class="dashboard-tabs">
-      <li class="{{ 'active' if section == 'explore' else '' }}"><a href="/dashboard?section=explore">Explore</a></li>
-      
+      <li class="{{ 'active' if section == 'explore' else '' }}"><a href="/dashboard?section=explore">Explore</a></li>  
     </ul>
     <div class="dashboard-content">
       <div class="explore-card">
@@ -663,11 +777,24 @@
           <h2>Explore Data</h2>
           <form id="form-askai" method="post" action="/dashboard?section=explore" style="margin-top:5px;padding:12px; border:1px solid grey;border-radius:5px;width:70vw;">
             <input type="hidden" name="dataset" value="{{ selected_dataset }}">
-            <label for="askai"><strong>Ask smxAI:</strong></label>
-            <textarea id="askai" name="askai_question" type="text" rows="4"
-                    style="position:relative; width:90%; padding:8px; font-size:0.8em; border-radius:8px;"
-                    placeholder="Ask me about {{ (selected_dataset or 'your dataset. Upload it first.').replace('_', ' ').replace('.csv', '') }}" required></textarea>
-            <button type="submit" style="font-size:1.2rem; width:8rem; padding:4px;">Submit</button>
+            <label for="askai"><strong>Ask {{ smxAI }}:</strong></label>
+            <textarea id="askai" name="askai_question" type="text" rows="5"
+                    style="position:relative; width:90%; padding:16px; font-size:0.8em; border-radius:8px;"
+                    placeholder="Ask me about {{ (selected_dataset or 'your dataset\n. But upload it first.').replace('_', ' ').replace('.csv', '') }}" required></textarea>
+            <!-- <button type="submit" style="font-size:1.2rem; width:8rem; padding:4px;">Submit</button> -->
+            <button
+              type="submit"
+              class="btn btn-primary eda-submit-btn"
+            >
+              <span class="eda-btn-content">
+                <span class="eda-btn-label">Submit</span>
+                <span class="eda-btn-spinner" aria-hidden="true">
+                  <span class="dot"></span>
+                  <span class="dot"></span>
+                  <span class="dot"></span>
+                </span>
+              </span>
+            </button>
           </form>
           <div style="margin-bottom: 36px;">
             {% if askai_question %}
@@ -679,37 +806,49 @@
               -->
               <br><br>
               <div class="refined-qblock">
-                  <span class="refined-q-label"><b>My Thought Process:</b></span><br>
-                  <span class="refined-q">{{ refined_question|safe }}</span>
-              </div><br>
-              <div class="refined-qblock">
-                {% if tasks %}
-                  <b>Tasks Performed: </b><br>
-                  {% for task in tasks %}
-                    <span class="refined-q">- {{ task }}</span><br>
-                  {% endfor %}
-                {% endif %}
-              </div><br>
-              {% if llm_usage %}
-                <div class="refined-qblock">
-                  <b>LLM: </b><span>{{ llm_usage.provider }} | {{ llm_usage.model }}</span><br>
-                  <b>Token Usage: </b>
-                    <li>- Input Tokens: {{ llm_usage.input_tokens }}</li>
-                    <li>- Output Tokens: {{ llm_usage.output_tokens }}</li>
-                    <li>- Total Tokens: {{ llm_usage.total_tokens }}</li>         
-                  </ul>
-                </div>
-              {% endif %}
+                <details>
+                  <summary class="refined-q-label" style="cursor: pointer; list-style: none;">
+                      <span class="toggle-arrow">▶</span> 
+                      <b>Thought Process</b>
+                  </summary>
+                  <div class="li" style="margin-top: 10px; padding-left: 14px; border-left: 3px solid #e0e5ee;">
+                      <span class="refined-q">{{ refined_question|safe }}</span>
+                      <br><br>
+                      {% if tasks %}
+                        <b>Tasks Performed: </b>
+                        {% for task in tasks %}
+                          <li>{{ task.replace('_', ' ').capitalize() }}</li>
+                        {% endfor %}
+                      {% endif %} 
+                      <br><br>
+                      {% if TOKENS %}
+                        <b>Refiner Agent: </b><span>{{ TOKENS['Refiner'][0] }} | {{  TOKENS['Refiner'][1] }}</span><br> 
+                        <b>Token Usage: </b>
+                          <li>Input Tokens: {{ TOKENS['Refiner'][2] }}</li>
+                          <li>Output Tokens: {{ TOKENS['Refiner'][3] }}</li>
+                          <li>Total Tokens: {{ TOKENS['Refiner'][4] }}</li>  
+                        <br>     
+                        
+                        <b>Coder Agent: </b><span>{{ TOKENS['Coder'][0] }} | {{  TOKENS['Coder'][1] }}</span><br> 
+                        <b>Token Usage: </b>
+                          <li>Input Tokens: {{ TOKENS['Coder'][2] }}</li>
+                          <li>Output Tokens: {{ TOKENS['Coder'][3] }}</li>
+                          <li>Total Tokens: {{ TOKENS['Coder'][4] }}</li>
+                      {% endif %} 
+                  </div>
+                </details>
+              </div>
             {% endif %}
             {% if ai_outputs %}
               <div class="d-flex align-items-center justify-content-between" style="margin: 12px;">
+                <br>
                 <h3 class="m-0">Result</h3>
+                {% for html_block in ai_outputs %}
+                    <div class="ai-output" style="margin-bottom:18px;overflow-x:auto; max-width:100%;">
+                        {{ html_block | safe }}
+                    </div>
+                {% endfor %}
               </div>
-              {% for html_block in ai_outputs %}
-                  <div class="ai-output" style="margin-bottom:18px;overflow-x:auto; max-width:100%;">
-                      {{ html_block | safe }}
-                  </div>
-              {% endfor %}
             {% endif %}
             {% if ai_code %}
               <div>
@@ -755,31 +894,31 @@
     </div>
   </div>
   <script>
-  async function copyCode(btn){
-    const pre = btn.parentElement.querySelector('pre');
-    if(!pre) return;
-    const text = pre.innerText;
-
-    try {
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        await navigator.clipboard.writeText(text);
-      } else {
-        // fallback
-        const range = document.createRange();
-        range.selectNodeContents(pre);
-        const sel = window.getSelection();
-        sel.removeAllRanges(); sel.addRange(range);
-        document.execCommand('copy');
-        sel.removeAllRanges();
-      }
-      btn.textContent = 'Copied!';
-      setTimeout(()=>btn.textContent='Copy', 1200);
-    } catch(e){
-      btn.textContent = 'Failed';
-      setTimeout(()=>btn.textContent='Copy', 1200);
+    async function copyCode(btn){
+      const pre = btn.parentElement.querySelector('pre');
+      if(!pre) return;
+      const text = pre.innerText;
+
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          await navigator.clipboard.writeText(text);
+        } else {
+          // fallback
+          const range = document.createRange();
+          range.selectNodeContents(pre);
+          const sel = window.getSelection();
+          sel.removeAllRanges(); sel.addRange(range);
+          document.execCommand('copy');
+          sel.removeAllRanges();
+        }
+        btn.textContent = 'Copied!';
+        setTimeout(()=>btn.textContent='Copy', 1200);
+      } catch(e){
+        btn.textContent = 'Failed';
+        setTimeout(()=>btn.textContent='Copy', 1200);
+      }
     }
-  }
-</script>
+  </script>
   <script>
     function toggleCodeCell(link) {
       var cell = link.nextElementSibling;
@@ -792,6 +931,7 @@
         link.querySelector("span").innerText = "Show Code";
       }
     }
+
     function copyCodeToClipboard(btn) {
       var pre = btn.parentElement.querySelector("pre");
       if (!pre) return;
@@ -810,13 +950,36 @@
       }
       sel.removeAllRanges();
     }
-  
-    document.addEventListener("DOMContentLoaded", () => {
-      const form = document.getElementById("form-askai");
-      const overlay = document.getElementById("loader-overlay");
-      form.addEventListener("submit", () => {
-        overlay.style.display = "flex";
+
+    document.addEventListener("DOMContentLoaded", function () {
+      var form = document.getElementById("form-askai");
+      if (!form) return;
+
+      var submitBtn = form.querySelector(".eda-submit-btn");
+      if (!submitBtn) return;
+
+      // When the form actually submits, show the spinner and disable the button
+      form.addEventListener("submit", function () {
+        submitBtn.classList.add("eda-btn-loading");
+        submitBtn.disabled = true;
+        // IMPORTANT: no preventDefault here – the browser/htmx still submits normally
       });
+
+      // If htmx is used on this form, reset the spinner once the request completes or errors
+      if (window.htmx) {
+        form.addEventListener("htmx:afterRequest", function () {
+          submitBtn.classList.remove("eda-btn-loading");
+          submitBtn.disabled = false;
+        });
+        form.addEventListener("htmx:responseError", function () {
+          submitBtn.classList.remove("eda-btn-loading");
+          submitBtn.disabled = false;
+        });
+        form.addEventListener("htmx:sendError", function () {
+          submitBtn.classList.remove("eda-btn-loading");
+          submitBtn.disabled = false;
+        });
+      }
     });
   </script>
   <script>