wip: resolve ambiguous types through graphql type information

uzh-bf · Oct 20, 2024 · c15a58f · c15a58f
1 parent ac09134
commit c15a58f
Show file tree

Hide file tree

Showing 29 changed files with 305 additions and 335 deletions.
diff --git a/apps/frontend-manage/src/components/evaluation/BarChart.tsx b/apps/frontend-manage/src/components/evaluation/BarChart.tsx
@@ -1,12 +1,7 @@
-import {
-  Choice,
-  ChoicesQuestionData,
-  InstanceResult,
-} from '@klicker-uzh/graphql/dist/ops'
+import { Choice, InstanceResult } from '@klicker-uzh/graphql/dist/ops'
 import {
   CHART_COLORS,
   CHART_SOLUTION_COLORS,
-  QUESTION_GROUPS,
   SMALL_BAR_THRESHOLD,
 } from '@klicker-uzh/shared-components/src/constants'
 import { useTranslations } from 'next-intl'
@@ -37,6 +32,7 @@ function BarChart({
   const t = useTranslations()
 
   // add labelIn and labelOut attributes to data, set labelIn to votes if votes/totalResponses > SMALL_BAR_THRESHOLD and set labelOut to votes otherwise
+  const questionData = data.questionData
   const dataWithLabels = useMemo(() => {
     const labeledData = Object.values(
       data.results as Record<string, { count: number; value: string }>
@@ -50,7 +46,7 @@ function BarChart({
           ? result.count
           : undefined
       const xLabel =
-        data.questionData.type === 'NUMERICAL'
+        questionData.type === 'NUMERICAL'
           ? Math.round(parseFloat(result.value) * 100) / 100
           : String.fromCharCode(Number(idx) + 65)
       return { count: result.count, labelIn, labelOut, xLabel }
@@ -65,7 +61,7 @@ function BarChart({
             xLabel: '0',
           },
         ]
-  }, [data.results, data.participants, data.questionData.type])
+  }, [data.results, data.participants, questionData.type])
 
   return (
     <ResponsiveContainer className="pb-2" height="99%" width="99%">
@@ -129,8 +125,8 @@ function BarChart({
             className={textSize.text3Xl}
             id="bar-chart-block"
           />
-          {QUESTION_GROUPS.CHOICES.includes(data.questionData.type) &&
-            (data.questionData as ChoicesQuestionData).options.choices.map(
+          {questionData.__typename === 'ChoicesQuestionData' &&
+            questionData.options.choices.map(
               (choice: Choice, index: number): React.ReactElement => (
                 <Cell
                   fill={

diff --git a/apps/frontend-manage/src/components/evaluation/ElementChart.tsx b/apps/frontend-manage/src/components/evaluation/ElementChart.tsx
@@ -1,7 +1,4 @@
-import {
-  ElementInstanceEvaluation,
-  NumericalElementInstanceEvaluation,
-} from '@klicker-uzh/graphql/dist/ops'
+import { ElementInstanceEvaluation } from '@klicker-uzh/graphql/dist/ops'
 import { ChartType } from '@klicker-uzh/shared-components/src/constants'
 import { useTranslations } from 'next-intl'
 import React from 'react'
@@ -34,10 +31,13 @@ function ElementChart({
         textSize={textSize.text}
       />
     )
-  } else if (chartType === ChartType.HISTOGRAM) {
+  } else if (
+    chartType === ChartType.HISTOGRAM &&
+    instanceEvaluation.__typename === 'NumericalElementInstanceEvaluation'
+  ) {
     return (
       <ElementHistogram
-        instance={instanceEvaluation as NumericalElementInstanceEvaluation}
+        instance={instanceEvaluation}
         showSolution={{ general: showSolution }}
         textSize={textSize.text}
       />

diff --git a/apps/frontend-manage/src/components/evaluation/ElementEvaluation.tsx b/apps/frontend-manage/src/components/evaluation/ElementEvaluation.tsx
@@ -1,16 +1,5 @@
-import {
-  ChoicesElementInstanceEvaluation,
-  ContentElementInstanceEvaluation,
-  ElementInstanceEvaluation,
-  ElementType,
-  FlashcardElementInstanceEvaluation,
-  FreeElementInstanceEvaluation,
-  NumericalElementInstanceEvaluation,
-} from '@klicker-uzh/graphql/dist/ops'
-import {
-  ChartType,
-  QUESTION_GROUPS,
-} from '@klicker-uzh/shared-components/src/constants'
+import { ElementInstanceEvaluation } from '@klicker-uzh/graphql/dist/ops'
+import { ChartType } from '@klicker-uzh/shared-components/src/constants'
 import { twMerge } from 'tailwind-merge'
 import CTEvaluation from './elements/CTEvaluation'
 import ChoicesEvaluation from './elements/ChoicesEvaluation'
@@ -47,45 +36,37 @@ function ElementEvaluation({
         />
       </div>
       <div className="flex min-h-0 flex-1 flex-col md:flex-row">
-        {QUESTION_GROUPS.CHOICES.includes(currentInstance.type) && (
+        {currentInstance.__typename === 'ChoicesElementInstanceEvaluation' && (
           <ChoicesEvaluation
-            instanceEvaluation={
-              currentInstance as ChoicesElementInstanceEvaluation
-            }
+            instanceEvaluation={currentInstance}
             textSize={textSize}
             chartType={chartType}
             showSolution={showSolution}
           />
         )}
-        {currentInstance.type === ElementType.Numerical && (
+        {currentInstance.__typename ===
+          'NumericalElementInstanceEvaluation' && (
           <NREvaluation
-            instanceEvaluation={
-              currentInstance as NumericalElementInstanceEvaluation
-            }
+            instanceEvaluation={currentInstance}
             textSize={textSize}
             chartType={chartType}
             showSolution={showSolution}
           />
         )}
-        {currentInstance.type === ElementType.FreeText && (
+        {currentInstance.__typename === 'FreeElementInstanceEvaluation' && (
           <FTEvaluation
-            instanceEvaluation={
-              currentInstance as FreeElementInstanceEvaluation
-            }
+            instanceEvaluation={currentInstance}
             textSize={textSize}
             chartType={chartType}
             showSolution={showSolution}
           />
         )}
-        {currentInstance.type === ElementType.Flashcard && (
-          <FCEvaluation
-            evaluation={currentInstance as FlashcardElementInstanceEvaluation}
-          />
+        {currentInstance.__typename ===
+          'FlashcardElementInstanceEvaluation' && (
+          <FCEvaluation evaluation={currentInstance} />
         )}
-        {currentInstance.type === ElementType.Content && (
-          <CTEvaluation
-            evaluation={currentInstance as ContentElementInstanceEvaluation}
-          />
+        {currentInstance.__typename === 'ContentElementInstanceEvaluation' && (
+          <CTEvaluation evaluation={currentInstance} />
         )}
       </div>
     </div>

diff --git a/apps/frontend-manage/src/components/evaluation/TableChart.tsx b/apps/frontend-manage/src/components/evaluation/TableChart.tsx
@@ -2,7 +2,6 @@ import { faCheck, faRepeat, faX } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   Choice,
-  ChoicesQuestionData,
   FreeTextQuestionData,
   InstanceResult,
   NumericalQuestionData,
@@ -33,10 +32,11 @@ function TableChart({
 }: TableChartProps): React.ReactElement {
   const t = useTranslations()
   const ref = useRef<{ reset: () => void }>(null)
+  const questionData = data.questionData
 
   const tableData = useMemo(() => {
-    if (QUESTION_GROUPS.CHOICES.includes(data.questionData.type)) {
-      return (data.questionData as ChoicesQuestionData).options.choices.map(
+    if (questionData.__typename === 'ChoicesQuestionData') {
+      return questionData.options.choices.map(
         (choice: Choice, index: number) => {
           return {
             count: data.results[index].count,
@@ -135,12 +135,12 @@ function TableChart({
           body: `${textSize}`,
         }}
         defaultSortField={
-          !QUESTION_GROUPS.CHOICES.includes(data.questionData.type)
+          !QUESTION_GROUPS.CHOICES.includes(questionData.type)
             ? 'count'
             : undefined
         }
         defaultSortOrder={
-          !QUESTION_GROUPS.CHOICES.includes(data.questionData.type)
+          !QUESTION_GROUPS.CHOICES.includes(questionData.type)
             ? 'desc'
             : undefined
         }

diff --git a/apps/frontend-manage/src/components/evaluation/charts/ElementBarChart.tsx b/apps/frontend-manage/src/components/evaluation/charts/ElementBarChart.tsx
@@ -1,12 +1,10 @@
 import {
-  ChoicesElementInstanceEvaluation,
   ElementInstanceEvaluation,
   ElementType,
 } from '@klicker-uzh/graphql/dist/ops'
 import {
   CHART_COLORS,
   CHART_SOLUTION_COLORS,
-  QUESTION_GROUPS,
 } from '@klicker-uzh/shared-components/src/constants'
 import { UserNotification } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
@@ -114,21 +112,19 @@ function ElementBarChart({
             className={textSize.text3Xl}
             id="bar-chart-block"
           />
-          {QUESTION_GROUPS.CHOICES.includes(instance.type) &&
-            (instance as ChoicesElementInstanceEvaluation).results.choices.map(
-              (choice, index) => (
-                <Cell
-                  fill={
-                    showSolution
-                      ? choice.correct
-                        ? CHART_SOLUTION_COLORS.correct
-                        : CHART_SOLUTION_COLORS.incorrect
-                      : CHART_COLORS[index % 12]
-                  }
-                  key={index}
-                />
-              )
-            )}
+          {instance.__typename === 'ChoicesElementInstanceEvaluation' &&
+            instance.results.choices.map((choice, index) => (
+              <Cell
+                fill={
+                  showSolution
+                    ? choice.correct
+                      ? CHART_SOLUTION_COLORS.correct
+                      : CHART_SOLUTION_COLORS.incorrect
+                    : CHART_COLORS[index % 12]
+                }
+                key={index}
+              />
+            ))}
         </Bar>
       </BarChartRecharts>
     </ResponsiveContainer>

diff --git a/apps/frontend-manage/src/components/evaluation/charts/ElementWordcloud.tsx b/apps/frontend-manage/src/components/evaluation/charts/ElementWordcloud.tsx
@@ -1,8 +1,6 @@
 import {
   ElementInstanceEvaluation,
   ElementType,
-  FreeElementInstanceEvaluation,
-  NumericalElementInstanceEvaluation,
 } from '@klicker-uzh/graphql/dist/ops'
 import { UserNotification } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
@@ -23,15 +21,13 @@ function ElementWordcloud({
   const supportedElementTypes = [ElementType.Numerical, ElementType.FreeText]
 
   const processedData =
-    instance.type === ElementType.Numerical
-      ? (
-          instance as NumericalElementInstanceEvaluation
-        ).results.responseValues.map((response) => ({
+    instance.__typename === 'NumericalElementInstanceEvaluation'
+      ? instance.results.responseValues.map((response) => ({
           value: String(response.value),
           count: response.count,
         }))
-      : instance.type === ElementType.FreeText
-        ? (instance as FreeElementInstanceEvaluation).results.responses
+      : instance.__typename === 'FreeElementInstanceEvaluation'
+        ? instance.results.responses
         : []
 
   if (!supportedElementTypes.includes(instance.type)) {

diff --git a/apps/frontend-manage/src/components/evaluation/hooks/useEvaluationBarChartData.tsx b/apps/frontend-manage/src/components/evaluation/hooks/useEvaluationBarChartData.tsx
@@ -1,11 +1,5 @@
-import {
-  ChoicesElementInstanceEvaluation,
-  ElementInstanceEvaluation,
-} from '@klicker-uzh/graphql/dist/ops'
-import {
-  QUESTION_GROUPS,
-  SMALL_BAR_THRESHOLD,
-} from '@klicker-uzh/shared-components/src/constants'
+import { ElementInstanceEvaluation } from '@klicker-uzh/graphql/dist/ops'
+import { SMALL_BAR_THRESHOLD } from '@klicker-uzh/shared-components/src/constants'
 import { useMemo } from 'react'
 
 interface UseEvaluationBarChartDataProps {
@@ -16,8 +10,8 @@ function useEvaluationBarChartData({
   instance,
 }: UseEvaluationBarChartDataProps) {
   const labeledData = useMemo(() => {
-    if (QUESTION_GROUPS.CHOICES.includes(instance.type)) {
-      const results = (instance as ChoicesElementInstanceEvaluation).results
+    if (instance.__typename === 'ChoicesElementInstanceEvaluation') {
+      const results = instance.results
       return results.choices.map((choice, idx) => ({
         count: choice.count,
         labelIn:

diff --git a/apps/frontend-manage/src/components/evaluation/hooks/useEvaluationTableData.tsx b/apps/frontend-manage/src/components/evaluation/hooks/useEvaluationTableData.tsx
@@ -1,10 +1,4 @@
-import {
-  ChoicesElementInstanceEvaluation,
-  ElementInstanceEvaluation,
-  ElementType,
-  FreeElementInstanceEvaluation,
-  NumericalElementInstanceEvaluation,
-} from '@klicker-uzh/graphql/dist/ops'
+import { ElementInstanceEvaluation } from '@klicker-uzh/graphql/dist/ops'
 import { EvaluationTableRowType } from '../charts/ElementTableChart'
 
 interface UseEvaluationTableColumnsProps {
@@ -14,12 +8,8 @@ interface UseEvaluationTableColumnsProps {
 function useEvaluationTableData({
   instance,
 }: UseEvaluationTableColumnsProps): EvaluationTableRowType[] {
-  if (
-    instance.type === ElementType.Sc ||
-    instance.type === ElementType.Mc ||
-    instance.type === ElementType.Kprim
-  ) {
-    const results = (instance as ChoicesElementInstanceEvaluation).results
+  if (instance.__typename === 'ChoicesElementInstanceEvaluation') {
+    const results = instance.results
     return results.choices.map((choice) => {
       return {
         count: choice.count,
@@ -28,9 +18,9 @@ function useEvaluationTableData({
         percentage: choice.count / results.totalAnswers,
       }
     })
-  } else if (instance.type === ElementType.Numerical) {
+  } else if (instance.__typename === 'NumericalElementInstanceEvaluation') {
     // TODO: check why multiple identical numbers are treated as different values - e.g. 70 for Excel question
-    const results = (instance as NumericalElementInstanceEvaluation).results
+    const results = instance.results
 
     return results.responseValues.map((response) => {
       return {
@@ -40,8 +30,8 @@ function useEvaluationTableData({
         percentage: response.count / results.totalAnswers,
       }
     })
-  } else if (instance.type === ElementType.FreeText) {
-    const results = (instance as FreeElementInstanceEvaluation).results
+  } else if (instance.__typename === 'FreeElementInstanceEvaluation') {
+    const results = instance.results
     return results.responses.map((response) => {
       return {
         count: response.count,

diff --git a/apps/frontend-manage/src/components/sessions/evaluation/QuestionEvaluation.tsx b/apps/frontend-manage/src/components/sessions/evaluation/QuestionEvaluation.tsx
@@ -76,7 +76,7 @@ function QuestionEvaluation({
             textSize.text
           )}
         >
-          {'options' in questionData && 'choices' in questionData.options && (
+          {questionData.__typename === 'ChoicesQuestionData' && (
             <div className="mt-2 flex min-h-0 flex-1 flex-col gap-2">
               <div
                 className={twMerge(
@@ -135,11 +135,8 @@ function QuestionEvaluation({
             </div>
           )}
 
-          {'options' in questionData &&
-            'restrictions' in questionData.options &&
-            questionData.options.restrictions &&
-            ('min' in questionData.options.restrictions ||
-              'max' in questionData.options.restrictions) && (
+          {questionData.__typename === 'NumericalQuestionData' &&
+            questionData.options.restrictions && (
               <div>
                 <div className="font-bold">
                   {t('manage.evaluation.validSolutionRange')}:
@@ -190,7 +187,7 @@ function QuestionEvaluation({
                   </UserNotification>
                 )}
                 {showSolution &&
-                  'solutionRanges' in questionData.options &&
+                  questionData.__typename === 'NumericalQuestionData' &&
                   questionData.options.solutionRanges && (
                     <div>
                       <div className="mt-4 font-bold">
@@ -207,8 +204,7 @@ function QuestionEvaluation({
                   )}
               </div>
             )}
-          {'options' in questionData &&
-            'solutions' in questionData.options &&
+          {questionData.__typename === 'FreeTextQuestionData' &&
             questionData.options.solutions &&
             showSolution && (
               <div>