enhance(packages/shared-components): replace tagcloud with wordcloud and filter user input (#4947)

Co-authored-by: Roland Schlaefli <rolandschlaefli@gmail.com>
Co-authored-by: TheHummel <jannisalsbach@gmail.com>

Author: 3 people

.github/workflows/check-types.yml

@@ -49,6 +49,8 @@ jobs:
           pnpm run build
           cd ../hatchet
           pnpm run build
+          cd ../word-cloud
+          pnpm run build
 
       - name: Check the typescript types of all packages and apps
         shell: bash

.lintstagedrc.mjs

@@ -1,3 +1,17 @@
+import { lstatSync } from 'fs'
+
 export default {
-  '*': ['prettier --config .prettierrc.mjs --check'],
+  '*': (stagedFiles) => {
+    const nonSymlinks = stagedFiles.filter((f) => {
+      try {
+        return !lstatSync(f).isSymbolicLink()
+      } catch {
+        return false
+      }
+    })
+    if (nonSymlinks.length === 0) return []
+    return [
+      `prettier --config .prettierrc.mjs --ignore-unknown --check ${nonSymlinks.join(' ')}`,
+    ]
+  },
 }

.prettierignore

@@ -13,6 +13,10 @@ email/
 project/
 .agents/skills/**/.agnix.toml
 
+# Symlinks
+.github/skills
+CLAUDE.md
+
 ops.schema.json
 ops.ts
 schema.graphql
@@ -52,3 +56,12 @@ pnpm-lock.yaml
 # Dumps
 *.tar
 *.gpg
+
+# Unsupported file types
+**/*.toml
+**/*.gitignore
+**/Dockerfile*
+**/*.prisma
+**/*.py
+**/*.txt
+**/.codex/

.versionrc.js

@@ -21,6 +21,7 @@ module.exports = {
     'packages/lti/',
     'packages/prisma/',
     'packages/markdown/',
+    'packages/word-cloud',
     'packages/shared-components',
     'packages/next-config',
     'packages/i18n',

apps/frontend-manage/src/components/evaluation/ElementChart.tsx

@@ -2,10 +2,11 @@ import { ElementInstanceEvaluation } from '@klicker-uzh/graphql/dist/ops'
 import ElementBarChart from '@klicker-uzh/shared-components/src/charts/ElementBarChart'
 import ElementHistogram from '@klicker-uzh/shared-components/src/charts/ElementHistogram'
 import ElementTableChart from '@klicker-uzh/shared-components/src/charts/ElementTableChart'
-import ElementWordcloud from '@klicker-uzh/shared-components/src/charts/ElementWordcloud'
+import ElementWordCloud from '@klicker-uzh/shared-components/src/charts/ElementWordcloud'
 import { ChartType } from '@klicker-uzh/shared-components/src/constants'
 import EvaluationExplanation from '@klicker-uzh/shared-components/src/evaluation/EvaluationExplanation'
 import { useTranslations } from 'next-intl'
+import { useRouter } from 'next/router'
 import React from 'react'
 import { twMerge } from 'tailwind-merge'
 import { ShowStatisticsType } from './elements/NREvaluation'
@@ -31,6 +32,7 @@ function ElementChart({
   className,
 }: ElementChartProps): React.ReactElement {
   const t = useTranslations()
+  const router = useRouter()
 
   if (chartType === ChartType.TABLE) {
     return (
@@ -45,9 +47,8 @@ function ElementChart({
     )
   } else if (chartType === ChartType.WORD_CLOUD) {
     return (
-      <ElementWordcloud
+      <ElementWordCloud
         instance={instanceEvaluation}
-        showSolution={showSolution}
         showExplanation={showExplanation}
         textSize={{
           text: textSize.text,
@@ -56,6 +57,7 @@ function ElementChart({
           max: textSize.max,
         }}
         className={className}
+        locale={router.locale}
       />
     )
   } else if (chartType === ChartType.BAR_CHART) {

apps/frontend-manage/src/components/evaluation/ElementEvaluation.tsx

@@ -213,6 +213,7 @@ function ElementEvaluation({
             isAssessmentEnabled={isAssessmentEnabled}
             pinCode={pinCode}
             type={type}
+            // TODO: word cloud for case study?
           />
         )}
 
@@ -232,6 +233,7 @@ function ElementEvaluation({
             key={currentInstance.id}
             evaluation={currentInstance}
             textSize={textSize}
+            // TODO: word cloud for content?
           />
         )}
       </div>

cypress/cypress.config.ts

@@ -2,6 +2,7 @@ import { prisma } from '@klicker-uzh/prisma'
 import {
   AchievementType,
   CourseAuthType,
+  ElementBlockStatus,
   ElementType,
   ObjectAccess,
   PermissionLevel,
@@ -21,6 +22,7 @@ import {
   ElementOptionsSelection,
 } from '@klicker-uzh/types'
 import bcrypt from 'bcryptjs'
+import { createHash } from 'crypto'
 import { defineConfig } from 'cypress'
 import cypressSplit from 'cypress-split'
 // import cypressCodeCoverage from '@cypress/code-coverage/task'
@@ -1708,6 +1710,132 @@ export default defineConfig({
             throw error
           }
         },
+        async seedWordCloudLiveQuizResponses({
+          freeTextAnswer,
+          freeTextTitle,
+          numericalAnswer,
+          numericalTitle,
+          quizName,
+          secondFreeTextAnswer,
+          secondFreeTextTitle,
+        }: {
+          freeTextAnswer: string
+          freeTextTitle: string
+          numericalAnswer: string
+          numericalTitle: string
+          quizName: string
+          secondFreeTextAnswer: string
+          secondFreeTextTitle: string
+        }) {
+          try {
+            const liveQuiz = await prisma.liveQuiz.findFirst({
+              where: { name: quizName, isDeleted: false },
+              include: {
+                blocks: {
+                  include: { elements: true },
+                  orderBy: { order: 'asc' },
+                },
+              },
+            })
+
+            if (!liveQuiz) {
+              throw new Error(`Live quiz ${quizName} not found`)
+            }
+
+            const block = liveQuiz.blocks[0]
+            if (!block) {
+              throw new Error(`Live quiz ${quizName} has no blocks`)
+            }
+
+            const instances = liveQuiz.blocks.flatMap((block) => block.elements)
+            const getInstance = (title: string, type: ElementType) => {
+              const instance = instances.find(
+                (element) =>
+                  element.elementType === type &&
+                  typeof element.elementData === 'object' &&
+                  element.elementData !== null &&
+                  'name' in element.elementData &&
+                  element.elementData.name === title
+              )
+
+              if (!instance) {
+                throw new Error(
+                  `Instance ${title} (${type}) not found in live quiz ${quizName}`
+                )
+              }
+
+              return instance
+            }
+
+            const numericalInstance = getInstance(
+              numericalTitle,
+              ElementType.NUMERICAL
+            )
+            const freeTextInstance = getInstance(
+              freeTextTitle,
+              ElementType.FREE_TEXT
+            )
+            const secondFreeTextInstance = getInstance(
+              secondFreeTextTitle,
+              ElementType.FREE_TEXT
+            )
+
+            const openResults = (value: string, normalize: boolean) => {
+              const normalizedValue = normalize
+                ? value.trim().toLowerCase()
+                : String(parseFloat(value))
+              const hash = createHash('md5')
+                .update(normalizedValue)
+                .digest('hex')
+
+              return {
+                responses: {
+                  [hash]: {
+                    value: normalizedValue,
+                    count: 1,
+                  },
+                },
+                total: 1,
+              }
+            }
+
+            await prisma.$transaction([
+              prisma.elementInstance.update({
+                where: { id: numericalInstance.id },
+                data: {
+                  anonymousResults: openResults(numericalAnswer, false),
+                },
+              }),
+              prisma.elementInstance.update({
+                where: { id: freeTextInstance.id },
+                data: {
+                  anonymousResults: openResults(freeTextAnswer, true),
+                },
+              }),
+              prisma.elementInstance.update({
+                where: { id: secondFreeTextInstance.id },
+                data: {
+                  anonymousResults: openResults(secondFreeTextAnswer, true),
+                },
+              }),
+              prisma.elementBlock.update({
+                where: { id: block.id },
+                data: {
+                  closedAt: new Date(),
+                  status: ElementBlockStatus.EXECUTED,
+                },
+              }),
+              prisma.liveQuiz.update({
+                where: { id: liveQuiz.id },
+                data: { activeBlockId: null },
+              }),
+            ])
+
+            return true
+          } catch (error) {
+            throw error
+          }
+        },
         async deleteLiveQuiz({ name }: { name: string }) {
           try {
             const liveQuiz = await prisma.liveQuiz.findFirst({