@magmamath/students-features 1.3.4-rc.2 → 1.3.4

package/src/features/pmProgress/model/PmTreeModel.ts

@@ -0,0 +1,171 @@
+import { attach, createEffect, createEvent, createStore, restore, sample } from 'effector'
+import { createAction } from 'effector-action'
+import {
+  Domain,
+  Grade,
+  PmProgressGateProps,
+  SetupInitialGradeProps,
+  StatsResponse,
+  GetTreeContextFxParams,
+  TreeContext,
+  TreeMappingResponse,
+  User,
+} from '../shared/pmProgress.types'
+import { PmProgressApi } from './PmProgressApi'
+import { enhanceProgressMatrixData } from '@matteappen/skills-utils'
+import {
+  getDomainStructure,
+  getInitialPmGrade,
+  getTreeGrades,
+  isTreeDataReady,
+} from '../shared/pmProgress.helpers'
+import { TreeNormalizer } from '../shared/TreeNormalizer'
+import { persist } from 'effector-storage/session'
+import { PmProgressStatus, SessionStorageKeys } from '../shared/pmProgress.constants'
+import { isWeb } from '../../../shared/common.constants'
+
+export class PmTreeModel {
+  private readonly $tree = createStore<TreeMappingResponse | null>(null)
+  private readonly $stats = createStore<StatsResponse | null>(null)
+  private readonly $user = createStore<User | null>(null)
+
+  private readonly setupInitialGrade = createEvent<SetupInitialGradeProps>()
+  private readonly setDomains = createEvent<Domain[]>()
+  public readonly setGrade = createEvent<number | null>()
+
+  public readonly $isInitialized = createStore(false)
+  public readonly $grade = restore(this.setGrade, null)
+  public readonly $domains = restore(this.setDomains, [])
+  public readonly $grades = createStore<Grade[]>([])
+  public readonly $status = createStore<PmProgressStatus | null>(null)
+
+  constructor(private readonly api: PmProgressApi) {
+    if (isWeb) {
+      persist({ key: SessionStorageKeys.GRADE, store: this.$grade })
+      persist({ key: SessionStorageKeys.DOMAINS, store: this.$domains })
+    }
+
+    this.setupFailedAndLockedStatus()
+    this.setupTreeInit()
+    this.setupGradeInit()
+    this.setupDomainStructure()
+  }
+
+  public readonly initTreeFx = createEffect(async ({ user }: PmProgressGateProps) => {
+    if (!user.setting.practiceModeTreeId) {
+      throw new Error('practiceModeTreeId is not set')
+    }
+
+    const [tree, stats] = await Promise.all([
+      this.api.getTreeFx(user.setting.practiceModeTreeId),
+      this.api.getStatisticsFx({ entityIds: [user._id] }),
+    ])
+    return [TreeNormalizer.normalize(tree), stats] as const
+  })
+
+  public readonly getTreeContextFx = attach({
+    source: { tree: this.$tree, stats: this.$stats, user: this.$user, grade: this.$grade },
+    mapParams: (_: void, source): GetTreeContextFxParams => {
+      if (!isTreeDataReady(source)) {
+        throw new Error(
+          'Cannot create treeWithUserStats in getTreeWithStatsFx - tree data is not ready.',
+        )
+      }
+      return source as GetTreeContextFxParams
+    },
+    effect: createEffect(({ tree, stats, user, grade }: GetTreeContextFxParams): TreeContext => {
+      const [treeWithStats] = enhanceProgressMatrixData(
+        Object.values(tree.treeMapping),
+        stats,
+        [{ entityId: user._id, name: user.fullName }],
+        grade,
+      )
+      return {
+        tree,
+        stats,
+        user,
+        treeWithStats,
+      }
+    }),
+  })
+
+  private setupFailedAndLockedStatus() {
+    sample({
+      clock: this.initTreeFx.fail,
+      fn: () => PmProgressStatus.ERROR,
+      target: this.$status,
+    })
+
+    sample({
+      clock: this.$grades,
+      filter: (grades) => grades.length > 0 && grades.every((g) => g.isLocked),
+      fn: () => PmProgressStatus.LOCKED,
+      target: this.$status,
+    })
+  }
+
+  private setupTreeInit() {
+    createAction(this.initTreeFx.done, {
+      target: {
+        $tree: this.$tree,
+        $stats: this.$stats,
+        $user: this.$user,
+        $grades: this.$grades,
+        $isInitialized: this.$isInitialized,
+        setupInitialGrade: this.setupInitialGrade,
+      },
+      fn: (target, { params: { user }, result: [tree, stats] }) => {
+        target.$tree(tree)
+        target.$stats(stats)
+        target.$user(user)
+        target.$grades(getTreeGrades(tree, user))
+        target.setupInitialGrade({ tree, user })
+        target.$isInitialized(true)
+      },
+    })
+  }
+
+  private setupGradeInit() {
+    sample({
+      clock: this.setupInitialGrade,
+      source: this.$grade,
+      fn: (grade, { tree, user }) => {
+        const userLockedGrades = user.setting.practiceModeLockedGrades
+
+        const isPersistedGradeValid = isWeb && grade !== null && !userLockedGrades.includes(grade)
+        if (isPersistedGradeValid) return grade
+
+        const treeGrades = Object.values(tree.treeMapping)
+          .filter((node) => node.type === 'grade')
+          .map((node) => node.attributes.grade)
+
+        return getInitialPmGrade({
+          userGrade: user.grade,
+          treeGrades,
+          lockedGrades: userLockedGrades,
+          enrolledGrades: user.enrolledGrades,
+        })
+      },
+      target: this.setGrade,
+    })
+  }
+
+  private setupDomainStructure() {
+    sample({
+      clock: [this.$grade, this.initTreeFx.doneData],
+      source: { tree: this.$tree, stats: this.$stats, user: this.$user, grade: this.$grade },
+      filter: isTreeDataReady,
+      fn: ({ tree, stats, user, grade }) => {
+        const [treeWithUserStats] = enhanceProgressMatrixData(
+          Object.values(tree.treeMapping),
+          stats,
+          [{ entityId: user._id, name: user.fullName }],
+          grade as number,
+        )
+
+        return getDomainStructure(treeWithUserStats, tree.treeMapping)
+      },
+      target: this.setDomains,
+    })
+  }
+}

package/src/features/pmProgress/shared/TreeNormalizer.ts

@@ -0,0 +1,64 @@
+import type { Skill, SkillsMapping, TreeMappingResponse } from './pmProgress.types'
+
+type TreeMapping = TreeMappingResponse['treeMapping']
+
+/**
+ * Some skills from the API lack a valid ability (missing sectionId and functionName),
+ * making them impossible to open in the solving flow. This normalizer strips those skills
+ * and cascades the cleanup - removing standards, domains, etc. that end up empty.
+ *
+ * Acts as a single place to sanitize the tree API response before it enters the app.
+ * Can be extended with additional normalizations as new edge cases arise.
+ */
+export class TreeNormalizer {
+  static normalize(response: TreeMappingResponse): TreeMappingResponse {
+    const skillsMapping = this.getOnlyValidSkills(response.skillsMapping)
+    const validIds = new Set(Object.keys(skillsMapping))
+    const treeMapping = this.removeEmptyNodes(response.treeMapping, validIds)
+    return { ...response, skillsMapping, treeMapping }
+  }
+
+  static isSkillValid(skill: Skill) {
+    return Boolean(skill?.ability && (skill.ability.sectionId || skill.ability.functionName))
+  }
+
+  private static getOnlyValidSkills(mapping: SkillsMapping): SkillsMapping {
+    return Object.fromEntries(
+      Object.entries(mapping).filter(([, skill]) => this.isSkillValid(skill)),
+    )
+  }
+
+  private static removeEmptyNodes(treeMapping: TreeMapping, validIds: Set<string>): TreeMapping {
+    const emptyIds = this.getEmptyNodeIds(treeMapping, validIds)
+
+    return Object.fromEntries(
+      Object.entries(treeMapping)
+        .filter(([id]) => !emptyIds.has(id))
+        .map(([id, node]) => [
+          id,
+          {
+            ...node,
+            skills: node.skills.filter((sid) => validIds.has(sid)),
+            children: node.children.filter((cid) => !emptyIds.has(cid)),
+          },
+        ]),
+    )
+  }
+
+  private static getEmptyNodeIds(treeMapping: TreeMapping, validIds: Set<string>) {
+    const empty = new Set<string>()
+
+    const leafToRoot = Object.entries(treeMapping).sort(
+      ([, a], [, b]) => b.parents.length - a.parents.length,
+    )
+
+    for (const [id, node] of leafToRoot) {
+      const isEmptyLeaf = node.skills.length > 0 && node.skills.every((s) => !validIds.has(s))
+      const isEmptyParent = node.children.length > 0 && node.children.every((c) => empty.has(c))
+
+      if (isEmptyLeaf || isEmptyParent) empty.add(id)
+    }
+
+    return empty
+  }
+}

package/src/features/pmProgress/shared/pmProgress.constants.ts

@@ -0,0 +1,100 @@
+import { COLORS } from '@magmamath/react-native-ui'
+import { Dimensions } from 'react-native'
+
+export const STATS_MAX_HEIGHT = 136
+export const RECOMMENDATIONS_LIMIT_PARAM = 150
+export const MAX_PIE_CHART_SIZE = 505
+
+export enum CustomDomain {
+  TEACHER = 'TEACHER',
+  FLUENCY = 'FLUENCY',
+}
+
+export enum InsightsTimeframe {
+  ALL = 'all',
+  WEEK = 'week',
+  LAST_WEEK = 'lastWeek',
+}
+
+export enum SolvingFlow {
+  TEACHER = 'TEACHER',
+  MAGMA = 'MAGMA',
+  STANDARD = 'STANDARD',
+}
+
+export enum OpeningLoaderId {
+  START_BUTTON = 'START_BUTTON',
+  PRACTICE_BUTTON = 'PRACTICE_BUTTON',
+}
+
+export enum PmProgressStatus {
+  LOCKED = 'LOCKED',
+  ERROR = 'ERROR',
+}
+
+export enum SessionStorageKeys {
+  SOLVING_QUEUE = 'PM_SOLVING_QUEUE',
+  GRADE = 'PM_GRADE',
+  DOMAINS = 'PM_DOMAINS',
+}
+
+/**
+ * Primary → _4 → _6 variants, cycling through 7 base colors.
+ * Supports up to 21 unique colors before repeating.
+ */
+export const DOMAIN_COLORS = [
+  COLORS.PRIMARY_RED,
+  COLORS.PRIMARY_MAGENTA,
+  COLORS.PRIMARY_PURPLE,
+  COLORS.PRIMARY_INDIGO,
+  COLORS.PRIMARY_TURQUOISE,
+  COLORS.PRIMARY_GREEN,
+  COLORS.RED_4,
+  COLORS.MAGENTA_4,
+  COLORS.PURPLE_4,
+  COLORS.INDIGO_4,
+  COLORS.TURQUOISE_4,
+  COLORS.GREEN_4,
+  COLORS.RED_6,
+  COLORS.MAGENTA_6,
+  COLORS.PURPLE_6,
+  COLORS.INDIGO_6,
+  COLORS.TURQUOISE_6,
+  COLORS.GREEN_6,
+]
+
+export const EMPTY_PIE_CHART_DATA = Array.from({ length: 5 }, () => ({
+  value: 1,
+  fillPercent: 0,
+  fillColor: COLORS.NEUTRAL_4,
+  borderColor: COLORS.NEUTRAL_4,
+  backgroundColor: COLORS.NEUTRAL_3,
+}))
+
+export const DOMAIN_BORDER_COLORS = [
+  COLORS.RED_6,
+  COLORS.MAGENTA_6,
+  COLORS.PURPLE_6,
+  COLORS.INDIGO_6,
+  COLORS.TURQUOISE_6,
+  COLORS.GREEN_6,
+  COLORS.RED_6,
+  COLORS.MAGENTA_6,
+  COLORS.PURPLE_6,
+  COLORS.INDIGO_6,
+  COLORS.TURQUOISE_6,
+  COLORS.GREEN_6,
+  COLORS.RED_6,
+  COLORS.MAGENTA_6,
+  COLORS.PURPLE_6,
+  COLORS.INDIGO_6,
+  COLORS.TURQUOISE_6,
+  COLORS.GREEN_6,
+]
+
+export const BURGER_MENU_BREAKPOINT = 1024
+export const SMALL_SCREEN_THRESHOLD = 568
+export const SMALL_SCREEN_MENU_MAX_HEIGHT = 300
+export const WINDOW_HEIGHT = Dimensions.get('window').height
+export const MENU_MAX_HEIGHT =
+  WINDOW_HEIGHT <= SMALL_SCREEN_THRESHOLD ? SMALL_SCREEN_MENU_MAX_HEIGHT : WINDOW_HEIGHT * 0.8

package/src/features/pmProgress/shared/pmProgress.helpers.ts

@@ -0,0 +1,307 @@
+import { COLORS } from '@magmamath/react-native-ui'
+import type { ProgressMatrixStatsDto } from '@matteappen/skills-utils/enhanceProgressData/types'
+import {
+  Domain,
+  DomainStandard,
+  Grade,
+  Skill,
+  SkillsMapping,
+  StatsResponse,
+  TreeMappingResponse,
+  User,
+} from './pmProgress.types'
+import { CustomDomain, DOMAIN_BORDER_COLORS, DOMAIN_COLORS } from './pmProgress.constants'
+import { dynamicCornerRadius, dynamicInnerRadius } from '../components/chart/chart.helpers'
+import type { PieChartManagerConfig } from '../components/chart/chart.types'
+import { getText } from '../../../shared/translation/helpers'
+import type { GradeLabelsMap } from './pmProgress.types'
+
+const groupStandardsByDomain = (
+  standardStats: ProgressMatrixStatsDto[number]['standardStats'],
+  treeMapping: TreeMappingResponse['treeMapping'],
+) => {
+  const grouped = new Map<string, Domain['standards']>()
+
+  for (const [standardId, stat] of Object.entries(standardStats)) {
+    const { domainId, skillIds, skillsCount, scorePercentage, skillsToPractice } = stat
+
+    if (!grouped.has(domainId)) {
+      grouped.set(domainId, [])
+    }
+
+    const completed =
+      !skillsToPractice ||
+      (skillsToPractice.failed.length === 0 && skillsToPractice.unattempted.length === 0)
+    const left = skillsToPractice
+      ? skillsToPractice.failed.length + skillsToPractice.unattempted.length
+      : 0
+
+    grouped.get(domainId)!.push({
+      standardId,
+      title:
+        treeMapping[standardId].shortDescriptionTranslations ||
+        treeMapping[standardId].nameTranslations,
+      subtitle: treeMapping[standardId].originalId,
+      skillIds,
+      skillsToPractice,
+      skillsCount,
+      isCompleted: completed,
+      skillsLeft: left,
+      scorePercentage,
+    })
+  }
+
+  return grouped
+}
+
+const averageScorePercentage = (standards: Domain['standards']): number => {
+  if (standards.length === 0) return 0
+  const sum = standards.reduce((acc, s) => acc + s.scorePercentage, 0)
+  return Math.round((sum / standards.length) * 10) / 10
+}
+
+const resolveDomainColors = (nonFluencyIndex: number) => {
+  if (nonFluencyIndex < 0) {
+    return { color: COLORS.PRIMARY_ORANGE, borderColor: COLORS.ORANGE_6 }
+  }
+  return {
+    color: DOMAIN_COLORS[nonFluencyIndex] ?? DOMAIN_COLORS[DOMAIN_COLORS.length - 1],
+    borderColor:
+      DOMAIN_BORDER_COLORS[nonFluencyIndex] ??
+      DOMAIN_BORDER_COLORS[DOMAIN_BORDER_COLORS.length - 1],
+  }
+}
+
+export const getDomainStructure = (
+  data: ProgressMatrixStatsDto[number],
+  treeMapping: TreeMappingResponse['treeMapping'],
+): Domain[] => {
+  const grouped = groupStandardsByDomain(data.standardStats, treeMapping)
+
+  const entries = Array.from(grouped.entries())
+  const nonFluencyDomainIds = entries
+    .map(([id]) => id)
+    .filter((id) => !isFluencyDomain(treeMapping[id].nameTranslations))
+
+  return entries.map(([domainId, standards]) => {
+    const title = treeMapping[domainId].nameTranslations
+    const nonFluencyIndex = nonFluencyDomainIds.indexOf(domainId)
+
+    return {
+      domainId,
+      title,
+      ...resolveDomainColors(nonFluencyIndex),
+      backgroundColor: COLORS.NEUTRAL_4,
+      standards,
+      scorePercentage: averageScorePercentage(standards),
+    }
+  })
+}
+
+type GetInitialPmGradeParams = {
+  treeGrades: number[]
+  lockedGrades: number[]
+  enrolledGrades: number[]
+  userGrade: number | null | undefined
+}
+
+/**
+ * Resolves which grade a student should practice on.
+ *
+ * When userGrade is -1, null, or undefined (i.e. not explicitly set), we fall back
+ * to the student's enrolled grades and pick the lowest one that isn't locked.
+ * If userGrade is set but locked, we find the closest unlocked grade.
+ * All candidates are filtered against lockedGrades, so only unlocked grades are ever returned.
+ *
+ * Examples:
+ *   locked=[1,2],     enrolled=[2,5], grade=4  → 4 (unlocked, use as-is)
+ *   locked=[1,2],     enrolled=[2,5], grade=-1 → 5 (lowest unlocked enrolled)
+ *   locked=[0,1,2,5], enrolled=[2,5], grade=-1 → 3 (no enrolled available, first unlocked)
+ *   locked=[0,1],     enrolled=[2,5], grade=-1 → 2 (lowest unlocked enrolled)
+ *   locked=[0,1,2,3], enrolled=[3,9], grade=-1 → 9 (lowest unlocked enrolled)
+ *   locked=[1,2,3],   enrolled=[2,5], grade=2  → 4 (grade locked, closest below=none, above=4)
+ */
+export const getInitialPmGrade = ({
+  treeGrades,
+  lockedGrades,
+  enrolledGrades,
+  userGrade,
+}: GetInitialPmGradeParams): number | null => {
+  const locked = new Set(lockedGrades)
+  const unlocked = treeGrades.filter((g) => !locked.has(g)).sort((a, b) => a - b)
+
+  if (unlocked.length === 0) {
+    return null
+  }
+
+  const isUserGradeMissing = userGrade === null || userGrade === -1 || userGrade === undefined
+  if (isUserGradeMissing) {
+    const unlockedEnrolled = enrolledGrades.filter((g) => unlocked.includes(g))
+    return unlockedEnrolled.length > 0 ? Math.min(...unlockedEnrolled) : unlocked[0]
+  }
+
+  if (unlocked.includes(userGrade)) return userGrade
+
+  const nearestBelow = [...unlocked].reverse().find((grade) => grade < userGrade)
+  const nearestAbove = unlocked.find((grade) => grade > userGrade)
+  return nearestBelow ?? nearestAbove ?? unlocked[0] ?? 0
+}
+
+export const formatTime = (ms: number): string => {
+  const totalMinutes = Math.floor(ms / 60_000)
+  if (totalMinutes < 60) return `${totalMinutes}m`
+  const hours = Math.round(totalMinutes / 60)
+  return `${hours}h`
+}
+
+type TreeDataSource = {
+  tree: TreeMappingResponse | null
+  stats: StatsResponse | null
+  user: User | null
+  grade: number | null
+}
+
+type TreeDataReady = {
+  tree: TreeMappingResponse
+  stats: StatsResponse
+  user: User
+  grade: number
+}
+
+export const isTreeDataReady = (source: TreeDataSource): source is TreeDataReady =>
+  source.tree !== null && source.stats !== null && source.user !== null && source.grade !== null
+
+export const createChartConfig = (size: number): PieChartManagerConfig => {
+  const OUTER_MARGIN = 5
+  return {
+    size,
+    outerRadius: size / 2 - OUTER_MARGIN,
+    innerRadius: dynamicInnerRadius,
+    cornerRadius: dynamicCornerRadius,
+    gapBetweenSlices: 8,
+    pressOffset: 4,
+    borderWidth: 4,
+    colors: {
+      background: COLORS.NEUTRAL_1,
+      highlightedBackground: COLORS.NEUTRAL_6,
+    },
+    outerArc: {
+      color: '#FFFFFF40',
+      strokeWidth: 11.75,
+      dashWidth: 22,
+    },
+  }
+}
+
+/**
+ * Returns all skills from a standard, sorted by difficulty.
+ * Used when the standard is fully completed to allow revisiting.
+ */
+export const getAllSkillsFromStandard = (
+  standard: DomainStandard,
+  skillsMapping: SkillsMapping,
+): Skill[] =>
+  standard.skillIds
+    .map((id) => skillsMapping[id])
+    .filter(Boolean)
+    .sort((a, b) => skillsMapping[a._id]?.difficulty - skillsMapping[b._id]?.difficulty)
+
+/**
+ * Returns uncompleted skills from a single standard.
+ * Failed skills come first, then unattempted.
+ */
+export const getUncompletedSkillsFromStandard = (
+  standard: DomainStandard,
+  skillsMapping: SkillsMapping,
+): Skill[] => {
+  if (!standard.skillsToPractice) return []
+
+  return [...standard.skillsToPractice.failed, ...standard.skillsToPractice.unattempted]
+    .map(({ skillId }) => skillsMapping[skillId])
+    .filter(Boolean)
+    .sort((a, b) => skillsMapping[a._id]?.difficulty - skillsMapping[b._id]?.difficulty)
+}
+
+/**
+ * Returns uncompleted skills from a domain, scanning standards from the beginning.
+ * Optionally excludes a standard (used when student selected a specific one).
+ */
+export const getUncompletedSkillsFromDomain = (
+  domain: Domain,
+  skillsMapping: SkillsMapping,
+  excludeStandardId?: string,
+): Skill[] =>
+  domain.standards
+    .filter((s) => !s.isCompleted && s.standardId !== excludeStandardId)
+    .flatMap((s) => getUncompletedSkillsFromStandard(s, skillsMapping))
+
+/**
+ * Returns all uncompleted skills across all domains in list order.
+ * Used as a fallback when recommendation arrays are empty.
+ */
+export const getAllUncompletedSkills = (domains: Domain[], skillsMapping: SkillsMapping): Skill[] =>
+  domains
+    .filter((d) => d.standards.some((s) => !s.isCompleted))
+    .flatMap((d) => getUncompletedSkillsFromDomain(d, skillsMapping))
+
+/** Moves item with the given id to the front: [0,1,2,3,4] with id of 3rd → [3,0,1,2,4] */
+export const shiftToBeginningOfArray = (id: string, items: Skill[]): Skill[] => {
+  const index = items.findIndex((item) => item._id === id)
+  if (index <= 0) return items
+  return [items[index], ...items.slice(0, index), ...items.slice(index + 1)]
+}
+
+export const withoutDuplicates = (skills: (Skill | undefined)[]): Skill[] => {
+  const seen = new Set<string>()
+  return skills.filter((skill): skill is Skill => {
+    if (!skill) return false
+    if (seen.has(skill._id)) return false
+    seen.add(skill._id)
+    return true
+  })
+}
+
+// Reorders grades starting from the given grade, wrapping around. [1,2,3] with start=2 → [2,3,1]
+export const startGradesFrom = (grades: Grade[], startGrade: number): Grade[] => {
+  const index = grades.findIndex(({ value }) => value === startGrade)
+  if (index <= 0) return grades
+  return [...grades.slice(index), ...grades.slice(0, index)]
+}
+
+export const isFluencyDomain = (title: string) => {
+  return title.toLowerCase() === CustomDomain.FLUENCY.toLowerCase()
+}
+
+export const formatGradeName = (grade: number): string => {
+  if (grade === -1) return getText('pmProgress.gradeOther')
+  if (grade === 0) return `${getText('pmProgress.grade')} ${getText('pmProgress.gradeK')}`
+  return `${getText('pmProgress.grade')} ${grade}`
+}
+
+export const formatGradeLabel = (grade: number, customLabelsMap?: GradeLabelsMap): string => {
+  if (!customLabelsMap) return formatGradeName(grade)
+
+  const label = customLabelsMap[String(grade)]
+
+  if (!label) return formatGradeName(grade)
+  if (label.noPrefix) return label.name
+  return `${getText('pmProgress.grade')} ${label.name}`
+}
+
+export const getTreeGrades = (tree: TreeMappingResponse, user: User): Grade[] => {
+  const lockedGrades = new Set(user.setting.practiceModeLockedGrades)
+
+  const gradeNodes = Object.values(tree.treeMapping).filter(
+    (node) => node?.type === 'grade' && node.attributes.grade !== null,
+  )
+
+  const uniqueSortedGrades = [...new Set(gradeNodes.map((node) => node.attributes.grade))].sort(
+    (a, b) => a - b,
+  )
+
+  return uniqueSortedGrades.map((grade) => ({
+    name: formatGradeName(grade),
+    value: grade,
+    isLocked: lockedGrades.has(grade),
+  }))
+}