From 89803a7a9a7d9fb9180b0aa7ab3c15cb4b67c73a Mon Sep 17 00:00:00 2001
From: Nico Reinartz <nico.reinartz@rwth-aachen.de>
Date: Wed, 15 Nov 2023 20:13:17 +0100
Subject: [PATCH] feat: 3d topic cloud

---
 src/components/results/Topics.vue             |  4 +-
 .../results/charts/TopicClusters3D.vue        | 86 +++++++++++++++++++
 src/types/api-models.ts                       |  1 +
 src/utils/echarts.ts                          | 14 +--
 4 files changed, 96 insertions(+), 9 deletions(-)
 create mode 100644 src/components/results/charts/TopicClusters3D.vue

diff --git a/src/components/results/Topics.vue b/src/components/results/Topics.vue
index 167bfb0..3422b05 100644
--- a/src/components/results/Topics.vue
+++ b/src/components/results/Topics.vue
@@ -5,7 +5,7 @@
                 <div class="card h-100 shadow-sm" style="min-height: 70vh">
                     <div class="card-body">
                         <template v-if="resultsStore.topicDiscoveryResultsAvailable">
-                            <TopicClusters />
+                            <TopicClusters3D />
                         </template>
                         <Loader v-else :message="loadingMessage" :is-intermediate="loadingMessage === undefined" />
                     </div>
@@ -68,7 +68,7 @@ import Loader from '../common/Loader.vue';
 import { computed, ref } from 'vue';
 import { QueryProgress } from '@/types/api-models';
 import TopicChart from './charts/TopicChart.vue';
-import TopicClusters from './charts/TopicClusters.vue';
+import TopicClusters3D from './charts/TopicClusters3D.vue';
 
 const resultsStore = useResultsStore();
 const activeTab = ref(0);
diff --git a/src/components/results/charts/TopicClusters3D.vue b/src/components/results/charts/TopicClusters3D.vue
new file mode 100644
index 0000000..3d0bb52
--- /dev/null
+++ b/src/components/results/charts/TopicClusters3D.vue
@@ -0,0 +1,86 @@
+<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 = [];
+    const dataSeries = []
+
+    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], clusters.points_z[j]]);
+            }
+        }
+
+        dataSeries.push({
+            name: resultsStore.topicDiscoveryResults?.topics![i]!,
+            type: 'scatter3D',
+            data: points
+        })
+    }
+
+    dataSeries.push({
+        name: "Miscellaneous",
+        type: 'scatter3D',
+        data: miscIndexes.map(index => [clusters.points_x[index], clusters.points_y[index], clusters.points_z[index]]),
+        itemStyle: {
+            color: 'rgba(0, 0, 0, 0.1)'
+        },
+    })
+
+    const option = {
+        title: {
+            text: 'Topic clusters'
+        },
+        grid3D: {
+            top: 150
+        },
+        tooltip: {
+            // trigger: 'axis',
+            showDelay: 0,
+            axisPointer: {
+                show: true
+            }
+        },
+        legend: {
+            left: 'center',
+            orient: "horizontal",
+            top: 50
+        },
+        xAxis3D: { type: 'value' },
+        yAxis3D: { type: 'value' },
+        zAxis3D: { type: 'value' },
+        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/types/api-models.ts b/src/types/api-models.ts
index e8637f6..ac0d396 100755
--- a/src/types/api-models.ts
+++ b/src/types/api-models.ts
@@ -74,6 +74,7 @@ interface DiscoveredTopic {
 interface ClusteringResults {
     points_x: number[];
     points_y: number[];
+    points_z: number[];
     topic_labels: number[];
 }
 
diff --git a/src/utils/echarts.ts b/src/utils/echarts.ts
index a88f446..6c0ab95 100644
--- a/src/utils/echarts.ts
+++ b/src/utils/echarts.ts
@@ -13,12 +13,12 @@ import {
     ToolboxComponent,
     VisualMapComponent,
     BrushComponent,
-    MarkLineComponent,
-    MarkAreaComponent
+    MarkLineComponent
 } from 'echarts/components';
 
-import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
-import { ScatterGLChart } from 'echarts-gl/charts';
+import { SVGRenderer } from 'echarts/renderers';
+import { Scatter3DChart } from 'echarts-gl/charts';
+import { Grid3DComponent } from 'echarts-gl/components';
 
 echarts.use([
     BarChart,
@@ -33,11 +33,11 @@ echarts.use([
     ToolboxComponent,
     VisualMapComponent,
     BrushComponent,
-    MarkAreaComponent,
     MarkLineComponent,
     UniversalTransition,
-    ScatterGLChart,
-    CanvasRenderer
+    Scatter3DChart,
+    Grid3DComponent,
+    SVGRenderer
 ]);
 
 export default echarts;
\ No newline at end of file