PM-1906 ai scorecard browsing UI

src/apps/review/src/lib/components/AiReviewsTable/AiReviewsTable.tsx

@@ -144,7 +144,11 @@ const AiReviewsTable: FC<AiReviewsTableProps> = props => {
                             <td className={styles.scoreCol}>
                                 {run.status === 'SUCCESS' ? (
                                     run.workflow.scorecard ? (
-                                        <a href={`/scorecard/${run.workflow.scorecard.id}`}>{run.score}</a>
+                                        <a
+                                            href={`./ai-scorecard/${props.submission.id}/${run.workflow.id}`}
+                                        >
+                                            {run.score}
+                                        </a>
                                     ) : run.score
                                 ) : '-'}
                             </td>

src/apps/review/src/lib/components/Scorecard/ScorecardAttachments/ScorecardAttachments.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+
+// import styles from './ScorecardAttachments.module.scss'
+
+interface ScorecardAttachmentsProps {
+    className?: string
+}
+
+const ScorecardAttachments: FC<ScorecardAttachmentsProps> = props => (
+    <div className={props.className}>
+        attachments
+    </div>
+)
+
+export default ScorecardAttachments

src/apps/review/src/lib/components/Scorecard/ScorecardAttachments/index.ts

@@ -0,0 +1 @@
+export { default as ScorecardAttachments } from './ScorecardAttachments'

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardGroup/ScorecardGroup.module.scss

@@ -0,0 +1,70 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+}
+
+.headerBar {
+    display: flex;
+    align-items: center;
+    gap: $sp-4;
+
+    background: #00797A;
+    padding: $sp-4;
+
+    font-family: "Nunito Sans", sans-serif;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 22px;
+    color: #FFFFFF;
+
+    cursor: pointer;
+    transition: 0.15s ease-in-out;
+
+    &:hover {
+        background: darken(#00797A, 1.5%);
+    }
+
+    &:active {
+        transition: none;
+        background: darken(#00797A, 3%);
+    }
+
+    &.toggled {
+        .toggleBtn {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    @include ltemd {
+        flex-wrap: wrap;
+        row-gap: $sp-2;
+
+        .score {
+            order: 7;
+            width: 100%;
+            margin-left: $sp-10;
+        }
+    }
+}
+
+.index {
+    width: 24px;
+}
+
+.mx {
+    margin: 0 auto;
+}
+
+.toggleBtn {
+    cursor: pointer;
+    width: 24px;
+
+    svg {
+        display: block;
+        width: 16px;
+        height: 16px;
+        transition: 0.15s ease-in-out;
+    }
+}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardGroup/ScorecardGroup.tsx

@@ -0,0 +1,61 @@
+import { FC, useCallback, useMemo } from 'react'
+import classNames from 'classnames'
+
+import { IconOutline } from '~/libs/ui'
+
+import { ScorecardGroup as ScorecardGroupModel } from '../../../../models'
+import { ScorecardSection } from '../ScorecardSection'
+import { ScorecardViewerContextValue, useScorecardContext } from '../ScorecardViewer.context'
+import { ScorecardScore } from '../ScorecardScore'
+import { calcGroupScore } from '../utils'
+
+import styles from './ScorecardGroup.module.scss'
+
+interface ScorecardGroupProps {
+    index: number
+    group: ScorecardGroupModel
+}
+
+const ScorecardGroup: FC<ScorecardGroupProps> = props => {
+    const { aiFeedbackItems }: ScorecardViewerContextValue = useScorecardContext()
+    const allFeedbackItems = aiFeedbackItems || []
+    const { toggleItem, toggledItems }: ScorecardViewerContextValue = useScorecardContext()
+
+    const isVissible = !toggledItems[props.group.id]
+    const toggle = useCallback(() => toggleItem(props.group.id), [props.group, toggleItem])
+
+    const score = useMemo(() => (
+        calcGroupScore(props.group, allFeedbackItems)
+    ), [props.group, allFeedbackItems])
+
+    return (
+        <div className={styles.wrap}>
+            <div className={classNames(styles.headerBar, isVissible && styles.toggled)} onClick={toggle}>
+                <span className={styles.index}>
+                    {props.index}
+                    .
+                </span>
+                <span className={styles.name}>
+                    {props.group.name}
+                </span>
+                <span className={styles.mx} />
+                <span className={styles.score}>
+                    <ScorecardScore
+                        score={score}
+                        scaleMax={1}
+                        weight={props.group.weight}
+                    />
+                </span>
+                <span className={styles.toggleBtn}>
+                    <IconOutline.ChevronDownIcon />
+                </span>
+            </div>
+
+            {isVissible && props.group.sections.map((section, index) => (
+                <ScorecardSection key={section.id} section={section} index={[props.index, index + 1].join('.')} />
+            ))}
+        </div>
+    )
+}
+
+export default ScorecardGroup

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardGroup/index.ts

@@ -0,0 +1 @@
+export { default as ScorecardGroup } from './ScorecardGroup'

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.module.scss

@@ -0,0 +1,11 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+    p {
+        margin-bottom: $sp-4;
+
+        @include ltemd {
+            margin-bottom: $sp-2;
+        }
+    }
+}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/AiFeedback.tsx

@@ -0,0 +1,51 @@
+import { FC, useMemo } from 'react'
+
+import { IconAiReview } from '~/apps/review/src/lib/assets/icons'
+import { ScorecardQuestion } from '~/apps/review/src/lib/models'
+
+import { ScorecardViewerContextValue, useScorecardContext } from '../../ScorecardViewer.context'
+import { ScorecardQuestionRow } from '../ScorecardQuestionRow'
+import { ScorecardScore } from '../../ScorecardScore'
+
+import styles from './AiFeedback.module.scss'
+
+interface AiFeedbackProps {
+    question: ScorecardQuestion
+}
+
+const AiFeedback: FC<AiFeedbackProps> = props => {
+    const { aiFeedbackItems }: ScorecardViewerContextValue = useScorecardContext()
+    const feedback = useMemo(() => (
+        aiFeedbackItems?.find(r => r.scorecardQuestionId === props.question.id)
+    ), [props.question.id, aiFeedbackItems])
+
+    if (!aiFeedbackItems?.length || !feedback) {
+        return <></>
+    }
+
+    const isYesNo = props.question.type === 'YES_NO'
+
+    return (
+        <ScorecardQuestionRow
+            icon={<IconAiReview />}
+            index='AI Feedback'
+            className={styles.wrap}
+            score={(
+                <ScorecardScore
+                    score={feedback.questionScore}
+                    scaleMax={props.question.scaleMax}
+                    weight={props.question.weight}
+                />
+            )}
+        >
+            {isYesNo && (
+                <p>
+                    <strong>{feedback.questionScore ? 'Yes' : 'No'}</strong>
+                </p>
+            )}
+            {feedback.content}
+        </ScorecardQuestionRow>
+    )
+}
+
+export default AiFeedback

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedback/index.ts

@@ -0,0 +1 @@
+export { default as AiFeedback } from './AiFeedback'

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestion.module.scss

@@ -0,0 +1,25 @@
+@import '@libs/ui/styles/includes';
+
+.toggleBtn {
+    cursor: pointer;
+    display: block;
+    width: 16px;
+    height: 16px;
+    color: #767676;
+    transition: 0.15s ease-in-out;
+
+    &.toggled {
+        transform: rotate(180deg);
+    }
+}
+
+.questionText {
+    font-weight: bold;
+    + * {
+        margin-top: $sp-2;
+    }
+}
+
+.guidelines {
+    white-space: pre-wrap;
+}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestion.tsx

@@ -0,0 +1,51 @@
+import { FC, useCallback } from 'react'
+import classNames from 'classnames'
+
+import { IconOutline } from '~/libs/ui'
+
+import { ScorecardQuestion as ScorecardQuestionModel } from '../../../../models'
+import { ScorecardViewerContextValue, useScorecardContext } from '../ScorecardViewer.context'
+
+import { AiFeedback } from './AiFeedback'
+import { ScorecardQuestionRow } from './ScorecardQuestionRow'
+import styles from './ScorecardQuestion.module.scss'
+
+interface ScorecardQuestionProps {
+    index: string
+    question: ScorecardQuestionModel
+}
+
+const ScorecardQuestion: FC<ScorecardQuestionProps> = props => {
+    const { toggleItem, toggledItems }: ScorecardViewerContextValue = useScorecardContext()
+
+    const isToggled = toggledItems[props.question.id!]
+    const toggle = useCallback(() => toggleItem(props.question.id!), [props.question, toggleItem])
+
+    return (
+        <div className={styles.wrap}>
+            <ScorecardQuestionRow
+                icon={(
+                    <IconOutline.ChevronDownIcon
+                        className={classNames(styles.toggleBtn, isToggled && styles.toggled)}
+                        onClick={toggle}
+                    />
+                )}
+                index={`Question ${props.index}`}
+                className={styles.headerBar}
+                score=''
+            >
+                <span className={styles.questionText}>
+                    {props.question.description}
+                </span>
+                {isToggled && (
+                    <div className={styles.guidelines}>
+                        {props.question.guidelines}
+                    </div>
+                )}
+            </ScorecardQuestionRow>
+            <AiFeedback question={props.question} />
+        </div>
+    )
+}
+
+export default ScorecardQuestion

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestionRow/ScorecardQuestionRow.module.scss

@@ -0,0 +1,54 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+    display: grid;
+    gap: $sp-4;
+    padding: $sp-4;
+    grid-template-columns: 24px 128px auto 144px 24px;
+
+    font-family: "Nunito Sans", sans-serif;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 20px;
+    color: #0A0A0A;
+
+    @include ltemd {
+        display: flex;
+        gap: $sp-2 $sp-4;
+        flex-wrap: wrap;
+
+        .icon {
+            width: 24px;
+            flex: 0 0 auto
+        }
+
+        .index {
+            width: 128px;
+            flex: 0 0 auto
+        }
+
+        .content {
+            flex: 100%;
+            padding-left: $sp-10;
+        }
+
+        .score {
+            width: 100%;
+            padding-left: $sp-10;
+
+            &:empty {
+                display: none;
+            }
+            &:not(:empty)::before {
+                content: 'Score';
+                display: block;
+                font-weight: bold;
+                margin-bottom: $sp-2;
+            }
+        }
+    }
+}
+
+.content {
+    font-weight: normal;
+}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestionRow/ScorecardQuestionRow.tsx

@@ -0,0 +1,22 @@
+import { FC, PropsWithChildren, ReactNode } from 'react'
+import classNames from 'classnames'
+
+import styles from './ScorecardQuestionRow.module.scss'
+
+interface ScorecardQuestionRowProps extends PropsWithChildren {
+    className?: string
+    icon?: ReactNode
+    index?: string
+    score?: ReactNode
+}
+
+const ScorecardQuestionRow: FC<ScorecardQuestionRowProps> = props => (
+    <div className={classNames(props.className, styles.wrap)}>
+        <span className={styles.icon}>{props.icon}</span>
+        <span className={styles.index}>{props.index}</span>
+        <span className={styles.content}>{props.children}</span>
+        <span className={styles.score}>{props.score}</span>
+    </div>
+)
+
+export default ScorecardQuestionRow

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ScorecardQuestionRow/index.ts

@@ -0,0 +1 @@
+export { default as ScorecardQuestionRow } from './ScorecardQuestionRow'

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/index.ts

@@ -0,0 +1 @@
+export { default as ScorecardQuestion } from './ScorecardQuestion'