[Copilot]

How the feature works? / How did you fix the issue?

Converted Analyse.jsx to TypeScript to enforce compile-time type safety for component props, eliminating prop validation gaps.

Type definitions added:

• AnalyseValues – Server response structure (gross formula, molecular weight, exact mass, elemental analysis)
• RoundSettings – Decimal precision configuration for numeric values
• AnalyseItem – Display item configuration with optional rounding
• AnalyseDialogProps – Redux state-derived props (extends DialogParams)
• AnalyseDialogCallProps – Action callbacks (onAnalyse, onChangeRound)

Code improvements:

• Typed roundOff helper with explicit string | number → string signature
• Typed renderInputComponent with ReactElement return type
• Extracted inline items array to typed constant for maintainability
• Added context type declaration for ErrorsContext
• Fixed Select component value prop to pass numeric values instead of strings, ensuring decimal places dropdown displays selected values correctly

Before (JavaScript):

class AnalyseDialog extends Component {
  renderInputComponent(item, values, loading, round) {
    // No type checking on parameters or return value
  }
}

After (TypeScript):

class AnalyseDialog extends Component<Props> {
  renderInputComponent(
    item: AnalyseItem,
    values: AnalyseValues | null,
    loading: boolean,
    round: RoundSettings,
  ): ReactElement {
    // Compile-time type safety enforced
  }
}

Bug fix:
During TypeScript conversion, the Select component's value prop was incorrectly converted to a string (.toString()), but the Select options contain numeric values (0-7). This type mismatch prevented the selected decimal places from being displayed in the dropdown. Fixed by passing numeric values directly to match the option values type.

Check list

• unit-tests written
• e2e-tests written
• documentation updated
• PR name follows the pattern #1234 – issue name
• branch name doesn't contain '#'
• PR is linked with the issue
• base branch (master or release/xx) is correct
• task status changed to "Code review"
• reviewers are notified about the pull request

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Refactor: Variables are missing in props validation (let's rewrite JS to TS) 10</issue_title>
<issue_description>Problem: Variables are missing in props validation
React components should validate prop types

Why is this an issue?
In JavaScript, props are typically passed as plain objects, which can lead to errors and confusion when working with components that have specific prop requirements. However, it lacks of type safety and clarity when passing props to components in a codebase.

By defining types for component props, developers can enforce type safety and provide clear documentation for the expected props of a component. This helps catch potential errors at compile-time. It also improves code maintainability by making it easier to understand how components should be used and what props they accept.

How can I fix it?
Let re-write the entire file on TypeScript and define types for all props.

Problem locations:
packages/ketcher-react/src/script/ui/views/modal/components/process/Analyse/Analyse.jsx</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Refactor: Variables are missing in props validation (let's rewrite JS to TS) 10 #8507

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[AlexeyGirin]

@copilot in resulted Calculated Values dialog values in Decimal places dropdowns are not shown. I can select different value (e.g. 5) and see it applied to values in Molecular Weight and Exact Mass edit boxes but values itself in Decimal places are not shown. Please fix that

[Copilot]

@copilot in resulted Calculated Values dialog values in Decimal places dropdowns are not shown. I can select different value (e.g. 5) and see it applied to values in Molecular Weight and `Exac...

Fixed in b799d32. The issue was that I converted the Select value to string (.toString()), but the Select component's options contain numeric values (0-7). This type mismatch prevented the component from finding and displaying the selected option. Now passing the numeric value directly to match the option values.