From f6826059cba29fb6e02122c32795c1d2f735328a Mon Sep 17 00:00:00 2001
From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com>
Date: Tue, 28 Nov 2023 14:34:50 +0100
Subject: [PATCH] refactor (lda chart): cleanup

---
 .../vega-lite/component/lda-chart/LdaChart.js | 70 ++++++++++---------
 .../component/lda-chart/LdaChartView.js       | 26 +++----
 2 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/src/app/js/formats/vega-lite/component/lda-chart/LdaChart.js b/src/app/js/formats/vega-lite/component/lda-chart/LdaChart.js
index bc1ca9d41..4211c20ad 100644
--- a/src/app/js/formats/vega-lite/component/lda-chart/LdaChart.js
+++ b/src/app/js/formats/vega-lite/component/lda-chart/LdaChart.js
@@ -1,46 +1,48 @@
 import { CustomActionVegaLite } from '../vega-lite-component';
 import { VEGA_LITE_DATA_INJECT_TYPE_A } from '../../../chartsUtils';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 const LdaChart = ({ data, title, colors }) => {
-    const spec = {
-        $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
-        config: { legend: { disable: true } },
-        title: title,
-        encoding: {
-            y: { field: 'word', type: 'nominal', sort: null },
-            x: { field: 'word_weight', type: 'quantitative' },
-        },
-        layer: [
-            {
-                mark: 'bar',
-                encoding: {
-                    color: {
-                        field: 'word_weight',
-                        scale: { range: colors.split(' ') },
-                    },
-                },
+    const spec = useMemo(() => {
+        return {
+            $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+            config: { legend: { disable: true } },
+            title: title,
+            encoding: {
+                y: { field: 'word', type: 'nominal', sort: null },
+                x: { field: 'word_weight', type: 'quantitative' },
             },
-            {
-                mark: {
-                    type: 'text',
-                    align: 'left',
-                    baseline: 'middle',
-                    dx: 3,
+            layer: [
+                {
+                    mark: 'bar',
+                    encoding: {
+                        color: {
+                            field: 'word_weight',
+                            scale: { range: colors.split(' ') },
+                        },
+                    },
                 },
-                encoding: {
-                    text: {
-                        field: 'word_weight',
-                        type: 'quantitative',
-                        format: '.2f',
+                {
+                    mark: {
+                        type: 'text',
+                        align: 'left',
+                        baseline: 'middle',
+                        dx: 3,
+                    },
+                    encoding: {
+                        text: {
+                            field: 'word_weight',
+                            type: 'quantitative',
+                            format: '.2f',
+                        },
                     },
                 },
-            },
-        ],
-        width: 'container',
-        height: { step: 20 },
-    };
+            ],
+            width: 'container',
+            height: { step: 20 },
+        };
+    }, [data, title, colors]);
     return (
         <CustomActionVegaLite
             spec={spec}
diff --git a/src/app/js/formats/vega-lite/component/lda-chart/LdaChartView.js b/src/app/js/formats/vega-lite/component/lda-chart/LdaChartView.js
index 784136736..560454431 100644
--- a/src/app/js/formats/vega-lite/component/lda-chart/LdaChartView.js
+++ b/src/app/js/formats/vega-lite/component/lda-chart/LdaChartView.js
@@ -37,24 +37,26 @@ const LdaChartView = props => {
              */
             const topicsValues = rawValue.value.topics;
             Object.entries(topicsValues).forEach(entry => {
-                const key = entry[0];
+                const topic = entry[0];
                 /**
                  * @type {{word: string, word_weight: string}[]}
                  */
-                let current = entry[1].words;
-                const previous = values.get(key);
+                let currentWords = entry[1].words;
+                const previousWords = values.get(topic);
 
-                if (previous) {
-                    current = current.map(v => {
-                        const pre = previous.find(preV => preV.word === v.word);
+                if (previousWords) {
+                    currentWords = currentWords.map(word => {
+                        const preWord = previousWords.find(
+                            preV => preV.word === word.word,
+                        );
                         return {
-                            word: v.word,
+                            word: word.word,
                             word_weight:
-                                parseFloat(v.word_weight) +
-                                parseFloat(pre.word_weight),
+                                parseFloat(word.word_weight) +
+                                parseFloat(preWord.word_weight),
                         };
                     });
-                    current.sort((a, b) => {
+                    currentWords.sort((a, b) => {
                         if (a.word_weight > b.word_weight) {
                             return -1;
                         }
@@ -65,7 +67,7 @@ const LdaChartView = props => {
                     });
                 }
 
-                values.set(key, current);
+                values.set(topic, currentWords);
             });
         }
 
@@ -73,7 +75,7 @@ const LdaChartView = props => {
             values: Object.fromEntries(values),
             topics,
         };
-    }, [props]);
+    }, [props.data]);
 
     return (
         <div style={{ margin: '12px' }}>