feat: adjustments after first test

rwth-acis · Nov 16, 2023 · 93a801f · 93a801f
1 parent 9873459
commit 93a801f
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 206 deletions.
diff --git 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>
diff --git a/src/components/results/charts/TopicChart.vue b/src/components/results/charts/TopicChart.vue
@@ -10,24 +10,24 @@ import { onMounted, watch } from 'vue';
 const resultsStore = useResultsStore();
 
 onMounted(() => {
-    if (resultsStore.topicDiscoveryResultsAvailable) {
+    if (resultsStore.topicsOverTimeResultsAvailable) {
         plotDiscoveredTopics();
     }
     else {
-        watch(() => resultsStore.topicDiscoveryResultsAvailable, () => {
+        watch(() => resultsStore.topicsOverTimeResultsAvailable, () => {
             plotDiscoveredTopics();
         });
     }
 });
 
 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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();
 }
diff --git 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"]
 ];