Add filtering to wordcloud

.github/workflows/husky.yml

@@ -28,5 +28,5 @@ jobs:
           node-version: 16
       - name: install dependencies
         run: pnpm install
-      - run: pnpm exec prettier --write .
+      - run: pnpm exec prettier -c .
       - run: pnpm exec eslint .

components/charts/WordCloud.vue

@@ -1,5 +1,20 @@
 <template>
-  <div ref="chartdiv"></div>
+  <div>
+    <div ref="chartdiv"></div>
+    <v-row data-html2canvas-ignore remove-height-in-html2-canvas>
+      <v-text-field
+        v-model="additionalExcludes"
+        :label="$t('excludeWords')"
+        :hint="$t('excludeWordsHint')"
+        clearable
+        @keydown.enter.prevent="updateGraph"
+        @click:clear="updateGraph"
+      ></v-text-field>
+      <v-btn class="btn-color" dark @click="updateGraph">
+        <v-icon>mdi-arrow-right</v-icon>
+      </v-btn>
+    </v-row>
+  </div>
 </template>
 
 <script>
@@ -33,6 +48,7 @@ export default {
     return {
       chart: null,
       series: null,
+      additionalExcludes: "",
     };
   },
   methods: {
@@ -76,6 +92,62 @@ export default {
   beforeDestroy: function () {
     this.chart.dispose();
   },
+  methods: {
+    /** Updates graph by, getting data, and processing it
+     *
+     * filters out words from user input as well
+     * **/
+    async updateGraph() {
+      // this is a list of [{word: String, freq: String}, ...]
+      const allWords = await this.chartdata.getAllWords();
+
+      if (!this.additionalExcludes) {
+        this.series.data = allWords;
+        return;
+      }
+
+      const regex = this.buildRegex();
+
+      //remove everything from all words, that matches
+      this.series.data = allWords.filter((item) => !regex.test(item.word));
+    },
+    buildRegex() {
+      // Regex to detect if a string contains regex metacharacters
+      const regexMetaChars = /[.*+?^${}()|[\]\\]/;
+
+      function isValidRegex(pattern) {
+        if (regexMetaChars.test(pattern)) {
+          try {
+            new RegExp(pattern);
+            return true;
+          } catch (e) {
+            return false;
+          }
+        } else {
+          return false;
+        }
+      }
+
+      // Function to escape regex special characters if the string is intended to be a literal
+      function escapeRegexCharacters(string) {
+        // Escape only if the string does not contain regex metacharacters
+        // otherwise it needs to be an exact match
+        return isValidRegex(string)
+          ? string
+          : `^${string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`;
+      }
+
+      // Filter out empty strings and escape regex special characters if needed
+      const regexParts = this.additionalExcludes
+        .split(" ")
+        .filter((s) => s !== "")
+        .map(escapeRegexCharacters);
+
+      // Join the parts to create a single regex pattern
+      const regexPattern = regexParts.join("|");
+      return new RegExp(regexPattern);
+    },
+  },
 };
 </script>
 

utils/transformChatData.js

@@ -468,8 +468,9 @@ export class Chat {
       });
   }
 
-  getAllWords() {
-    return this._allWords.then((x) => x.slice(0, this._maxWordsWordCloud));
+  async getAllWords() {
+    let x = await this._allWords;
+    return x.slice(0, this._maxWordsWordCloud);
   }
 
   // New method to extract and count emojis, limited to 1000 emojis

utils/translations.js

@@ -204,6 +204,9 @@ export const messages = {
     downloadResults: "Download Results",
     lookingFor: "Looking for",
     pdfDownload: "PDF download",
+    excludeWords: "Exclude Words",
+    excludeWordsHint:
+      "Should be space separated list. RegEx is also supported.",
     loadingMedia:
       "Loading your <span>images</span>, <span>videos</span> and <span>documents</span>",
     downloadFreePreviewPDF: "Download <b>free preview</b> PDF",