From 02fb2da3893fc639fb1b8ea24b1ba9c6c54a161a Mon Sep 17 00:00:00 2001
From: David Cruciani <david.cruciani@circl.lu>
Date: Tue, 20 Feb 2024 10:10:02 +0100
Subject: [PATCH] add: [website] history collapse for query page

---
 website/app/history/history.py                |  6 +++
 website/app/history/history_core.py           | 10 ++++-
 website/app/static/css/core.css               |  5 ---
 .../static/js/history/history_tree_query.js   | 16 ++++++++
 .../static/js/{ => history}/history_view.js   |  2 +-
 website/app/templates/base.html               |  1 -
 website/app/templates/history_session.html    |  2 +-
 website/app/templates/query.html              | 37 +++++++++++++++++++
 8 files changed, 70 insertions(+), 9 deletions(-)
 create mode 100644 website/app/static/js/history/history_tree_query.js
 rename website/app/static/js/{ => history}/history_view.js (98%)

diff --git a/website/app/history/history.py b/website/app/history/history.py
index f05a969..f5e91f3 100644
--- a/website/app/history/history.py
+++ b/website/app/history/history.py
@@ -35,6 +35,12 @@ def get_history_session():
         return histories
     return {}
 
+@history_blueprint.route("/get_current_query_history", methods=["GET"])
+def get_current_query_history():
+    """Get current query history"""
+    return HistoryModel.get_current_query_history()
+
+
 @history_blueprint.route("/save_history/<sid>", methods=["GET"])
 def save_history(sid):
     return HistoryModel.save_history_core(sid)
diff --git a/website/app/history/history_core.py b/website/app/history/history_core.py
index 44fc062..1d92438 100644
--- a/website/app/history/history_core.py
+++ b/website/app/history/history_core.py
@@ -30,7 +30,7 @@ def get_history_session():
         # If current query have no children then don't display it
         # It's already save in history
         # Only parent-child tree structure is in flask session
-        current_query_value = sess.get(sess.get("current_query"))
+        current_query_value = sess.get(current_query)
         if current_query_value and current_query_value["children"]:
             loc_list.append(current_query_value)
     for q in sess:
@@ -43,6 +43,14 @@ def get_history_session():
 
     return loc_list
 
+def get_current_query_history():
+    current_query = sess.get("current_query")
+    if current_query:
+        current_query_value = sess.get(current_query)
+        if current_query_value and current_query_value["children"]:
+            return current_query_value
+    return {}
+
 
 def get_history_session_uuid(history_uuid):
     for q in sess:
diff --git a/website/app/static/css/core.css b/website/app/static/css/core.css
index ca7e4f9..3735d35 100644
--- a/website/app/static/css/core.css
+++ b/website/app/static/css/core.css
@@ -6,11 +6,6 @@ body {
   background-color: #fbfbfb;
 }
 
-/* @media (min-width: 991.98px) {
-  main {
-    padding-left: 200px;
-  }
-} */
 
 span#goTop, span#project-version{
   position: fixed;
diff --git a/website/app/static/js/history/history_tree_query.js b/website/app/static/js/history/history_tree_query.js
new file mode 100644
index 0000000..022a3b5
--- /dev/null
+++ b/website/app/static/js/history/history_tree_query.js
@@ -0,0 +1,16 @@
+export default {
+	name: "History_view",
+	delimiters: ['[[', ']]'],
+	props: {
+		history: Object,
+	},
+
+	template: `
+        <li><a :href="'/query/'+history.uuid" :title="'Attribute: \\n' +history.input+ '\\n\\nModules: \\n' + history.modules">[[history.query]]</a></li>
+        <ul>
+            <template v-for="child in history.children">
+                <history_view :history="child"></history_view>
+            </template>
+        </ul>
+	`
+}
\ No newline at end of file
diff --git a/website/app/static/js/history_view.js b/website/app/static/js/history/history_view.js
similarity index 98%
rename from website/app/static/js/history_view.js
rename to website/app/static/js/history/history_view.js
index 77270b0..cc066c7 100644
--- a/website/app/static/js/history_view.js
+++ b/website/app/static/js/history/history_view.js
@@ -1,4 +1,4 @@
-import {display_toast} from './toaster.js'
+import {display_toast} from '../toaster.js'
 export default {
 	name: "History_view",
 	delimiters: ['[[', ']]'],
diff --git a/website/app/templates/base.html b/website/app/templates/base.html
index 3bf7926..0cfb01d 100644
--- a/website/app/templates/base.html
+++ b/website/app/templates/base.html
@@ -33,7 +33,6 @@
         <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/jquery-ui.css') }}">
 
         <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/core.css') }}">
-        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/sidebar.css') }}">
 
         <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/select2-bootstrap-5-theme.min.css') }}">
     </head>
diff --git a/website/app/templates/history_session.html b/website/app/templates/history_session.html
index 478a2b8..2e6a7a2 100644
--- a/website/app/templates/history_session.html
+++ b/website/app/templates/history_session.html
@@ -85,7 +85,7 @@
 <script type="module">
     const { createApp, ref, onMounted, nextTick, defineComponent} = Vue
     import {display_toast, message_list} from '/static/js/toaster.js'
-    import history_view from '/static/js/history_view.js'
+    import history_view from '/static/js/history/history_view.js'
     createApp({
         delimiters: ['[[', ']]'],
         components: {
diff --git a/website/app/templates/query.html b/website/app/templates/query.html
index ef515f1..ffb58c1 100644
--- a/website/app/templates/query.html
+++ b/website/app/templates/query.html
@@ -48,6 +48,30 @@
 
     <br/>
 
+    <button class="btn btn-outline-primary" style="position: fixed; right: 0px; top: 50%" title="Session history" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">
+        <i class="fa-solid fa-bars"></i>
+    </button>
+
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
+        <div class="offcanvas-header">
+            <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Current History query</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div style="margin-left: 18px;">
+            <a class="btn btn-secondary btn-sm" href="/history_session">Complete view</a>
+        </div>
+        <div class="offcanvas-body">
+            <ul>
+                <li><a :href="'/query/'+history.uuid" :title="'Attribute: \n' +history.input+ '\n\nModules: \n' + history.modules">[[history.query]]</a></li>
+                <ul>
+                    <template v-for="child in history.children">
+                        <history_view :history="child"></history_view>
+                    </template>
+                </ul>
+            </ul>
+        </div>
+    </div>
+
     <!-- Results Part -->
     <hr>
     <ul class="nav nav-tabs" style="margin-bottom: 10px;">
@@ -183,8 +207,12 @@
 <script type="module">
     const { createApp, ref, onMounted, nextTick, defineComponent} = Vue
     import {message_list} from '/static/js/toaster.js'
+    import history_view from '/static/js/history/history_tree_query.js'
     createApp({
         delimiters: ['[[', ']]'],
+        components: {
+            history_view
+        },
         setup() {
             const is_searching = ref(false)
 
@@ -194,6 +222,7 @@
             const progress = ref(0)
             const status_site = ref()
             const tab_list = ref("json")
+            const history = ref({})
 
 
             function actionQuery(){
@@ -258,8 +287,15 @@
                 }
             }
 
+            async function get_history_session(){
+                let res = await fetch("/get_current_query_history")
+                let loc = await res.json()
+                history.value = loc
+            }
+
             onMounted(() => {
                 actionQuery()
+                get_history_session()
             })
 
             return {
@@ -269,6 +305,7 @@
                 is_searching,
                 modules_res,
                 tab_list,
+                history,
                 generateCoreFormatUI,
                 active_tab
             }