feat: add evaluation view for asynchronous activities #4265
Conversation
…witch block alongside automatically
… currently not available
…-activity-evaluation
Current Aviator status
This PR was merged manually (without Aviator). Merging manually can negatively impact the performance of the queue. Consider using Aviator next time.
See the real-time status of this PR on the
Aviator webapp.
Use the Aviator Chrome Extension
to see the status of your PR within GitHub.
|
|
Warning Rate limit exceeded@sjschlapbach has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 5 minutes and 17 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughWalkthroughThe changes introduce new types and modifications to the GraphQL schema, enhancing the evaluation framework for educational activities. This includes the addition of various evaluation types and query arguments for retrieving evaluation data, specifically for microlearning and practice quizzes. A new file is created to define a comprehensive schema for evaluating different element types, and new functions are implemented to process and retrieve evaluation data effectively. Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
Outside diff range and nitpick comments (13)
apps/frontend-manage/src/components/evaluation/elements/FTSidebar.tsx (1)
11-26: Component function definition looks good, but remove the unused props.The component correctly uses the
FTSidebarPropsinterface for its props. The use ofuseTranslationshook is correct for internationalization. The rendering logic is correct and matches the component's purpose.However, the component doesn't use the
textSizeandshowSolutionprops. Please remove them from the props destructuring and theFTSidebarPropsinterface to keep the code clean.Apply this diff to remove the unused props:
-interface FTSidebarProps { - instance: FreeElementInstanceEvaluation - textSize: TextSizeType - showSolution: boolean -} +interface FTSidebarProps { + instance: FreeElementInstanceEvaluation +} -function FTSidebar({ instance, textSize, showSolution }: FTSidebarProps) { +function FTSidebar({ instance }: FTSidebarProps) {apps/frontend-manage/src/components/evaluation/elements/ChoicesEvaluation.tsx (1)
1-47: LGTM! TheChoicesEvaluationcomponent is well-structured and enhances the evaluation functionality.The component follows a clear separation of concerns and utilizes reusable sub-components, promoting code modularity and maintainability. The use of Tailwind CSS ensures a responsive layout, and the
twMergefunction allows for dynamic styling based on thetextSizeprop.Some additional suggestions for improvement:
- Consider adding prop types validation using a library like
prop-typesto catch potential issues early and improve code reliability.- If the component grows in complexity, consider splitting it into smaller, more focused sub-components to maintain readability and maintainability.
- Add inline comments to explain any complex or non-obvious logic, making it easier for other developers to understand and maintain the code.
Overall, great work on this component! It enhances the user interface and provides a visually appealing way to evaluate choices.
apps/frontend-manage/src/pages/practiceQuiz/[id]/evaluation.tsx (1)
29-29: Reminder: Address the TODO comment.The TODO comment suggests displaying a message if the practice quiz is not published yet. This could enhance the user experience by providing clarity on the quiz's status.
Do you want me to generate the code to handle this scenario or open a GitHub issue to track this enhancement?
apps/frontend-manage/src/pages/microLearning/[id]/evaluation.tsx (1)
32-32: Address the TODO comment.Consider implementing the suggested functionality to display a message when the microlearning is not published yet. This would provide a better user experience and clarity.
Do you want me to help implement this feature or open a GitHub issue to track this task?
apps/frontend-manage/src/components/evaluation/hooks/useVisibleStacks.tsx (1)
21-22: Address the TODO comment.The TODO comment suggests using
stack.stackNamefor the label instead of the generic "Stack N" label. Ifstack.stackNameis available and provides a more meaningful label, consider using it.Do you want me to update the code to use
stack.stackNameor open a GitHub issue to track this task?apps/frontend-manage/src/components/evaluation/ElementEvaluation.tsx (1)
45-80: Consider extracting the conditional rendering logic.To further improve readability and maintainability, consider extracting the conditional rendering logic into a separate function or component. This will help keep the
ElementEvaluationcomponent more concise and focused on its main responsibility.For example, you could create a new component called
EvaluationRendererthat takes thecurrentInstanceand other necessary props, and returns the appropriate evaluation component based on thecurrentInstancetype.apps/frontend-manage/src/components/evaluation/ActivityEvaluation.tsx (2)
45-108: LGTM, but consider removing the commented-out code.The component's JSX is well-structured and the conditional rendering logic is correct. The
ElementEvaluationcomponent receives the appropriate props based on the current state.However, there is a significant amount of commented-out code related to rendering a leaderboard. If this feature is not planned for implementation in the near future, it's recommended to remove the commented-out code to improve code cleanliness and maintainability.
110-150: Remove the commented-out code.This code segment is entirely commented out and not contributing to the component's functionality. If the feedback and confusion features are not planned for implementation in the near future, it's recommended to remove this commented-out code to improve code cleanliness and maintainability.
Keeping large blocks of commented-out code can make the codebase harder to read and maintain. If you need to refer to this code in the future, consider using version control history instead.
apps/frontend-manage/src/components/evaluation/charts/ElementHistogram.tsx (1)
1-227: LGTM!The
ElementHistogramcomponent is well-structured, follows a clear logic flow, and provides a responsive and interactive user experience. The code is well-commented, making it easy to understand the purpose of each section. The handling of unsupported element types and missing data is done gracefully, and the number input field for adjusting the number of bins is a nice touch.Some potential improvements to consider:
- Add more detailed PropTypes or TypeScript types for the props to catch potential type mismatches early.
- Extract the magic numbers used for margin and domain calculations into constants for better readability and maintainability.
- Remove the commented-out sections for statistical markers if they are not planned to be implemented soon to avoid code clutter.
Overall, great work on this component!
packages/graphql/src/types/app.ts (1)
230-230: Implement the suggested type change or remove the TODO comment.The change itself, adding the TODO comment, is fine. However, please consider either:
- Implementing the suggested type change to
Element optionsto improve type safety and resolve frontend issues.- Removing the TODO comment entirely to keep the codebase clean if the change is not planned for the near future.
Leaving TODO comments in the codebase without addressing them can lead to confusion and technical debt over time.
packages/graphql/src/schema/evaluation.ts (2)
6-6: Consider moving type definitions to a separate file.The TODO comment suggests moving the type definitions to a separate file. Extracting these interfaces into a dedicated types file can enhance code organization and maintainability.
Do you want me to help refactor these types into a separate file or open a GitHub issue to track this task?
110-113: Explicitly define enum values forFlashcardCorrectness.Defining the enum values explicitly for
FlashcardCorrectnessenhances clarity and prevents potential issues if the underlying TypeScript enum changes.Modify the enum definition to specify values:
export const FlashcardCorrectness = builder.enumType('FlashcardCorrectness', { - values: Object.values(FlashcardCorrectnessType), + values: { + CORRECT: { value: FlashcardCorrectnessType.CORRECT }, + PARTIAL: { value: FlashcardCorrectnessType.PARTIAL }, + INCORRECT: { value: FlashcardCorrectnessType.INCORRECT }, + }, })packages/graphql/src/services/practiceQuizzes.ts (1)
211-211: Reminder: Address the TODO commentThere's a TODO comment indicating that statistics need to be extended. Please ensure this is implemented to provide comprehensive evaluation data.
Would you like assistance in implementing this feature or should I open a new GitHub issue to track this task?
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (57)
- apps/frontend-manage/src/components/courses/MicroLearningElement.tsx (3 hunks)
- apps/frontend-manage/src/components/courses/PracticeQuizElement.tsx (3 hunks)
- apps/frontend-manage/src/components/courses/actions/MicroLearningEvaluationLink.tsx (1 hunks)
- apps/frontend-manage/src/components/courses/actions/MicroLearningPreviewLink.tsx (1 hunks)
- apps/frontend-manage/src/components/courses/actions/PracticeQuizEvaluationLink.tsx (1 hunks)
- apps/frontend-manage/src/components/courses/actions/PracticeQuizPreviewLink.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/ActivityEvaluation.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/ElementChart.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/ElementEvaluation.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/EvaluationFooter.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/charts/ElementBarChart.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/charts/ElementHistogram.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/charts/ElementTableChart.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/charts/ElementWordcloud.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/elements/CTEvaluation.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/elements/ChoicesEvaluation.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/elements/ChoicesSidebar.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/elements/FCEvaluation.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/elements/FTEvaluation.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/elements/FTSidebar.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/elements/NREvaluation.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/elements/NumericalSidebar.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/elements/QuestionCollapsible.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/hooks/useChartTypeUpdate.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/hooks/useEvaluationBarChartData.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/hooks/useEvaluationHistogramData.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/hooks/useEvaluationTableColumns.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/hooks/useEvaluationTableData.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/hooks/useInstanceArrowNavigation.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/hooks/useStackInstanceMap.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/hooks/useStackInstanceUpdates.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/hooks/useVisibleStacks.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/navigation/EvaluationNavigation.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/navigation/InstanceNavigation.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/navigation/StackNavigation.tsx (1 hunks)
- apps/frontend-manage/src/components/evaluation/textSizes.ts (1 hunks)
- apps/frontend-manage/src/pages/microLearning/[id]/evaluation.tsx (1 hunks)
- apps/frontend-manage/src/pages/practiceQuiz/[id]/evaluation.tsx (1 hunks)
- packages/graphql/src/graphql/ops/FEvaluationResults.graphql (1 hunks)
- packages/graphql/src/graphql/ops/QGetMicroLearningEvaluation.graphql (1 hunks)
- packages/graphql/src/graphql/ops/QGetPracticeQuizEvaluation.graphql (1 hunks)
- packages/graphql/src/index.ts (1 hunks)
- packages/graphql/src/ops.ts (19 hunks)
- packages/graphql/src/public/client.json (1 hunks)
- packages/graphql/src/public/schema.graphql (12 hunks)
- packages/graphql/src/public/server.json (1 hunks)
- packages/graphql/src/schema/evaluation.ts (1 hunks)
- packages/graphql/src/schema/query.ts (3 hunks)
- packages/graphql/src/schema/question.ts (1 hunks)
- packages/graphql/src/services/microLearning.ts (2 hunks)
- packages/graphql/src/services/practiceQuizzes.ts (3 hunks)
- packages/graphql/src/services/sessions.ts (0 hunks)
- packages/graphql/src/types/app.ts (1 hunks)
- packages/graphql/tsconfig.json (1 hunks)
- packages/i18n/messages/de.ts (3 hunks)
- packages/i18n/messages/en.ts (3 hunks)
- packages/shared-components/src/constants.ts (1 hunks)
Files not reviewed due to no reviewable changes (1)
- packages/graphql/src/services/sessions.ts
Files skipped from review due to trivial changes (2)
- apps/frontend-manage/src/components/courses/actions/MicroLearningPreviewLink.tsx
- packages/graphql/src/schema/question.ts
Additional comments not posted (120)
packages/graphql/src/graphql/ops/QGetPracticeQuizEvaluation.graphql (1)
1-12: LGTM!The
GetPracticeQuizEvaluationquery is well-structured and follows GraphQL best practices. It provides a convenient way to retrieve specific practice quiz evaluations along with their associated evaluation results.The query arguments, return fields, and fragment usage are all properly defined and used. The
#importstatement correctly imports the necessary fragment.Overall, this addition enhances the functionality and modularity of the GraphQL API.
packages/graphql/src/graphql/ops/QGetMicroLearningEvaluation.graphql (3)
1-1: LGTM!Importing the
EvaluationResultsfragment is a good practice to modularize and reuse GraphQL code.
3-3: LGTM!The query is well-defined with a descriptive name and a required
idparameter of typeString.
4-11: LGTM!The query requests appropriate fields for the evaluation and correctly includes the
EvaluationResultsfragment using the spread operator. This promotes modular and reusable code.apps/frontend-manage/src/components/evaluation/elements/CTEvaluation.tsx (4)
1-3: LGTM!The import statements are correctly specified and all imported entities are used within the component.
5-7: LGTM!The
CTEvaluationPropsinterface correctly defines the props for theCTEvaluationcomponent, ensuring type safety.
9-17: LGTM!The
CTEvaluationcomponent is correctly implemented as a functional component. It properly uses theuseTranslationshook for internationalization and renders aUserNotificationcomponent with appropriate props and a translated message.
19-19: LGTM!The component is correctly exported as the default export, making it available for import in other files.
apps/frontend-manage/src/components/evaluation/elements/FCEvaluation.tsx (4)
1-3: LGTM!The imports are correctly specified and necessary for the component's functionality.
5-7: LGTM!The
FCEvaluationPropsinterface correctly defines the expected prop type for theFCEvaluationcomponent. Using an interface for prop types is a good practice.
9-17: LGTM!The
FCEvaluationcomponent is correctly implemented:
- It accepts the
evaluationprop of typeFCEvaluationProps.- It uses the
useTranslationshook to fetch localized strings.- It renders a
UserNotificationwith a localized message when no flashcard evaluation is available.
19-19: LGTM!The
FCEvaluationcomponent is correctly exported as the default export, making it available for use in other files.apps/frontend-manage/src/components/evaluation/elements/FTSidebar.tsx (2)
1-9: Imports and interface definition look good, but clarify the purpose ofshowSolutionprop.The imports are relevant and necessary for the component. The
FTSidebarPropsinterface correctly defines the expected props for the component.However, the purpose of
showSolutionprop is not clear from the code. It's not being used anywhere in the component. Please clarify its intended purpose or remove it if it's not needed.
28-28: Component export looks good.The component is correctly exported as the default export. There are no issues with the export statement.
apps/frontend-manage/src/components/evaluation/hooks/useInstanceArrowNavigation.tsx (1)
9-26: LGTM!The custom hook
useIntanceArrowNavigationis well-implemented and provides a clean way to handle arrow key navigation through instances. The logic for updating theactiveInstancebased on the arrow key events is correct and properly handles edge cases.The use of the
useArrowNavigationhook from the@uzh-bf/design-systemlibrary is a good practice, as it promotes code reuse and maintains consistency with the design system.Overall, the code is clear, concise, and follows best practices. Great job!
apps/frontend-manage/src/components/evaluation/hooks/useStackInstanceUpdates.tsx (1)
1-26: LGTM!The
useStackInstanceUpdateshook is well-structured, follows React hooks conventions, and provides a clean and reusable way to manage the active stack instance based on the active instance value. The logic inside theuseEffectis clear and concise, efficiently searching for a matching stack instance and updating the active stack usingsetActiveStack.The hook encapsulates the logic for updating the active stack, making the code more maintainable and reducing duplication. It can be easily integrated into other components that need to manage the active stack based on the active instance.
Great job on this implementation!
apps/frontend-manage/src/components/courses/actions/PracticeQuizPreviewLink.tsx (1)
26-26: LGTM!The change enhances the clarity of the user interface by providing a more descriptive label for the action. The translation key used is specific and contextually relevant, which improves the user experience.
packages/graphql/tsconfig.json (1)
30-31: LGTM!The changes to the TypeScript configuration are beneficial:
- Setting the
liboption to["es2022"]ensures that the compiler is aware of the latest ECMAScript features, which can help catch errors related to using newer APIs.- Enabling the
noErrorTruncationoption can improve the developer experience by providing more detailed error messages, making it easier to identify and fix issues.apps/frontend-manage/src/components/courses/actions/PracticeQuizEvaluationLink.tsx (3)
1-4: LGTM!The imports are relevant and necessary for the component's functionality. Using
next/linkfor client-side navigation, Font Awesome icon for external links, anduseTranslationshook for internationalization are all good practices.
6-30: LGTM!The
PracticeQuizEvaluationLinkcomponent is well-structured and follows good practices:
- It uses
next/linkfor client-side navigation.- Opens the link in a new tab/window, which is suitable for external links.
- Includes an external link icon to enhance the user experience.
- Internationalizes the link text using
useTranslations.- Adds a
data-cyattribute to facilitate automated testing.- Adheres to the Single Responsibility Principle by being small and focused.
30-30: LGTM!Exporting the
PracticeQuizEvaluationLinkcomponent as the default export is a common practice in React and allows importing the component without specifying its name.apps/frontend-manage/src/components/courses/actions/MicroLearningEvaluationLink.tsx (1)
1-30: LGTM!The
MicroLearningEvaluationLinkcomponent is well-structured and follows best practices for React functional components. It effectively utilizes theuseTranslationshook for internationalization, ensuring that the text adapts to the user's language preferences. The link is properly configured to open in a new tab, and the styling using Tailwind CSS classes is consistent and visually appealing. The inclusion of the Font Awesome external link icon enhances the visual cue, making the link easily identifiable and intuitive to use. Additionally, thedata-cyattribute is correctly set up for testing purposes, incorporating thequizNameprop to create a unique identifier, which facilitates automated testing and ensures the component's reliability and maintainability.Overall, this component provides a clear and accessible way for users to navigate to microlearning evaluations while enhancing the user experience for a global audience.
apps/frontend-manage/src/components/evaluation/hooks/useChartTypeUpdate.tsx (1)
15-32: LGTM!The custom hook
useChartTypeUpdateis well-designed and encapsulates the logic for dynamically updating the chart type based on the active instance and element type. It promotes better state management and ensures that the chart type remains valid whenever the active instance changes, thereby enhancing the robustness of the chart rendering logic.The implementation is clean, concise, and follows best practices for custom hooks in React.
apps/frontend-manage/src/components/evaluation/hooks/useStackInstanceMap.tsx (1)
8-30: LGTM!The
useStackInstanceMaphook is well-structured and optimized:
- It uses
useMemoto memoize the computed stack instance map, avoiding unnecessary recalculations.- The
reduceoperation is a clean way to accumulate the stack instance map while iterating over thestacksarray.- The
labelandvalueproperties for each instance provide a structured way to access instance data.- The function has a clear input (
stacks) and output (stackInstanceMap), making it easy to understand and use.Great job!
packages/graphql/src/index.ts (1)
8-8: LGTM!The import statement for the
evaluationschema module is added correctly. This change aligns with the PR objectives of introducing an evaluation view for asynchronous activities.Note: The actual impact of this change will depend on how the
evaluationschema is defined and used in other parts of the codebase. Please ensure that the schema is properly implemented and integrated with the relevant components.apps/frontend-manage/src/components/evaluation/elements/NREvaluation.tsx (1)
1-47: LGTM!The
NREvaluationcomponent is well-structured and properly utilizes the provided props to render the numerical evaluation interface. The use of theElementChartandNumericalSidebarcomponents promotes code reusability and maintainability. The responsive layout, achieved through Tailwind CSS classes, ensures a user-friendly experience across different screen sizes.Great job on implementing this component!
apps/frontend-manage/src/components/evaluation/elements/FTEvaluation.tsx (1)
1-49: LGTM!The
FTEvaluationcomponent is well-structured and follows best practices:
- The component logic is clear and well-organized.
- The use of Tailwind CSS classes for styling is consistent with the project's styling approach.
- The responsive layout adjustments ensure a good user experience across different screen sizes.
- The conditional rendering of the sidebar based on the
instanceEvaluationandshowSolutionprop is a good practice to avoid unnecessary rendering.- The
FTEvaluationPropsinterface clearly defines the expected props for the component.- The component is properly exported as the default export.
Overall, this component enhances the user interface by providing a clear and organized way to visualize evaluation data and solutions, improving the interactivity and usability of the application.
apps/frontend-manage/src/components/evaluation/charts/ElementWordcloud.tsx (4)
1-10: LGTM!The imports are correctly specified and all imported entities are used in the component implementation.
11-15: LGTM!The
ElementWordcloudPropsinterface correctly defines the props for theElementWordcloudcomponent with appropriate types.
17-52: LGTM!The
ElementWordcloudcomponent is well-structured and handles the rendering of the word cloud based on the supported element types. It provides a good user experience by displaying a warning notification for unsupported types and correctly configures theTagCloudcomponent with the processed data and customizable options.
54-54: LGTM!The
ElementWordcloudcomponent is correctly exported as the default export, allowing it to be easily imported and used in other parts of the application.packages/graphql/src/graphql/ops/FEvaluationResults.graphql (5)
1-7: LGTM!The fragment definition and top-level fields are well-structured and provide a clear hierarchy for the evaluation results.
8-17: LGTM!The common fields for each evaluation instance provide useful metadata and are well-structured.
18-41: LGTM!The
ChoicesElementInstanceEvaluationandFreeElementInstanceEvaluationtypes provide detailed and well-structured results for their respective evaluation instances.
43-67: LGTM!The
NumericalElementInstanceEvaluationandFlashcardElementInstanceEvaluationtypes provide detailed and well-structured results for their respective evaluation instances.
69-73: LGTM!The
ContentElementInstanceEvaluationtype provides a simple and appropriate result for content evaluation instances.apps/frontend-manage/src/pages/practiceQuiz/[id]/evaluation.tsx (3)
10-41: LGTM!The
PracticeQuizEvaluationcomponent is well-structured and handles different states (loading, error, success) appropriately. It effectively fetches and displays the evaluation results of a practice quiz.
43-49: LGTM!The
getStaticPropsfunction correctly loads the internationalization messages based on the provided locale, enabling server-side rendering with localized content.
51-56: LGTM!The
getStaticPathsfunction correctly defines an emptypathsarray and sets thefallbackstrategy to'blocking', allowing Next.js to handle server-side rendering for dynamic paths.apps/frontend-manage/src/pages/microLearning/[id]/evaluation.tsx (4)
1-9: LGTM!The imports are well-organized, relevant, and follow the correct syntax and naming conventions.
10-44: Component implementation looks good!The
MicroLearningEvaluationcomponent follows a clear and logical structure. It properly handles the loading state, error state, and renders theActivityEvaluationcomponent with the fetched evaluation data.
46-52: LGTM!The
getStaticPropsfunction correctly loads the internationalization messages based on the providedlocaleand returns them as part of thepropsobject.
54-59: LGTM!The
getStaticPathsfunction is correctly configured with an emptypathsarray andfallback: 'blocking'. This setup allows for server-side rendering of the evaluation page while ensuring that the user interface remains responsive during data loading.apps/frontend-manage/src/components/evaluation/hooks/useEvaluationTableData.tsx (1)
1-57: LGTM!The
useEvaluationTableDatahook is well-structured and provides a clean way to process evaluation data for different types of element instances. The code is readable, properly typed, and follows good naming conventions.Some key points:
- The conditional logic and type assertions ensure that the correct data is accessed for each evaluation type.
- The returned data structure is consistent across all evaluation types, making it easy to consume the data in other parts of the application.
- The hook is flexible and can be easily extended to handle new evaluation types in the future.
Overall, this hook should improve code maintainability and make it easier to build UI components that can handle different evaluation types.
apps/frontend-manage/src/components/evaluation/hooks/useEvaluationBarChartData.tsx (1)
17-55: LGTM!The custom hook
useEvaluationBarChartDatais well-implemented and follows best practices. It correctly handles different types of evaluations (choices and numerical responses) and processes the data accordingly. The use ofuseMemois appropriate to optimize performance by memoizing the computed labeled data.The hook provides a flexible and optimized way to handle different evaluation types for rendering bar charts and can be easily integrated into other components that require bar chart data based on evaluations.
apps/frontend-manage/src/components/evaluation/hooks/useVisibleStacks.tsx (1)
1-56: LGTM!The custom hook
useVisibleStacksis well-implemented and provides a focused view of the stacks based on the user's current selection. The logic insideuseMemocorrectly determines which stacks to display based on various conditions, ensuring that the displayed stacks are contextually relevant to the user's current selection.The hook also uses memoization to optimize performance by avoiding unnecessary re-computations.
apps/frontend-manage/src/components/evaluation/ElementChart.tsx (1)
1-66: LGTM!The
ElementChartcomponent is well-structured and modular. It effectively uses conditional rendering to handle different chart types based on thechartTypeprop. The component correctly passes relevant props to each chart component and provides a fallback message for unknownchartTypevalues. The use of TypeScript helps catch potential type-related issues at compile time.Great job on creating a reusable and maintainable component for rendering different types of charts!
apps/frontend-manage/src/components/evaluation/navigation/EvaluationNavigation.tsx (4)
1-7: LGTM!The imports are relevant and necessary for the component. The code looks good.
8-16: LGTM!The
EvaluationNavigationPropsinterface is well-defined with appropriate prop types. The code looks good.
18-61: LGTM!The
EvaluationNavigationcomponent is well-structured and modular. The use of custom hooks enhances the functionality and maintainability of the component. The conditional rendering ofInstanceNavigationand the consistent rendering ofStackNavigationensure a cohesive navigation experience. The code looks good.
63-63: LGTM!The default export of the
EvaluationNavigationcomponent is correctly defined. The code looks good.apps/frontend-manage/src/components/evaluation/textSizes.ts (3)
1-12: LGTM!The
TextSizeTypeinterface provides a clear and structured definition for text size objects. The properties cover all the necessary aspects of text sizes, including classes for styling and numerical limits. The property names are descriptive and follow a consistent naming convention.
14-63: LGTM!The
TextSizesconstant provides a centralized place to define and manage text size configurations. The categories cover a range of text sizes from extra-large to small, providing flexibility in styling. The class names and legend sizes are consistent across categories, following a logical pattern. The numerical constraints ensure that the text sizes remain within reasonable limits.
65-99: LGTM!The
sizeReducerfunction provides a clear and structured approach to managing text size state based on actions. The switch-case structure ensures that the text size transitions are well-defined and predictable. The logic correctly handles the limits of text sizes, preventing them from exceeding the defined boundaries. The default case provides a fallback to the medium size, ensuring a consistent behavior for unrecognized sizes.apps/frontend-manage/src/components/evaluation/hooks/useEvaluationHistogramData.tsx (1)
1-69: Excellent implementation of theuseEvaluationHistogramDatahook!The hook is well-structured and follows good practices:
- It checks if the instance type is numerical before processing the data.
- It uses appropriate lodash functions for calculations, which can improve performance.
- It provides a reusable and efficient way to generate histogram data for numerical evaluations.
- It returns an object containing the histogram data and the domain, making it easy for the calling component to use the data for visualization.
Great job on this implementation!
apps/frontend-manage/src/components/evaluation/hooks/useEvaluationTableColumns.tsx (1)
1-76: LGTM!The
useEvaluationTableColumnshook is well-implemented and provides a reusable and configurable way to generate table columns for evaluation data. The code is well-structured, properly typed, and follows best practices such as performance optimization withuseMemoand conditional rendering based on props.The column definitions are comprehensive and cover various data types and formatting needs, making the hook versatile and adaptable to different evaluation scenarios. The use of internationalization ensures that the column labels can be easily translated, enhancing the accessibility of the component.
Overall, the hook encapsulates the column definition logic effectively, making it easier to maintain and update in the future.
apps/frontend-manage/src/components/evaluation/navigation/InstanceNavigation.tsx (2)
16-79: LGTM!The
InstanceNavigationcomponent is well-implemented and follows best practices:
- Properly disables previous/next buttons to prevent out-of-bounds navigation.
- Allows direct instance selection via dropdown, updating the active instance state.
- Utilizes utility classes and design system components for consistent styling.
- Applies internationalization for adaptable button labels.
- Includes data attributes for component testing.
- Defines a clear
InstanceNavigationPropsinterface for prop typing.Overall, the component provides an intuitive interface for navigating through instances within the stack evaluation.
8-14: LGTM!The
InstanceNavigationPropsinterface is well-defined and includes all necessary props for theInstanceNavigationcomponent:
stackprop is correctly typed asStackEvaluation.activeInstanceandnumOfInstancesprops are appropriately typed as numbers.setActiveInstanceprop is a function that accepts a number argument for updating the active instance state.instanceSelectionprop is an array of objects withlabelandvalueproperties, providing data for the dropdown options.The interface is also exported, allowing for reuse in other files if needed.
apps/frontend-manage/src/components/evaluation/elements/ChoicesSidebar.tsx (4)
1-5: LGTM!The imports are well-organized and follow a consistent naming convention. The use of custom packages and the
tailwind-mergeutility is appropriate.
7-11: LGTM!The
ChoicesSidebarPropsinterface clearly defines the expected props for theChoicesSidebarcomponent. The prop names are descriptive and the types are appropriate.
13-72: LGTM!The
ChoicesSidebarcomponent is well-structured and effectively renders the evaluation results for choices. The use oftwMergefor conditional styling and theEllipsiscomponent for limiting the choice text lines enhances the readability and user experience. The calculation of the correct answer fraction and bar width is accurate, and the rendering logic for the bar color based on the solution and correctness is sound.
74-74: LGTM!The
ChoicesSidebarcomponent is correctly exported as the default export, making it easy to import and use in other parts of the codebase.apps/frontend-manage/src/components/evaluation/elements/NumericalSidebar.tsx (1)
1-80: LGTM!The
NumericalSidebarcomponent is well-structured and correctly handles the display of evaluation results for numerical elements. It properly uses theuseTranslationshook for internationalization and allows for future extensibility regarding statistical data.The component enhances the user interface by providing clear and structured feedback on numerical evaluations.
apps/frontend-manage/src/components/evaluation/ElementEvaluation.tsx (1)
1-86: Great work on theElementEvaluationcomponent!The component is well-structured and follows a modular approach by rendering different evaluation components based on the
currentInstancetype. The use of conditional rendering and separate components for each evaluation type enhances maintainability and readability.The component effectively utilizes the
ElementInstanceEvaluationinterface and its subtypes to ensure type safety, and the use oftwMergefor merging Tailwind CSS classes provides flexibility in styling.apps/frontend-manage/src/components/evaluation/charts/ElementTableChart.tsx (5)
1-25: LGTM!The imports, exported type, and interface are well-organized and provide a clear structure for the component's dependencies and expected props.
27-33: LGTM!The prop destructuring, initialization of the
tfunction, and creation of therefare all properly implemented.
35-46: LGTM!The
supportedElementTypesarray and the usage of custom hooks (useEvaluationTableColumnsanduseEvaluationTableData) are properly implemented and help to keep the component code cleaner and more maintainable.
48-54: LGTM!The rendering logic for unsupported element types is properly implemented. It checks if the
instance.typeis supported and renders a warning notification using theUserNotificationcomponent if it's not.
56-94: LGTM!The rendering of the
Tablecomponent and the reset button is properly implemented. The table receives the correct data, columns, and classes based on the props. The default sort field and order are set based on theinstance.type. The reset button is rendered with the correct icon, label, andonClickhandler, which correctly uses therefobject to reset the table sorting.apps/frontend-manage/src/components/evaluation/elements/QuestionCollapsible.tsx (1)
1-84: LGTM!The
QuestionCollapsiblecomponent is well-structured and follows best practices for React components. It effectively manages the state using React hooks and provides a collapsible interface for displaying questions within an evaluation context.The use of Tailwind CSS ensures responsive design and visual consistency. The component is reusable and can be used in different parts of the application where collapsible questions are needed.
Great job!
apps/frontend-manage/src/components/evaluation/charts/ElementBarChart.tsx (1)
1-138: Excellent work on theElementBarChartcomponent!The component is well-structured, reusable, and follows best practices for React components. It enhances the evaluation interface by providing a clear visual representation of data, making it easier for users to interpret evaluation results.
Some key highlights:
- The component is responsive and adapts to different screen sizes.
- It supports multiple element types and provides a warning notification for unsupported types.
- It uses the
rechartslibrary to create a responsive bar chart with dynamic scaling and meaningful labels.- The colors of the bars are conditionally set based on the
showSolutionprop, allowing for visual differentiation between correct and incorrect choices.- It uses the
useEvaluationBarChartDatahook to process the evaluation instance data, promoting code reusability.Overall, the component is a great addition to the evaluation functionality and integrates well with the existing codebase.
apps/frontend-manage/src/components/evaluation/EvaluationFooter.tsx (4)
1-13: LGTM!The import statements are well-organized and follow the best practices by importing only the necessary modules from each package.
15-26: LGTM!The
EvaluationFooterPropsinterface is well-defined and accurately represents the expected props for theEvaluationFootercomponent. The prop types are appropriately specified, and the interface is exported for reusability.
28-110: LGTM!The
EvaluationFootercomponent is well-implemented and follows best practices:
- The component is modular and reusable, with its behavior controlled through props.
- It efficiently manages its state using the provided props and hooks.
- The rendering logic is clean and readable, with proper use of conditional rendering and mapping.
- The component is responsive to user interactions, such as changing text size, toggling solution visibility, and selecting chart types.
- It leverages constants and translations for maintainability and internationalization.
- The component is accessible, with proper use of ARIA attributes and data attributes for testing.
Overall, the component is well-structured and enhances the user experience of the evaluation interface.
112-112: LGTM!The component is correctly exported as the default export, making it easily importable and usable in other parts of the application.
apps/frontend-manage/src/components/evaluation/navigation/StackNavigation.tsx (1)
1-119: LGTM!The
StackNavigationcomponent is well-designed and provides an intuitive interface for navigating through evaluation stacks. It enhances the user experience by allowing users to easily switch between different evaluations.Some key highlights:
- The use of the
useVisibleStackscustom hook effectively manages which stacks are displayed, avoiding overcrowding the navigation bar.- Conditionally disabling the previous and next buttons prevents navigating out of bounds.
- Updating both the
activeStackandactiveInstancewhen a stack button is clicked ensures the correct evaluation is displayed.- Leveraging FontAwesome icons and Tailwind CSS results in a visually appealing and responsive layout that integrates well with the overall application styling.
The component follows best practices such as using hooks, prop types, and modular design. It integrates seamlessly with the existing codebase by utilizing common libraries and design patterns.
Great job on implementing this feature!
apps/frontend-manage/src/components/evaluation/ActivityEvaluation.tsx (3)
1-16: LGTM!The import statements are correctly defined and all imported entities are used within the component.
17-43: LGTM!The
ActivityEvaluationPropsinterface and theActivityEvaluationcomponent are correctly defined. The component properly initializes its state variables using appropriate hooks and utilizes custom hooks for derived state computation.
151-177: LGTM!The
EvaluationFootercomponent is rendered with the appropriate props based on the current state. The component is correctly exported as the default export.packages/graphql/src/services/microLearning.ts (1)
66-109: LGTM!The
getMicroLearningEvaluationfunction is implemented correctly and enhances the functionality of the module by allowing for the evaluation of micro-learning content based on its associated stacks. It follows good practices such as:
- Retrieving the micro-learning record and its associated data based on the provided
idandPUBLISHEDstatus.- Reusing the existing
computeStackEvaluationfunction to evaluate the stacks.- Handling the case when no micro-learning record is found by returning
null.- Returning relevant information about the micro-learning and its evaluation results.
apps/frontend-manage/src/components/courses/MicroLearningElement.tsx (2)
33-33: LGTM!The import statement for the
MicroLearningEvaluationLinkcomponent is correctly added.
257-265: LGTM!The new dropdown item for the
MicroLearningEvaluationLinkcomponent is correctly added with the appropriate props.apps/frontend-manage/src/components/courses/PracticeQuizElement.tsx (2)
31-31: LGTM!The import statement for
PracticeQuizEvaluationLinkis syntactically correct and follows the existing convention.
142-142: LGTM!The changes related to
PracticeQuizEvaluationLinkusage are implemented correctly:
- The
evaluationHrefis constructed properly, including thepracticeQuiz.idfor unique evaluation page URLs.- The
PracticeQuizEvaluationLinkis used appropriately in the action menu, providing users with a convenient way to access the evaluation page.- The
onClickhandler being set to a no-operation function is acceptable, as navigation is the primary purpose of the link.Also applies to: 357-365
packages/graphql/src/public/client.json (2)
117-117: LGTM!The addition of the
GetMicroLearningEvaluationentry enhances the GraphQL API capabilities by allowing clients to retrieve evaluation data for micro-learning modules. The unique hash value ensures a specific implementation of this functionality is used.
125-125: LGTM!The addition of the
GetPracticeQuizEvaluationentry enhances the GraphQL API capabilities by allowing clients to retrieve evaluation data for practice quizzes. The unique hash value ensures a specific implementation of this functionality is used.packages/shared-components/src/constants.ts (3)
129-135: LGTM!The new
ChartTypeenum provides a structured and type-safe way to represent different chart types. The enum values follow the naming convention for constants.
137-138: LGTM!The new
ChartLabelstype provides a type-safe way to restrict the possible values for chart labels. This helps catch potential typos or invalid label assignments.
146-174: LGTM!The updates to the
ACTIVE_CHART_TYPESconstant improve type safety and code readability by utilizing the newChartTypeenum andChartLabelstype. The mapping of chart types to labels for eachElementTypeprovides a structured way to determine the available chart types for each element. Explicitly associatingElementType.FlashcardandElementType.Contentwith theUNSETchart type clarifies that these elements do not have specific chart types.packages/graphql/src/schema/query.ts (2)
282-291: LGTM!The new
getPracticeQuizEvaluationquery field is implemented correctly:
- It allows retrieving evaluations for practice quizzes by providing a quiz ID.
- The nullable
ActivityEvaluationreturn type handles cases where the evaluation may not exist.- The resolver delegates the data retrieval to the
PracticeQuizService.The code follows the established pattern and integrates well with the existing schema.
304-313: Looks good!The new
getMicroLearningEvaluationquery field is implemented correctly and follows the same pattern as thegetPracticeQuizEvaluationfield:
- It allows retrieving evaluations for micro-learning activities by providing an activity ID.
- The nullable
ActivityEvaluationreturn type handles cases where the evaluation may not exist.- The resolver delegates the data retrieval to the
MicroLearningService.The code is consistent with the existing schema design.
packages/i18n/messages/en.ts (9)
114-114: LGTM!The addition of the
elementkey-value pair to thegenericobject is valid and consistent.
1400-1400: LGTM!The addition of the
unsetkey-value pair to theevaluationobject is valid and consistent.
1403-1403: LGTM!The addition of the
practiceQuizEvaluationkey-value pair to theevaluationobject is valid and consistent.
1404-1404: LGTM!The addition of the
microLearningEvaluationkey-value pair to theevaluationobject is valid and consistent.
1405-1406: LGTM!The addition of the
chartTypeNotSupportedkey-value pair to theevaluationobject is valid and consistent.
1407-1408: LGTM!The addition of the
noFlashcardEvaluationkey-value pair to theevaluationobject is valid and consistent.
1409-1410: LGTM!The addition of the
noContentEvaluationkey-value pair to theevaluationobject is valid and consistent.
1484-1484: LGTM!The relocation of the
openPreviewkey-value pair from thegenericobject in thesharedsection to thecourseListobject in themanagesection is valid and appropriate.
1485-1485: LGTM!The addition of the
openEvaluationkey-value pair to thecourseListobject is valid and consistent.packages/i18n/messages/de.ts (5)
114-114: Approve adding the new "element" translation.The German translation for "element" has been added, enhancing the localization coverage.
1413-1413: Approve adding the new "unset" translation.The German translation for "unset" has been added, enhancing the localization coverage.
1416-1417: Approve adding the new "practiceQuizEvaluation" and "microLearningEvaluation" translations.The German translations for "practiceQuizEvaluation" and "microLearningEvaluation" have been added, enhancing the localization coverage for those features.
1418-1423: Approve adding the new "chartTypeNotSupported", "noFlashcardEvaluation" and "noContentEvaluation" translations.The German translations for "chartTypeNotSupported", "noFlashcardEvaluation" and "noContentEvaluation" have been added, providing localized messages for those scenarios.
1503-1504: Verify renaming "open" to "openPreview" and adding "openEvaluation" does not break existing usages.The "open" translation has been renamed to "openPreview", and a new "openEvaluation" translation has been added.
Run the following script to verify the changes do not break existing usages:
If "open" is no longer used, and "openPreview"/"openEvaluation" are used in appropriate contexts, then the changes can be approved.
packages/graphql/src/ops.ts (14)
38-45: LGTM!The
ActivityEvaluationtype definition looks good. The fields are relevant and properly typed.
85-91: LGTM!The
ChoiceElementResultstype definition looks good. The fields are relevant and properly typed.
121-137: LGTM!The
ChoicesElementInstanceEvaluationandChoicesElementResultstype definitions look good. ExtendingElementInstanceEvaluationis a nice design choice, and the additional fields are relevant and properly typed.
183-193: LGTM!The
ContentElementInstanceEvaluationtype definition looks good. ExtendingElementInstanceEvaluationis a nice design choice, and the additional fields are relevant and properly typed.
207-210: LGTM!The
ContentElementResultstype definition looks good. ThetotalAnswersfield is relevant and properly typed.
302-310: LGTM!The
ElementInstanceEvaluationtype definition looks good. The fields are relevant and properly typed.
407-411: LGTM!The
FlashcardCorrectnessenum definition looks good. The values are relevant and provide a standardized way to represent flashcard answer correctness.
431-441: LGTM!The
FlashcardElementInstanceEvaluationtype definition looks good. ExtendingElementInstanceEvaluationis a nice design choice, and the additional fields are relevant and properly typed.
455-488: LGTM!The
FlashcardElementResults,FreeElementInstanceEvaluation,FreeElementResult, andFreeElementResultstype definitions look good. ExtendingElementInstanceEvaluationis a nice design choice, and the fields are relevant and properly typed.
1537-1569: LGTM!The
NumericalElementInstanceEvaluation,NumericalElementResult,NumericalElementResults, andNumericalElementSolutionstype definitions look good. ExtendingElementInstanceEvaluationis a nice design choice, and the fields are relevant and properly typed.
1770-1773: LGTM!The addition of
getMicroLearningEvaluationandgetPracticeQuizEvaluationfields to theQuerytype looks good. The return typeActivityEvaluationis appropriate for representing the evaluation data.
1886-1900: LGTM!The
QueryGetMicroLearningEvaluationArgsandQueryGetPracticeQuizEvaluationArgstype definitions look good. Theidargument is required and properly typed.
2161-2168: LGTM!The
StackEvaluationtype definition looks good. The fields are relevant and properly typed.
Line range hint
2319-3358: LGTM!The
EvaluationResultsFragmentdefinition and its usage in the new queries look good. The fragment includes relevant fields for representing evaluation results, and the queries are defined correctly.packages/graphql/src/schema/evaluation.ts (1)
84-88: Ensure correct handling of optional fields inIFreeElementEvaluationResults.The
solutionsproperty is both optional and nullable. Verify that this aligns with the intended usage and that downstream code correctly handles cases wheresolutionsis undefined or null.
apps/frontend-manage/src/components/evaluation/elements/FTSidebar.tsx
Outdated
Show resolved
Hide resolved
klicker-uzh
|
||||||||||||||||||||||||||||
| Project |
klicker-uzh
|
| Branch Review |
async-activity-evaluation
|
| Run status |
|
| Run duration | 09m 18s |
| Commit |
|
| Committer | Julius Schlapbach |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
2
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
43
|
| View all changes introduced in this branch ↗︎ | |
|
klicker-uzh
|
||||||||||||||||||||||||||||||||||||||||
| Project |
klicker-uzh
|
| Branch Review |
v3
|
| Run status |
|
| Run duration | 09m 32s |
| Commit |
|
| Committer | Julius Schlapbach |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
|
Failures
|
1
|
|
Flaky
|
1
|
|
Pending
|
0
|
|
Skipped
|
0
|
|
Passing
|
42
|
| View all changes introduced in this branch ↗︎ | |
Tests for review
cypress/e2e/K-group-activity-workflow.cy.ts • 1 failed test
| Test | Artifacts | |
|---|---|---|
| Create and solve a group activity > create a group activity and edit it |
Screenshots
|
|
cypress/e2e/G-microlearning-workflow.cy.ts • 1 flaky test
| Test | Artifacts | |
|---|---|---|
| Different microlearning workflows > converts a seeded past microlearning into a practice quiz |
Test Replay
Screenshots
|
|
No description provided.