@lunit/oui 3.1.0 → 3.1.1

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { AnalysisBarSegmentContainer, AnalysisBarOuter, AxisLabels, GraphAxisLabel, GraphScoreIndicator, GraphSegment, } from './AnalysisBar.styled';
-import { parseStringValToNumber, normalizeSegmentWidths } from './AnalysisBar.utils';
+import { resolveExpressionLevel, normalizeSegmentWidths } from './AnalysisBar.utils';
 import HeatmapGraphSVG from './HeatmapGraphIcon/HeatmapGraphSVG';
 const Segments = ({ segments, isCutoff }) => {
     if (!segments) {
@@ -40,7 +40,8 @@ const AnalysisBar = ({ componentType = 'analysisBar', isCutoff = false, expressi
     const normalizedSegments = normalizeSegmentWidths(segments, isCutoff);
     return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { value: expressionValue, isCutoff: isCutoff, isJet: normalizedSegments?.[0]?.color === 'jet' })), _jsx(Segments, { segments: normalizedSegments, isCutoff: isCutoff })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
                         expressionLevels.map((val, i) => {
-                            return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || val, isCutoff: isCutoff, leftPos: parseStringValToNumber(val) }, i));
+                            const { label, position } = resolveExpressionLevel(val);
+                            return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || label, isCutoff: isCutoff, leftPos: position }, i));
                         }), caption && (_jsx(GraphAxisLabel, { label: caption, isCutoff: isCutoff, leftPos: 50 }))] }))] }));
 };
 export default AnalysisBar;

package/dist/presentations/AnalysisBar/AnalysisBar.utils.js

@@ -2,6 +2,17 @@ export function parseStringValToNumber(val) {
     const value = val.endsWith('%') ? val.slice(0, -1) : val;
     return parseInt(value, 10);
 }
+/**
+ * @description resolveExpressionLevel normalizes an expression level into a label and its position on the bar.
+ * @param level - A numeric string ('20', '20%') used as both label and position, or an object with an explicit label and position.
+ * @returns The label to display and its position on the bar.
+ */
+export function resolveExpressionLevel(level) {
+    if (typeof level === 'string') {
+        return { label: level, position: parseStringValToNumber(level) };
+    }
+    return level;
+}
 export function clampNumericalPercentage(value) {
     if (value >= 100)
         return 100;

package/dist/types/presentations/AnalysisBar/AnalysisBar.types.d.ts

@@ -1,7 +1,16 @@
+/** A label placed at an explicit position on the bar */
+export interface AnalysisBarLevel {
+    /** Text displayed under the bar */
+    label: string;
+    /** Horizontal position on the bar, 0-100 (%) */
+    position: number;
+}
+/** Either a numeric string ('20', '20%') that doubles as its own label, or an explicitly positioned label */
+export type AnalysisBarExpressionLevel = string | AnalysisBarLevel;
 export interface AnalysisBarProps {
     componentType: 'analysisBar';
     isCutoff?: boolean;
-    expressionLevels?: string[];
+    expressionLevels?: AnalysisBarExpressionLevel[];
     caption?: string;
     segments?: {
         color: 'jet' | string;

package/dist/types/presentations/AnalysisBar/AnalysisBar.utils.d.ts

@@ -1,4 +1,11 @@
+import type { AnalysisBarExpressionLevel, AnalysisBarLevel } from './AnalysisBar.types';
 export declare function parseStringValToNumber(val: string): number;
+/**
+ * @description resolveExpressionLevel normalizes an expression level into a label and its position on the bar.
+ * @param level - A numeric string ('20', '20%') used as both label and position, or an object with an explicit label and position.
+ * @returns The label to display and its position on the bar.
+ */
+export declare function resolveExpressionLevel(level: AnalysisBarExpressionLevel): AnalysisBarLevel;
 export declare function clampNumericalPercentage(value: number): number;
 export declare function clampBarLabelPosition(value: number): number;
 /**

package/dist/types/presentations/AnalysisBar/index.d.ts

@@ -1,4 +1,4 @@
 import AnalysisBar from './AnalysisBar';
-import type { AnalysisBarProps } from './AnalysisBar.types';
+import type { AnalysisBarProps, AnalysisBarLevel, AnalysisBarExpressionLevel } from './AnalysisBar.types';
 export { AnalysisBar };
-export type { AnalysisBarProps };
+export type { AnalysisBarProps, AnalysisBarLevel, AnalysisBarExpressionLevel };

package/docs/COMPONENTS.md

@@ -99,6 +99,34 @@ Exported together from `@lunit/oui`. Composite components for the oncology analy
 
 `Accordion`, `AnalysisBar`, `FreeText`, `Histogram`, `HorizonDivider`, `ModelType`, `Preview`, `Score`, `Statistic`, `Threshold`, `ToggleControl`, `ToggleControlGroup`
 
+### AnalysisBar — `expressionLevels`
+
+Axis labels under the bar. Each item is either a numeric string, which is both the label and its position, or an object that places arbitrary text at an explicit position.
+
+```tsx
+// numeric strings: label and position are the same value
+<AnalysisBar componentType="analysisBar" expressionLevels={['0', '20', '100']} segments={segments} />
+
+// text labels at explicit positions (0-100)
+<AnalysisBar
+  componentType="analysisBar"
+  expressionLevels={[
+    { label: 'Low', position: 0 },
+    { label: 'High', position: 100 },
+  ]}
+  segments={segments}
+/>
+
+// the two forms can be mixed
+<AnalysisBar
+  componentType="analysisBar"
+  expressionLevels={['0', { label: 'Cutoff', position: 20 }, '100']}
+  segments={segments}
+/>
+```
+
+`expressionLabels[i]`, when present, still overrides the displayed text of the i-th level while its position is unchanged.
+
 ---
 
 ## Usage examples

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"