@pie-lib/charting 6.2.0-next.21 → 6.2.0-next.22

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.2.0-next.22](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@6.2.0-next.21...@pie-lib/charting@6.2.0-next.22) (2026-03-31)
+
+### Bug Fixes
+
+- **charting:** fix math rendering race condition in fractional chart labels PD-5496 ([03d9d81](https://github.com/pie-framework/pie-lib/commit/03d9d8131872aff762866abb5c910312a7151864))
+
 # [6.2.0-next.21](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@6.2.0-next.20...@pie-lib/charting@6.2.0-next.21) (2026-03-25)
 
 **Note:** Version bump only for package @pie-lib/charting

package/lib/mark-label.js

@@ -121,7 +121,7 @@ var MarkLabel = exports.MarkLabel = function MarkLabel(props) {
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     isEditing = _useState8[0],
     setIsEditing = _useState8[1];
-  var root = (0, _react.useRef)(null);
+  var rootRef = (0, _react.useRef)(null);
   var onChange = function onChange(e) {
     if (limitCharacters && e.target.value && e.target.value.length > 20) {
       return;
@@ -149,18 +149,19 @@ var MarkLabel = exports.MarkLabel = function MarkLabel(props) {
     setLabel(mark.label);
   }, [mark.label]);
   (0, _react.useEffect)(function () {
-    (0, _mathRendering.renderMath)(root);
-  }, []);
+    var el = rootRef.current;
+    if (el && mathLabel) {
+      el.innerHTML = mathLabel;
+      (0, _mathRendering.renderMath)(el);
+    }
+  }, [label, mathLabel]);
   return /*#__PURE__*/_react["default"].createElement(StyledContainer, null, correctnessIndicator, isMathRendering() ? /*#__PURE__*/_react["default"].createElement(StyledMathInput, {
     ref: function ref(r) {
-      root = r;
+      rootRef.current = r;
       if (typeof externalInputRef === 'function') {
         externalInputRef(r);
       }
     },
-    dangerouslySetInnerHTML: {
-      __html: getLabelMathFormat(label)
-    },
     className: (0, _classnames["default"])({
       disabled: disabled,
       error: error,

package/lib/mark-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"mark-label.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_styles","_reactInputAutosize","_propTypes","_plot","_styles2","_renderUi","_mathRendering","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledContainer","styled","display","flexDirection","alignItems","StyledInput","_ref2","theme","fontFamily","typography","fontSize","border","correct","incorrect","backgroundColor","concat","palette","error","main","StyledMathInput","_ref3","pointerEvents","textAlign","color","primaryDark","paddingTop","disabled","isFractionFormat","label","trimmedLabel","trim","fracRegex","RegExp","test","getLabelMathFormat","fraction","mixedNr","improperFraction","split","includes","formattedLLabel","undefined","MarkLabel","exports","props","_useState","useState","_useState2","_slicedToArray2","input","setInput","_ref","useCallback","node","_props$mark","mark","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","isHiddenLabel","limitCharacters","correctnessIndicator","_useState3","_useState4","setLabel","_useState5","_useState6","mathLabel","setMathLabel","_useState7","_useState8","isEditing","setIsEditing","root","useRef","onChange","target","value","isMathRendering","onChangeProp","extraStyle","width","useEffect","renderMath","createElement","ref","dangerouslySetInnerHTML","__html","className","classNames","editable","onClick","style","minWidth","position","transformOrigin","transform","visibility","marginTop","name","inputClassName","inputStyle","background","boxSizing","paddingLeft","paddingRight","top","left","onBlur","propTypes","PropTypes","bool","any","func","graphProps","types","GraphPropsType","object","number","shape","string","_default"],"sources":["../src/mark-label.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { styled } from '@mui/material/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\n\nimport { types } from '@pie-lib/plot';\nimport { correct, disabled, incorrect } from './common/styles';\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst StyledContainer = styled('div')({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n});\n\n// eslint-disable-next-line no-unused-vars\nconst StyledInput = styled('input')(({ theme }) => ({\n  float: 'right',\n  fontFamily: theme.typography.fontFamily,\n  fontSize: theme.typography.fontSize,\n  border: 'none',\n  '&.correct': correct('color'),\n  '&.incorrect': incorrect('color'),\n  '&.disabled': {\n    backgroundColor: 'transparent !important',\n  },\n  '&.error': { border: `2px solid ${theme.palette.error.main}` },\n}));\n\nconst StyledMathInput = styled('div')(({ theme }) => ({\n  pointerEvents: 'auto',\n  textAlign: 'center',\n  fontSize: theme.typography.fontSize + 2,\n  fontFamily: theme.typography.fontFamily,\n  color: color.primaryDark(),\n  paddingTop: theme.typography.fontSize / 2,\n  '&.disabled': {\n    ...disabled('color'),\n    backgroundColor: 'transparent !important',\n  },\n  '&.error': {\n    border: `2px solid ${theme.palette.error.main}`,\n  },\n  '&.correct': {\n    ...correct('color'),\n  },\n  '&.incorrect': {\n    ...incorrect('color'),\n  },\n}));\n\nfunction isFractionFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  const fracRegex = new RegExp(/^[1-9]*[0-9]*\\s?[1-9][0-9]*\\/[1-9][0-9]*$/);\n  return fracRegex.test(trimmedLabel);\n}\n\nfunction getLabelMathFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  let fraction;\n  let mixedNr = '';\n  let improperFraction = trimmedLabel.split(' ');\n  if (improperFraction[1] && improperFraction[1].includes('/')) {\n    fraction = improperFraction[1].split('/') || '';\n  } else {\n    fraction = trimmedLabel?.split('/') || '';\n  }\n\n  let formattedLLabel;\n  if (isFractionFormat(label)) {\n    if (improperFraction[0] && improperFraction[1]) {\n      mixedNr = improperFraction[0];\n    }\n    formattedLLabel = `\\\\(${mixedNr}\\\\frac{${fraction[0]}}{${fraction[1]}}\\\\)`;\n    return formattedLLabel;\n  }\n  return undefined;\n}\n\nexport const MarkLabel = (props) => {\n  // eslint-disable-next-line no-unused-vars\n  const [input, setInput] = useState(null);\n  const _ref = useCallback((node) => setInput(node), null);\n\n  const {\n    mark = {},\n    disabled,\n    inputRef: externalInputRef,\n    barWidth,\n    rotate,\n    correctness,\n    autoFocus,\n    error,\n    isHiddenLabel,\n    limitCharacters,\n    correctnessIndicator,\n  } = props;\n\n  const [label, setLabel] = useState(mark.label);\n  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));\n  const [isEditing, setIsEditing] = useState(false);\n  let root = useRef(null);\n\n  const onChange = (e) => {\n    if (limitCharacters && e.target.value && e.target.value.length > 20) {\n      return;\n    }\n\n    setLabel(e.target.value);\n  };\n\n  const isMathRendering = () => {\n    return isEditing === false && mathLabel !== undefined;\n  };\n\n  const onChangeProp = (e) => {\n    setMathLabel(getLabelMathFormat(mark.label));\n    setIsEditing(false);\n    props.onChange(e.target.value);\n  };\n  let extraStyle = {};\n\n  if (rotate) {\n    extraStyle = {\n      width: 'unset',\n      textAlign: 'left',\n    };\n  }\n\n  // useState only sets the value once, to synch props to state need useEffect\n  useEffect(() => {\n    setLabel(mark.label);\n  }, [mark.label]);\n\n  useEffect(() => {\n    renderMath(root);\n  }, []);\n\n  return (\n    <StyledContainer>\n      {correctnessIndicator}\n      {isMathRendering() ? (\n        <StyledMathInput\n          ref={(r) => {\n            root = r;\n            if (typeof externalInputRef === 'function') {\n              externalInputRef(r);\n            }\n          }}\n          dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}\n          className={classNames({\n            disabled: disabled,\n            error: error,\n            correct: mark.editable && correctness?.label === 'correct',\n            incorrect: mark.editable && correctness?.label === 'incorrect',\n          })}\n          onClick={() => setIsEditing(true)}\n          style={{\n            minWidth: barWidth,\n            position: 'fixed',\n            transformOrigin: 'left',\n            transform: `rotate(${rotate}deg)`,\n            visibility: isHiddenLabel ? 'hidden' : 'unset',\n            marginTop: correctnessIndicator ? '24px' : '0',\n          }}\n        ></StyledMathInput>\n      ) : (\n        <AutosizeInput\n          inputRef={(r) => {\n            _ref(r);\n            if (typeof externalInputRef === 'function') {\n              externalInputRef(r);\n            }\n          }}\n          name=\"mark-label-input\"\n          autoFocus={isEditing || autoFocus}\n          disabled={disabled}\n          inputClassName={classNames(\n            correctness && mark.editable ? correctness.label : null,\n            disabled && 'disabled',\n            error && 'error',\n          )}\n          inputStyle={{\n            minWidth: barWidth,\n            textAlign: 'center',\n            background: 'transparent',\n            boxSizing: 'border-box',\n            paddingLeft: 0,\n            paddingRight: 0,\n            border: 'none',\n            ...extraStyle,\n          }}\n          value={label}\n          style={{\n            position: 'fixed',\n            pointerEvents: 'auto',\n            top: 0,\n            left: 0,\n            minWidth: barWidth,\n            transformOrigin: 'left',\n            transform: `rotate(${rotate}deg)`,\n            visibility: isHiddenLabel ? 'hidden' : 'unset',\n            marginTop: correctnessIndicator ? '24px' : '0',\n          }}\n          onChange={onChange}\n          onBlur={onChangeProp}\n        />\n      )}\n    </StyledContainer>\n  );\n};\n\nMarkLabel.propTypes = {\n  autoFocus: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.any,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n  isHiddenLabel: PropTypes.bool,\n  limitCharacters: PropTypes.bool,\n  correctnessIndicator: PropTypes.node,\n};\n\nexport default MarkLabel;\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,UAAA,GAAAH,sBAAA,CAAAF,OAAA;AAEA,IAAAM,KAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAP,OAAA;AACA,IAAAQ,SAAA,GAAAR,OAAA;AACA,IAAAS,cAAA,GAAAT,OAAA;AAAqD,SAAAD,wBAAAW,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAb,uBAAA,YAAAA,wBAAAW,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,mBAAAT,CAAA,iBAAAA,CAAA,gBAAAU,OAAA,CAAAV,CAAA,0BAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAmB,QAAApB,CAAA,EAAAG,CAAA,QAAAF,CAAA,GAAAgB,MAAA,CAAAI,IAAA,CAAArB,CAAA,OAAAiB,MAAA,CAAAK,qBAAA,QAAAhB,CAAA,GAAAW,MAAA,CAAAK,qBAAA,CAAAtB,CAAA,GAAAG,CAAA,KAAAG,CAAA,GAAAA,CAAA,CAAAiB,MAAA,WAAApB,CAAA,WAAAc,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAG,CAAA,EAAAqB,UAAA,OAAAvB,CAAA,CAAAwB,IAAA,CAAAC,KAAA,CAAAzB,CAAA,EAAAK,CAAA,YAAAL,CAAA;AAAA,SAAA0B,cAAA3B,CAAA,aAAAG,CAAA,MAAAA,CAAA,GAAAyB,SAAA,CAAAC,MAAA,EAAA1B,CAAA,UAAAF,CAAA,WAAA2B,SAAA,CAAAzB,CAAA,IAAAyB,SAAA,CAAAzB,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAH,MAAA,CAAAhB,CAAA,OAAA6B,OAAA,WAAA3B,CAAA,QAAA4B,gBAAA,aAAA/B,CAAA,EAAAG,CAAA,EAAAF,CAAA,CAAAE,CAAA,SAAAc,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAjC,CAAA,EAAAiB,MAAA,CAAAe,yBAAA,CAAA/B,CAAA,KAAAmB,OAAA,CAAAH,MAAA,CAAAhB,CAAA,GAAA6B,OAAA,WAAA3B,CAAA,IAAAc,MAAA,CAAAC,cAAA,CAAAlB,CAAA,EAAAG,CAAA,EAAAc,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAE,CAAA,iBAAAH,CAAA;AAErD,IAAMkC,eAAe,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC;EACpCC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE;AACd,CAAC,CAAC;;AAEF;AACA,IAAMC,WAAW,GAAG,IAAAJ,cAAM,EAAC,OAAO,CAAC,CAAC,UAAAK,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OAAQ;IAClD,SAAO,OAAO;IACdC,UAAU,EAAED,KAAK,CAACE,UAAU,CAACD,UAAU;IACvCE,QAAQ,EAAEH,KAAK,CAACE,UAAU,CAACC,QAAQ;IACnCC,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,IAAAC,gBAAO,EAAC,OAAO,CAAC;IAC7B,aAAa,EAAE,IAAAC,kBAAS,EAAC,OAAO,CAAC;IACjC,YAAY,EAAE;MACZC,eAAe,EAAE;IACnB,CAAC;IACD,SAAS,EAAE;MAAEH,MAAM,eAAAI,MAAA,CAAeR,KAAK,CAACS,OAAO,CAACC,KAAK,CAACC,IAAI;IAAG;EAC/D,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMC,eAAe,GAAG,IAAAlB,cAAM,EAAC,KAAK,CAAC,CAAC,UAAAmB,KAAA;EAAA,IAAGb,KAAK,GAAAa,KAAA,CAALb,KAAK;EAAA,OAAQ;IACpDc,aAAa,EAAE,MAAM;IACrBC,SAAS,EAAE,QAAQ;IACnBZ,QAAQ,EAAEH,KAAK,CAACE,UAAU,CAACC,QAAQ,GAAG,CAAC;IACvCF,UAAU,EAAED,KAAK,CAACE,UAAU,CAACD,UAAU;IACvCe,KAAK,EAAEA,eAAK,CAACC,WAAW,CAAC,CAAC;IAC1BC,UAAU,EAAElB,KAAK,CAACE,UAAU,CAACC,QAAQ,GAAG,CAAC;IACzC,YAAY,EAAAjB,aAAA,CAAAA,aAAA,KACP,IAAAiC,iBAAQ,EAAC,OAAO,CAAC;MACpBZ,eAAe,EAAE;IAAwB,EAC1C;IACD,SAAS,EAAE;MACTH,MAAM,eAAAI,MAAA,CAAeR,KAAK,CAACS,OAAO,CAACC,KAAK,CAACC,IAAI;IAC/C,CAAC;IACD,WAAW,EAAAzB,aAAA,KACN,IAAAmB,gBAAO,EAAC,OAAO,CAAC,CACpB;IACD,aAAa,EAAAnB,aAAA,KACR,IAAAoB,kBAAS,EAAC,OAAO,CAAC;EAEzB,CAAC;AAAA,CAAC,CAAC;AAEH,SAASc,gBAAgBA,CAACC,KAAK,EAAE;EAC/B,IAAMC,YAAY,GAAG,CAAAD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,IAAI,CAAC,CAAC,KAAI,EAAE;EACxC,IAAMC,SAAS,GAAG,IAAIC,MAAM,CAAC,2CAA2C,CAAC;EACzE,OAAOD,SAAS,CAACE,IAAI,CAACJ,YAAY,CAAC;AACrC;AAEA,SAASK,kBAAkBA,CAACN,KAAK,EAAE;EACjC,IAAMC,YAAY,GAAG,CAAAD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,IAAI,CAAC,CAAC,KAAI,EAAE;EACxC,IAAIK,QAAQ;EACZ,IAAIC,OAAO,GAAG,EAAE;EAChB,IAAIC,gBAAgB,GAAGR,YAAY,CAACS,KAAK,CAAC,GAAG,CAAC;EAC9C,IAAID,gBAAgB,CAAC,CAAC,CAAC,IAAIA,gBAAgB,CAAC,CAAC,CAAC,CAACE,QAAQ,CAAC,GAAG,CAAC,EAAE;IAC5DJ,QAAQ,GAAGE,gBAAgB,CAAC,CAAC,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE;EACjD,CAAC,MAAM;IACLH,QAAQ,GAAG,CAAAN,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAES,KAAK,CAAC,GAAG,CAAC,KAAI,EAAE;EAC3C;EAEA,IAAIE,eAAe;EACnB,IAAIb,gBAAgB,CAACC,KAAK,CAAC,EAAE;IAC3B,IAAIS,gBAAgB,CAAC,CAAC,CAAC,IAAIA,gBAAgB,CAAC,CAAC,CAAC,EAAE;MAC9CD,OAAO,GAAGC,gBAAgB,CAAC,CAAC,CAAC;IAC/B;IACAG,eAAe,SAAAzB,MAAA,CAASqB,OAAO,aAAArB,MAAA,CAAUoB,QAAQ,CAAC,CAAC,CAAC,QAAApB,MAAA,CAAKoB,QAAQ,CAAC,CAAC,CAAC,SAAM;IAC1E,OAAOK,eAAe;EACxB;EACA,OAAOC,SAAS;AAClB;AAEO,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAIE,KAAK,EAAK;EAClC;EACA,IAAAC,SAAA,GAA0B,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAAC,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAAjCI,KAAK,GAAAF,UAAA;IAAEG,QAAQ,GAAAH,UAAA;EACtB,IAAMI,IAAI,GAAG,IAAAC,kBAAW,EAAC,UAACC,IAAI;IAAA,OAAKH,QAAQ,CAACG,IAAI,CAAC;EAAA,GAAE,IAAI,CAAC;EAExD,IAAAC,WAAA,GAYIV,KAAK,CAXPW,IAAI;IAAJA,IAAI,GAAAD,WAAA,cAAG,CAAC,CAAC,GAAAA,WAAA;IACT5B,QAAQ,GAUNkB,KAAK,CAVPlB,QAAQ;IACE8B,gBAAgB,GASxBZ,KAAK,CATPa,QAAQ;IACRC,QAAQ,GAQNd,KAAK,CARPc,QAAQ;IACRC,MAAM,GAOJf,KAAK,CAPPe,MAAM;IACNC,WAAW,GAMThB,KAAK,CANPgB,WAAW;IACXC,SAAS,GAKPjB,KAAK,CALPiB,SAAS;IACT5C,KAAK,GAIH2B,KAAK,CAJP3B,KAAK;IACL6C,aAAa,GAGXlB,KAAK,CAHPkB,aAAa;IACbC,eAAe,GAEbnB,KAAK,CAFPmB,eAAe;IACfC,oBAAoB,GAClBpB,KAAK,CADPoB,oBAAoB;EAGtB,IAAAC,UAAA,GAA0B,IAAAnB,eAAQ,EAACS,IAAI,CAAC3B,KAAK,CAAC;IAAAsC,UAAA,OAAAlB,eAAA,aAAAiB,UAAA;IAAvCrC,KAAK,GAAAsC,UAAA;IAAEC,QAAQ,GAAAD,UAAA;EACtB,IAAAE,UAAA,GAAkC,IAAAtB,eAAQ,EAACZ,kBAAkB,CAACqB,IAAI,CAAC3B,KAAK,CAAC,CAAC;IAAAyC,UAAA,OAAArB,eAAA,aAAAoB,UAAA;IAAnEE,SAAS,GAAAD,UAAA;IAAEE,YAAY,GAAAF,UAAA;EAC9B,IAAAG,UAAA,GAAkC,IAAA1B,eAAQ,EAAC,KAAK,CAAC;IAAA2B,UAAA,OAAAzB,eAAA,aAAAwB,UAAA;IAA1CE,SAAS,GAAAD,UAAA;IAAEE,YAAY,GAAAF,UAAA;EAC9B,IAAIG,IAAI,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAEvB,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAIhH,CAAC,EAAK;IACtB,IAAIiG,eAAe,IAAIjG,CAAC,CAACiH,MAAM,CAACC,KAAK,IAAIlH,CAAC,CAACiH,MAAM,CAACC,KAAK,CAACrF,MAAM,GAAG,EAAE,EAAE;MACnE;IACF;IAEAwE,QAAQ,CAACrG,CAAC,CAACiH,MAAM,CAACC,KAAK,CAAC;EAC1B,CAAC;EAED,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAA,EAAS;IAC5B,OAAOP,SAAS,KAAK,KAAK,IAAIJ,SAAS,KAAK7B,SAAS;EACvD,CAAC;EAED,IAAMyC,YAAY,GAAG,SAAfA,YAAYA,CAAIpH,CAAC,EAAK;IAC1ByG,YAAY,CAACrC,kBAAkB,CAACqB,IAAI,CAAC3B,KAAK,CAAC,CAAC;IAC5C+C,YAAY,CAAC,KAAK,CAAC;IACnB/B,KAAK,CAACkC,QAAQ,CAAChH,CAAC,CAACiH,MAAM,CAACC,KAAK,CAAC;EAChC,CAAC;EACD,IAAIG,UAAU,GAAG,CAAC,CAAC;EAEnB,IAAIxB,MAAM,EAAE;IACVwB,UAAU,GAAG;MACXC,KAAK,EAAE,OAAO;MACd9D,SAAS,EAAE;IACb,CAAC;EACH;;EAEA;EACA,IAAA+D,gBAAS,EAAC,YAAM;IACdlB,QAAQ,CAACZ,IAAI,CAAC3B,KAAK,CAAC;EACtB,CAAC,EAAE,CAAC2B,IAAI,CAAC3B,KAAK,CAAC,CAAC;EAEhB,IAAAyD,gBAAS,EAAC,YAAM;IACd,IAAAC,yBAAU,EAACV,IAAI,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE1H,MAAA,YAAAqI,aAAA,CAACvF,eAAe,QACbgE,oBAAoB,EACpBiB,eAAe,CAAC,CAAC,gBAChB/H,MAAA,YAAAqI,aAAA,CAACpE,eAAe;IACdqE,GAAG,EAAE,SAALA,GAAGA,CAAGvH,CAAC,EAAK;MACV2G,IAAI,GAAG3G,CAAC;MACR,IAAI,OAAOuF,gBAAgB,KAAK,UAAU,EAAE;QAC1CA,gBAAgB,CAACvF,CAAC,CAAC;MACrB;IACF,CAAE;IACFwH,uBAAuB,EAAE;MAAEC,MAAM,EAAExD,kBAAkB,CAACN,KAAK;IAAE,CAAE;IAC/D+D,SAAS,EAAE,IAAAC,sBAAU,EAAC;MACpBlE,QAAQ,EAAEA,QAAQ;MAClBT,KAAK,EAAEA,KAAK;MACZL,OAAO,EAAE2C,IAAI,CAACsC,QAAQ,IAAI,CAAAjC,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEhC,KAAK,MAAK,SAAS;MAC1Df,SAAS,EAAE0C,IAAI,CAACsC,QAAQ,IAAI,CAAAjC,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEhC,KAAK,MAAK;IACrD,CAAC,CAAE;IACHkE,OAAO,EAAE,SAATA,OAAOA,CAAA;MAAA,OAAQnB,YAAY,CAAC,IAAI,CAAC;IAAA,CAAC;IAClCoB,KAAK,EAAE;MACLC,QAAQ,EAAEtC,QAAQ;MAClBuC,QAAQ,EAAE,OAAO;MACjBC,eAAe,EAAE,MAAM;MACvBC,SAAS,YAAApF,MAAA,CAAY4C,MAAM,SAAM;MACjCyC,UAAU,EAAEtC,aAAa,GAAG,QAAQ,GAAG,OAAO;MAC9CuC,SAAS,EAAErC,oBAAoB,GAAG,MAAM,GAAG;IAC7C;EAAE,CACc,CAAC,gBAEnB9G,MAAA,YAAAqI,aAAA,CAAC/H,mBAAA,WAAa;IACZiG,QAAQ,EAAE,SAAVA,QAAQA,CAAGxF,CAAC,EAAK;MACfkF,IAAI,CAAClF,CAAC,CAAC;MACP,IAAI,OAAOuF,gBAAgB,KAAK,UAAU,EAAE;QAC1CA,gBAAgB,CAACvF,CAAC,CAAC;MACrB;IACF,CAAE;IACFqI,IAAI,EAAC,kBAAkB;IACvBzC,SAAS,EAAEa,SAAS,IAAIb,SAAU;IAClCnC,QAAQ,EAAEA,QAAS;IACnB6E,cAAc,EAAE,IAAAX,sBAAU,EACxBhC,WAAW,IAAIL,IAAI,CAACsC,QAAQ,GAAGjC,WAAW,CAAChC,KAAK,GAAG,IAAI,EACvDF,QAAQ,IAAI,UAAU,EACtBT,KAAK,IAAI,OACX,CAAE;IACFuF,UAAU,EAAA/G,aAAA;MACRuG,QAAQ,EAAEtC,QAAQ;MAClBpC,SAAS,EAAE,QAAQ;MACnBmF,UAAU,EAAE,aAAa;MACzBC,SAAS,EAAE,YAAY;MACvBC,WAAW,EAAE,CAAC;MACdC,YAAY,EAAE,CAAC;MACfjG,MAAM,EAAE;IAAM,GACXwE,UAAU,CACb;IACFH,KAAK,EAAEpD,KAAM;IACbmE,KAAK,EAAE;MACLE,QAAQ,EAAE,OAAO;MACjB5E,aAAa,EAAE,MAAM;MACrBwF,GAAG,EAAE,CAAC;MACNC,IAAI,EAAE,CAAC;MACPd,QAAQ,EAAEtC,QAAQ;MAClBwC,eAAe,EAAE,MAAM;MACvBC,SAAS,YAAApF,MAAA,CAAY4C,MAAM,SAAM;MACjCyC,UAAU,EAAEtC,aAAa,GAAG,QAAQ,GAAG,OAAO;MAC9CuC,SAAS,EAAErC,oBAAoB,GAAG,MAAM,GAAG;IAC7C,CAAE;IACFc,QAAQ,EAAEA,QAAS;IACnBiC,MAAM,EAAE7B;EAAa,CACtB,CAEY,CAAC;AAEtB,CAAC;AAEDxC,SAAS,CAACsE,SAAS,GAAG;EACpBnD,SAAS,EAAEoD,qBAAS,CAACC,IAAI;EACzBxF,QAAQ,EAAEuF,qBAAS,CAACC,IAAI;EACxBjG,KAAK,EAAEgG,qBAAS,CAACE,GAAG;EACpBrC,QAAQ,EAAEmC,qBAAS,CAACG,IAAI;EACxBC,UAAU,EAAEC,WAAK,CAACC,cAAc;EAChC9D,QAAQ,EAAEwD,qBAAS,CAACG,IAAI;EACxB7D,IAAI,EAAE0D,qBAAS,CAACO,MAAM;EACtB9D,QAAQ,EAAEuD,qBAAS,CAACQ,MAAM;EAC1B9D,MAAM,EAAEsD,qBAAS,CAACQ,MAAM;EACxB7D,WAAW,EAAEqD,qBAAS,CAACS,KAAK,CAAC;IAC3B1C,KAAK,EAAEiC,qBAAS,CAACU,MAAM;IACvB/F,KAAK,EAAEqF,qBAAS,CAACU;EACnB,CAAC,CAAC;EACF7D,aAAa,EAAEmD,qBAAS,CAACC,IAAI;EAC7BnD,eAAe,EAAEkD,qBAAS,CAACC,IAAI;EAC/BlD,oBAAoB,EAAEiD,qBAAS,CAAC5D;AAClC,CAAC;AAAC,IAAAuE,QAAA,GAAAjF,OAAA,cAEaD,SAAS","ignoreList":[]}
+{"version":3,"file":"mark-label.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_styles","_reactInputAutosize","_propTypes","_plot","_styles2","_renderUi","_mathRendering","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledContainer","styled","display","flexDirection","alignItems","StyledInput","_ref2","theme","fontFamily","typography","fontSize","border","correct","incorrect","backgroundColor","concat","palette","error","main","StyledMathInput","_ref3","pointerEvents","textAlign","color","primaryDark","paddingTop","disabled","isFractionFormat","label","trimmedLabel","trim","fracRegex","RegExp","test","getLabelMathFormat","fraction","mixedNr","improperFraction","split","includes","formattedLLabel","undefined","MarkLabel","exports","props","_useState","useState","_useState2","_slicedToArray2","input","setInput","_ref","useCallback","node","_props$mark","mark","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","isHiddenLabel","limitCharacters","correctnessIndicator","_useState3","_useState4","setLabel","_useState5","_useState6","mathLabel","setMathLabel","_useState7","_useState8","isEditing","setIsEditing","rootRef","useRef","onChange","target","value","isMathRendering","onChangeProp","extraStyle","width","useEffect","el","current","innerHTML","renderMath","createElement","ref","className","classNames","editable","onClick","style","minWidth","position","transformOrigin","transform","visibility","marginTop","name","inputClassName","inputStyle","background","boxSizing","paddingLeft","paddingRight","top","left","onBlur","propTypes","PropTypes","bool","any","func","graphProps","types","GraphPropsType","object","number","shape","string","_default"],"sources":["../src/mark-label.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { styled } from '@mui/material/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\n\nimport { types } from '@pie-lib/plot';\nimport { correct, disabled, incorrect } from './common/styles';\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst StyledContainer = styled('div')({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n});\n\n// eslint-disable-next-line no-unused-vars\nconst StyledInput = styled('input')(({ theme }) => ({\n  float: 'right',\n  fontFamily: theme.typography.fontFamily,\n  fontSize: theme.typography.fontSize,\n  border: 'none',\n  '&.correct': correct('color'),\n  '&.incorrect': incorrect('color'),\n  '&.disabled': {\n    backgroundColor: 'transparent !important',\n  },\n  '&.error': { border: `2px solid ${theme.palette.error.main}` },\n}));\n\nconst StyledMathInput = styled('div')(({ theme }) => ({\n  pointerEvents: 'auto',\n  textAlign: 'center',\n  fontSize: theme.typography.fontSize + 2,\n  fontFamily: theme.typography.fontFamily,\n  color: color.primaryDark(),\n  paddingTop: theme.typography.fontSize / 2,\n  '&.disabled': {\n    ...disabled('color'),\n    backgroundColor: 'transparent !important',\n  },\n  '&.error': {\n    border: `2px solid ${theme.palette.error.main}`,\n  },\n  '&.correct': {\n    ...correct('color'),\n  },\n  '&.incorrect': {\n    ...incorrect('color'),\n  },\n}));\n\nfunction isFractionFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  const fracRegex = new RegExp(/^[1-9]*[0-9]*\\s?[1-9][0-9]*\\/[1-9][0-9]*$/);\n  return fracRegex.test(trimmedLabel);\n}\n\nfunction getLabelMathFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  let fraction;\n  let mixedNr = '';\n  let improperFraction = trimmedLabel.split(' ');\n  if (improperFraction[1] && improperFraction[1].includes('/')) {\n    fraction = improperFraction[1].split('/') || '';\n  } else {\n    fraction = trimmedLabel?.split('/') || '';\n  }\n\n  let formattedLLabel;\n  if (isFractionFormat(label)) {\n    if (improperFraction[0] && improperFraction[1]) {\n      mixedNr = improperFraction[0];\n    }\n    formattedLLabel = `\\\\(${mixedNr}\\\\frac{${fraction[0]}}{${fraction[1]}}\\\\)`;\n    return formattedLLabel;\n  }\n  return undefined;\n}\n\nexport const MarkLabel = (props) => {\n  // eslint-disable-next-line no-unused-vars\n  const [input, setInput] = useState(null);\n  const _ref = useCallback((node) => setInput(node), null);\n\n  const {\n    mark = {},\n    disabled,\n    inputRef: externalInputRef,\n    barWidth,\n    rotate,\n    correctness,\n    autoFocus,\n    error,\n    isHiddenLabel,\n    limitCharacters,\n    correctnessIndicator,\n  } = props;\n\n  const [label, setLabel] = useState(mark.label);\n  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));\n  const [isEditing, setIsEditing] = useState(false);\n  const rootRef = useRef(null);\n\n  const onChange = (e) => {\n    if (limitCharacters && e.target.value && e.target.value.length > 20) {\n      return;\n    }\n\n    setLabel(e.target.value);\n  };\n\n  const isMathRendering = () => {\n    return isEditing === false && mathLabel !== undefined;\n  };\n\n  const onChangeProp = (e) => {\n    setMathLabel(getLabelMathFormat(mark.label));\n    setIsEditing(false);\n    props.onChange(e.target.value);\n  };\n  let extraStyle = {};\n\n  if (rotate) {\n    extraStyle = {\n      width: 'unset',\n      textAlign: 'left',\n    };\n  }\n\n  // useState only sets the value once, to synch props to state need useEffect\n  useEffect(() => {\n    setLabel(mark.label);\n  }, [mark.label]);\n\n  useEffect(() => {\n    const el = rootRef.current;\n\n    if (el && mathLabel) {\n      el.innerHTML = mathLabel;\n      renderMath(el);\n    }\n  }, [label, mathLabel]);\n\n  return (\n    <StyledContainer>\n      {correctnessIndicator}\n      {isMathRendering() ? (\n        <StyledMathInput\n          ref={(r) => {\n            rootRef.current = r;\n            if (typeof externalInputRef === 'function') {\n              externalInputRef(r);\n            }\n          }}\n          className={classNames({\n            disabled: disabled,\n            error: error,\n            correct: mark.editable && correctness?.label === 'correct',\n            incorrect: mark.editable && correctness?.label === 'incorrect',\n          })}\n          onClick={() => setIsEditing(true)}\n          style={{\n            minWidth: barWidth,\n            position: 'fixed',\n            transformOrigin: 'left',\n            transform: `rotate(${rotate}deg)`,\n            visibility: isHiddenLabel ? 'hidden' : 'unset',\n            marginTop: correctnessIndicator ? '24px' : '0',\n          }}\n        ></StyledMathInput>\n      ) : (\n        <AutosizeInput\n          inputRef={(r) => {\n            _ref(r);\n            if (typeof externalInputRef === 'function') {\n              externalInputRef(r);\n            }\n          }}\n          name=\"mark-label-input\"\n          autoFocus={isEditing || autoFocus}\n          disabled={disabled}\n          inputClassName={classNames(\n            correctness && mark.editable ? correctness.label : null,\n            disabled && 'disabled',\n            error && 'error',\n          )}\n          inputStyle={{\n            minWidth: barWidth,\n            textAlign: 'center',\n            background: 'transparent',\n            boxSizing: 'border-box',\n            paddingLeft: 0,\n            paddingRight: 0,\n            border: 'none',\n            ...extraStyle,\n          }}\n          value={label}\n          style={{\n            position: 'fixed',\n            pointerEvents: 'auto',\n            top: 0,\n            left: 0,\n            minWidth: barWidth,\n            transformOrigin: 'left',\n            transform: `rotate(${rotate}deg)`,\n            visibility: isHiddenLabel ? 'hidden' : 'unset',\n            marginTop: correctnessIndicator ? '24px' : '0',\n          }}\n          onChange={onChange}\n          onBlur={onChangeProp}\n        />\n      )}\n    </StyledContainer>\n  );\n};\n\nMarkLabel.propTypes = {\n  autoFocus: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.any,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n  isHiddenLabel: PropTypes.bool,\n  limitCharacters: PropTypes.bool,\n  correctnessIndicator: PropTypes.node,\n};\n\nexport default MarkLabel;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "6.2.0-next.21",
+  "version": "6.2.0-next.22",
   "description": "charting",
   "keywords": [
     "react",
@@ -23,7 +23,7 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-lib/math-rendering": "^4.2.0-next.3",
-    "@pie-lib/plot": "^3.2.0-next.20",
+    "@pie-lib/plot": "^3.2.0-next.21",
     "@pie-lib/render-ui": "^5.2.0-next.7",
     "@pie-lib/translator": "^3.2.0-next.3",
     "@visx/axis": "^3.0.0",
@@ -49,5 +49,5 @@
   "devDependencies": {
     "@pie-lib/test-utils": "^1.2.0-next.3"
   },
-  "gitHead": "79aade202d70c1bccdd504fb37934ef3954e934e"
+  "gitHead": "a5d035b59963a4bd600a3e0b9e68440665ba69fd"
 }

package/src/mark-label.jsx

@@ -101,7 +101,7 @@ export const MarkLabel = (props) => {
   const [label, setLabel] = useState(mark.label);
   const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));
   const [isEditing, setIsEditing] = useState(false);
-  let root = useRef(null);
+  const rootRef = useRef(null);
 
   const onChange = (e) => {
     if (limitCharacters && e.target.value && e.target.value.length > 20) {
@@ -135,8 +135,13 @@ export const MarkLabel = (props) => {
   }, [mark.label]);
 
   useEffect(() => {
-    renderMath(root);
-  }, []);
+    const el = rootRef.current;
+
+    if (el && mathLabel) {
+      el.innerHTML = mathLabel;
+      renderMath(el);
+    }
+  }, [label, mathLabel]);
 
   return (
     <StyledContainer>
@@ -144,12 +149,11 @@ export const MarkLabel = (props) => {
       {isMathRendering() ? (
         <StyledMathInput
           ref={(r) => {
-            root = r;
+            rootRef.current = r;
             if (typeof externalInputRef === 'function') {
               externalInputRef(r);
             }
           }}
-          dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}
           className={classNames({
             disabled: disabled,
             error: error,