From 93a801fe3265df39b3ff4433ee5a2e9b8e1eccf0 Mon Sep 17 00:00:00 2001
From: Nico Reinartz <nico.reinartz@rwth-aachen.de>
Date: Thu, 16 Nov 2023 01:01:08 +0100
Subject: [PATCH] feat: adjustments after first test

---
 src/components/results/Topics.vue             |  56 ++-----
 src/components/results/charts/TopicChart.vue  |  10 +-
 .../results/charts/TopicClusters.vue          | 141 ------------------
 .../results/charts/TopicClusters3D.vue        |  11 +-
 src/stores/results.ts                         |  12 +-
 src/stores/stats.ts                           |   9 +-
 src/types/api-models.ts                       |   4 +-
 src/utils/api.ts                              |   7 +-
 src/views/FilterView.vue                      |   4 +-
 9 files changed, 48 insertions(+), 206 deletions(-)
 delete mode 100644 src/components/results/charts/TopicClusters.vue

diff --git a/src/components/results/Topics.vue b/src/components/results/Topics.vue
index 3422b05..c58b792 100644
--- a/src/components/results/Topics.vue
+++ b/src/components/results/Topics.vue
@@ -4,60 +4,26 @@
             <div class="col-12">
                 <div class="card h-100 shadow-sm" style="min-height: 70vh">
                     <div class="card-body">
-                        <template v-if="resultsStore.topicDiscoveryResultsAvailable">
+                        <template v-if="resultsStore.clusteringResultsAvailable">
                             <TopicClusters3D />
                         </template>
-                        <Loader v-else :message="loadingMessage" :is-intermediate="loadingMessage === undefined" />
+                        <Loader v-else :message="loadingMessageCluster"
+                            :is-intermediate="loadingMessageCluster === undefined" />
                     </div>
                 </div>
             </div>
             <div class="col-12">
                 <div class="card h-100 shadow-sm" style="min-height: 40vh">
                     <div class="card-body">
-                        <template v-if="resultsStore.topicDiscoveryResultsAvailable">
+                        <template v-if="resultsStore.topicsOverTimeResultsAvailable">
                             <TopicChart />
                         </template>
-                        <Loader v-else :message="loadingMessage" :is-intermediate="loadingMessage === undefined" />
+                        <Loader v-else :message="loadingMessageTopics"
+                            :is-intermediate="loadingMessageTopics === undefined" />
                     </div>
                 </div>
             </div>
         </div>
-        <div v-if="resultsStore.topicDiscoveryResultsAvailable">
-            <!-- Tab Headers -->
-            <!-- <ul class="nav nav-tabs">
-                <li class="nav-item" v-for="(topic, index) in resultsStore.topicDiscoveryResults!.topics" :key="index">
-                    <a class="nav-link" :class="{ active: activeTab === index }" href="#"
-                        @click.prevent="activeTab = index">
-                        {{ topic.name }}
-                    </a>
-                </li>
-            </ul> -->
-
-            <!-- Tab Contents -->
-            <div class="tab-content">
-                <div class="tab-pane" :class="{ active: activeTab === index }"
-                    v-for="(topic, index) in resultsStore.topicDiscoveryResults!.topics" :key="index">
-
-                    <!-- Table for each topic -->
-                    <!-- <table class="table">
-                        <thead>
-                            <tr>
-                                <th>Word</th>
-                                <th>Frequency</th>
-                                <th>Timestamp</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr v-for="(word, wordIndex) in topic.words" :key="wordIndex">
-                                <td>{{ word }}</td>
-                                <td>{{ topic.frequencies[wordIndex] }}</td>
-                                <td>{{ topic.timestamps[wordIndex] }}</td>
-                            </tr>
-                        </tbody>
-                    </table> -->
-                </div>
-            </div>
-        </div>
     </CollapsibleSection>
 </template>
 
@@ -71,8 +37,12 @@ import TopicChart from './charts/TopicChart.vue';
 import TopicClusters3D from './charts/TopicClusters3D.vue';
 
 const resultsStore = useResultsStore();
-const activeTab = ref(0);
-const loadingMessage = computed<string | undefined>(
-    () => resultsStore.results?.progress === QueryProgress.DiscoveringTopics ? "Discovering topics ..." : undefined
+
+const loadingMessageCluster = computed<string | undefined>(
+    () => resultsStore.results?.progress === QueryProgress.ClusteringTopics ? "Clustering topics ..." : undefined
+);
+
+const loadingMessageTopics = computed<string | undefined>(
+    () => resultsStore.results?.progress === QueryProgress.TopicOverTime ? "Analyzing topics over time ..." : undefined
 );
 </script>
\ No newline at end of file
diff --git a/src/components/results/charts/TopicChart.vue b/src/components/results/charts/TopicChart.vue
index c34ef94..6086406 100644
--- a/src/components/results/charts/TopicChart.vue
+++ b/src/components/results/charts/TopicChart.vue
@@ -10,11 +10,11 @@ import { onMounted, watch } from 'vue';
 const resultsStore = useResultsStore();
 
 onMounted(() => {
-    if (resultsStore.topicDiscoveryResultsAvailable) {
+    if (resultsStore.topicsOverTimeResultsAvailable) {
         plotDiscoveredTopics();
     }
     else {
-        watch(() => resultsStore.topicDiscoveryResultsAvailable, () => {
+        watch(() => resultsStore.topicsOverTimeResultsAvailable, () => {
             plotDiscoveredTopics();
         });
     }
@@ -22,12 +22,12 @@ onMounted(() => {
 
 function plotDiscoveredTopics() {
     const query = resultsStore.results!;
-    const discoveredTopics = resultsStore.topicDiscoveryResults?.topics_over_time!;
+    const discoveredTopics = resultsStore.topicsOverTimeResults!;
 
     // Prepare series data for ECharts
     const seriesData = discoveredTopics.map(topic => {
         return {
-            name: resultsStore.topicDiscoveryResults?.topics[topic.id],
+            name: resultsStore.results?.results?.topic_discovery_results?.topics[topic.id],
             type: 'line',
             connectNulls: true,
             data: [...Array(query.end_year - query.start_year).keys()].map(
@@ -66,7 +66,7 @@ function plotDiscoveredTopics() {
             }
         },
         legend: {
-            data: discoveredTopics.map(topic => resultsStore.topicDiscoveryResults?.topics[topic.id]),
+            data: discoveredTopics.map(topic => resultsStore.results?.results?.topic_discovery_results?.topics[topic.id]),
             left: "center",
             top: 20,
             orient: "horizontal",
diff --git a/src/components/results/charts/TopicClusters.vue b/src/components/results/charts/TopicClusters.vue
deleted file mode 100644
index df32c24..0000000
--- a/src/components/results/charts/TopicClusters.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-    <div id="cluster-chart" class="h-100"></div>
-</template>
-
-<script setup lang="ts">
-import echarts from "@/utils/echarts";
-import { useResultsStore } from '@/stores/results';
-import { onMounted, watch } from 'vue';
-
-const resultsStore = useResultsStore();
-
-onMounted(() => {
-    if (resultsStore.topicDiscoveryResultsAvailable) {
-        plotDiscoveredTopics();
-    }
-    else {
-        watch(() => resultsStore.topicDiscoveryResultsAvailable, () => {
-            plotDiscoveredTopics();
-        });
-    }
-});
-
-function plotDiscoveredTopics() {
-    const clusters = resultsStore.topicDiscoveryResults?.clusters!;
-    const miscIndexes = clusters.topic_labels.map((label, index) => label === -1 || index > 9 ? index : -1)
-        .filter(index => index !== -1);
-
-    const dataSeries = [{
-        name: "Miscellaneous",
-        type: 'scatterGL',
-        emphasis: {
-            focus: 'series'
-        },
-        data: miscIndexes.map(index => [clusters.points_x[index], clusters.points_y[index]])
-
-    }]
-
-    for (let i = 0; i < 10; i++) {
-        const points = [];
-        for (let j = 0; j < clusters.topic_labels.length; j++) {
-            if (clusters.topic_labels[j] === i) {
-                points.push([clusters.points_x[j], clusters.points_y[j]]);
-            }
-        }
-
-        dataSeries.push({
-            name: resultsStore.topicDiscoveryResults?.topics![i]!,
-            type: 'scatterGL',
-            emphasis: {
-                focus: 'series'
-            },
-            data: points,
-            // markArea: {
-            //     silent: false,
-            //     label: {
-            //         position: "bottom"
-            //     },
-            //     z: 5,
-            //     itemStyle: {
-            //         color: 'transparent',
-            //         borderWidth: 1,
-            //         borderType: 'dashed'
-            //     },
-            //     data: [
-            //         [
-            //             {
-            //                 name: resultsStore.topicDiscoveryResults?.topics![i],
-            //                 xAxis: 'min',
-            //                 yAxis: 'min'
-            //             },
-            //             {
-            //                 xAxis: 'max',
-            //                 yAxis: 'max'
-            //             }
-            //         ]
-            //     ]
-            // },
-        })
-    }
-
-    const option = {
-        title: {
-            text: 'Topic clusters'
-        },
-        grid: {
-            left: '3%',
-            top: "150px",
-            right: '7%',
-            bottom: '7%',
-            containLabel: true
-        },
-        tooltip: {
-            // trigger: 'axis',
-            showDelay: 0,
-            axisPointer: {
-                show: true
-            }
-        },
-        dataZoom: [
-            {
-                type: 'inside'
-            }
-        ],
-        toolbox: {
-            feature: {
-                dataZoom: {},
-                brush: {
-                    type: ['rect', 'polygon', 'clear']
-                }
-            }
-        },
-        brush: {},
-        legend: {
-            left: 'center',
-            orient: "horizontal",
-            top: 50
-        },
-        xAxis: [
-            {
-                type: 'value'
-            }
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                scale: true,
-                splitLine: {
-                    show: false
-                }
-            }
-        ],
-        series: dataSeries
-    };
-
-    const chartDom = document.getElementById('cluster-chart')!;
-    const myChart = echarts.init(chartDom);
-
-    myChart.setOption(option);
-    window.addEventListener('resize', () => myChart.resize());
-}
-</script>
\ No newline at end of file
diff --git a/src/components/results/charts/TopicClusters3D.vue b/src/components/results/charts/TopicClusters3D.vue
index 3d0bb52..6760fe9 100644
--- a/src/components/results/charts/TopicClusters3D.vue
+++ b/src/components/results/charts/TopicClusters3D.vue
@@ -10,18 +10,18 @@ import { onMounted, watch } from 'vue';
 const resultsStore = useResultsStore();
 
 onMounted(() => {
-    if (resultsStore.topicDiscoveryResultsAvailable) {
+    if (resultsStore.clusteringResultsAvailable) {
         plotDiscoveredTopics();
     }
     else {
-        watch(() => resultsStore.topicDiscoveryResultsAvailable, () => {
+        watch(() => resultsStore.clusteringResultsAvailable, () => {
             plotDiscoveredTopics();
         });
     }
 });
 
 function plotDiscoveredTopics() {
-    const clusters = resultsStore.topicDiscoveryResults?.clusters!;
+    const clusters = resultsStore.clusteringResults!;
     const miscIndexes = clusters.topic_labels.map((label, index) => label === -1 || index > 9 ? index : -1)
         .filter(index => index !== -1);
 
@@ -37,7 +37,7 @@ function plotDiscoveredTopics() {
         }
 
         dataSeries.push({
-            name: resultsStore.topicDiscoveryResults?.topics![i]!,
+            name: resultsStore.results?.results?.topic_discovery_results?.topics![i]!,
             type: 'scatter3D',
             data: points
         })
@@ -67,6 +67,9 @@ function plotDiscoveredTopics() {
             }
         },
         legend: {
+            selected: {
+                "Miscellaneous": false
+            },
             left: 'center',
             orient: "horizontal",
             top: 50
diff --git a/src/stores/results.ts b/src/stores/results.ts
index aa17844..fb2c7c8 100755
--- a/src/stores/results.ts
+++ b/src/stores/results.ts
@@ -9,13 +9,15 @@ export const useResultsStore = defineStore('results', () => {
 
     const searchResultsAvailable = computed<boolean>(() => results.value?.results?.search_results != null);
     const trendResultsAvailable = computed<boolean>(() => results.value?.results?.trend_results != null);
-    const topicDiscoveryResultsAvailable = computed<boolean>(() => results.value?.results?.topic_discovery_results != null);
+    const clusteringResultsAvailable = computed<boolean>(() => results.value?.results?.topic_discovery_results?.clusters != null);
+    const topicsOverTimeResultsAvailable = computed<boolean>(() => results.value?.results?.topic_discovery_results?.topics_over_time != null);
     const citationResultsAvailable = computed<boolean>(() => results.value?.results?.citation_results != null);
 
     const searchResults = computed(() => results.value?.results?.search_results);
     const trendResults = computed(() => results.value?.results?.trend_results);
     const citationResults = computed(() => results.value?.results?.citation_results);
-    const topicDiscoveryResults = computed(() => results.value?.results?.topic_discovery_results);
+    const clusteringResults = computed(() => results.value?.results?.topic_discovery_results?.clusters);
+    const topicsOverTimeResults = computed(() => results.value?.results?.topic_discovery_results?.topics_over_time);
 
     const queryFinished = computed<boolean>(() => results.value?.progress === QueryProgress.Finished || results.value?.progress === QueryProgress.Failed);
 
@@ -40,11 +42,13 @@ export const useResultsStore = defineStore('results', () => {
         searchResultsAvailable,
         trendResultsAvailable,
         citationResultsAvailable,
-        topicDiscoveryResultsAvailable,
+        clusteringResultsAvailable,
+        topicsOverTimeResultsAvailable,
         searchResults,
         trendResults,
         citationResults,
-        topicDiscoveryResults,
+        clusteringResults,
+        topicsOverTimeResults,
         results,
         resultsLoading,
         queryFinished,
diff --git a/src/stores/stats.ts b/src/stores/stats.ts
index b5cda0c..6d53909 100755
--- a/src/stores/stats.ts
+++ b/src/stores/stats.ts
@@ -1,14 +1,15 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
 import type { DataStatistics } from '@/types/api-models'
+import { getStatistics } from '@/utils/api';
 
 export const useStatsStore = defineStore('statistics', () => {
     const stats = ref<DataStatistics | null>(null)
 
-    async function getStatistics() {
-        const response = await fetch("http://127.0.0.1:8000/api/statistics");
-        stats.value = await response.json();
+    async function _getStatistics() {
+        const statistics = await getStatistics();
+        stats.value = statistics;
     }
 
-    return { stats, getStatistics }
+    return { stats, getStatistics: _getStatistics }
 });
diff --git a/src/types/api-models.ts b/src/types/api-models.ts
index ac0d396..9deb3bd 100755
--- a/src/types/api-models.ts
+++ b/src/types/api-models.ts
@@ -24,9 +24,9 @@ export enum QueryProgress {
     DataRetrieval = 2,
     AnalysingTrends = 3,
     GeneratingDescription = 4,
-    DiscoveringTopics = 5,
+    CitationRetrieval = 5,
     ClusteringTopics = 6,
-    CitationRetrieval = 7,
+    TopicOverTime = 7,
     Finished = 8,
     Failed = 9
 }
diff --git a/src/utils/api.ts b/src/utils/api.ts
index d899882..416061f 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -1,4 +1,4 @@
-import { QueryType, type QueryEntry, type QuerySummary } from "@/types/api-models";
+import { QueryType, type QueryEntry, type QuerySummary, type DataStatistics } from "@/types/api-models";
 
 let api_base: string;
 
@@ -36,4 +36,9 @@ export async function getSession(uuid: string): Promise<QueryEntry> {
 export async function getSessionSummary(uuid: string): Promise<QuerySummary> {
     const response = await fetch(`${api_base}/queries/${uuid}/summary`);
     return response.json();
+}
+
+export async function getStatistics(): Promise<DataStatistics> {
+    const response = await fetch(`${api_base}/statistics`);
+    return response.json();
 }
\ No newline at end of file
diff --git a/src/views/FilterView.vue b/src/views/FilterView.vue
index b0f6023..250a491 100755
--- a/src/views/FilterView.vue
+++ b/src/views/FilterView.vue
@@ -217,8 +217,8 @@ const router = useRouter();
 const minYear = 1980;
 const maxYear = 2022;
 const exampleKeywords = [
-    ["machine learning deep learning"],
-    ["blockchain", "finance data"],
+    ["machine learning", "deep learning"],
+    ["blockchain"],
     ["Time-series based academic trend and downtrend detection"]
 ];