@elliemae/ds-decision-graph 3.80.0-next.43 → 3.80.0-next.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -46,15 +46,20 @@ const MermaidDecisionChart = (props) => {
|
|
|
46
46
|
});
|
|
47
47
|
}, []);
|
|
48
48
|
import_react.default.useEffect(() => {
|
|
49
|
-
|
|
49
|
+
let cancelled = false;
|
|
50
|
+
const timeout = setTimeout(() => {
|
|
50
51
|
const renderAsync = async () => {
|
|
51
52
|
const { svg } = await import_mermaid.default.render(`mermaid-svg-${uid}`, mermaidMD);
|
|
52
|
-
if (mermaidRef.current) {
|
|
53
|
+
if (!cancelled && mermaidRef.current) {
|
|
53
54
|
mermaidRef.current.innerHTML = svg;
|
|
54
55
|
}
|
|
55
56
|
};
|
|
56
57
|
void renderAsync();
|
|
57
58
|
}, 0);
|
|
59
|
+
return () => {
|
|
60
|
+
cancelled = true;
|
|
61
|
+
clearTimeout(timeout);
|
|
62
|
+
};
|
|
58
63
|
}, [mermaidMD, uid]);
|
|
59
64
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { ref: mermaidRef });
|
|
60
65
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/mermaid/MermaidDecisionChart.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport mermaid from 'mermaid';\nimport type { DSDecisionGraphT } from '../../react-desc-prop-types.js';\nimport { decisionTreeToMermaidMD } from './decisionTreeToMermaidMD.js';\n// https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/mermaid.ts#L367\n\ntype MermaidProps = {\n chartJson: DSDecisionGraphT.Props['chartJson'];\n uid: string;\n direction: DSDecisionGraphT.Directions;\n};\n\nexport const MermaidDecisionChart = (props: MermaidProps) => {\n const { chartJson, uid, direction } = props;\n const mermaidRef = React.useRef<HTMLPreElement>(null);\n // this operation should be O(1), but depending on the size of the decision tree,\n // it is still potentially beneficial to memoize it...\n const mermaidMD = React.useMemo(() => decisionTreeToMermaidMD(chartJson, direction), [chartJson, direction]);\n\n // on mount initialize mermaid\n React.useEffect(() => {\n mermaid.initialize({\n startOnLoad: false,\n });\n }, []);\n\n React.useEffect(() => {\n setTimeout(() => {\n const renderAsync = async () => {\n const { svg } = await mermaid.render(`mermaid-svg-${uid}`, mermaidMD);\n if (mermaidRef.current) {\n mermaidRef.current.innerHTML = svg;\n }\n };\n // eslint-disable-next-line no-void\n void renderAsync();\n }, 0);\n }, [mermaidMD, uid]);\n\n return <pre ref={mermaidRef} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport mermaid from 'mermaid';\nimport type { DSDecisionGraphT } from '../../react-desc-prop-types.js';\nimport { decisionTreeToMermaidMD } from './decisionTreeToMermaidMD.js';\n// https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/mermaid.ts#L367\n\ntype MermaidProps = {\n chartJson: DSDecisionGraphT.Props['chartJson'];\n uid: string;\n direction: DSDecisionGraphT.Directions;\n};\n\nexport const MermaidDecisionChart = (props: MermaidProps) => {\n const { chartJson, uid, direction } = props;\n const mermaidRef = React.useRef<HTMLPreElement>(null);\n // this operation should be O(1), but depending on the size of the decision tree,\n // it is still potentially beneficial to memoize it...\n const mermaidMD = React.useMemo(() => decisionTreeToMermaidMD(chartJson, direction), [chartJson, direction]);\n\n // on mount initialize mermaid\n React.useEffect(() => {\n mermaid.initialize({\n startOnLoad: false,\n });\n }, []);\n\n React.useEffect(() => {\n let cancelled = false;\n const timeout = setTimeout(() => {\n const renderAsync = async () => {\n const { svg } = await mermaid.render(`mermaid-svg-${uid}`, mermaidMD);\n if (!cancelled && mermaidRef.current) {\n mermaidRef.current.innerHTML = svg;\n }\n };\n // eslint-disable-next-line no-void\n void renderAsync();\n }, 0);\n return () => {\n cancelled = true;\n clearTimeout(timeout);\n };\n }, [mermaidMD, uid]);\n\n return <pre ref={mermaidRef} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4Cd;AA5CT,mBAAkB;AAClB,qBAAoB;AAEpB,qCAAwC;AASjC,MAAM,uBAAuB,CAAC,UAAwB;AAC3D,QAAM,EAAE,WAAW,KAAK,UAAU,IAAI;AACtC,QAAM,aAAa,aAAAA,QAAM,OAAuB,IAAI;AAGpD,QAAM,YAAY,aAAAA,QAAM,QAAQ,UAAM,wDAAwB,WAAW,SAAS,GAAG,CAAC,WAAW,SAAS,CAAC;AAG3G,eAAAA,QAAM,UAAU,MAAM;AACpB,mBAAAC,QAAQ,WAAW;AAAA,MACjB,aAAa;AAAA,IACf,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,eAAAD,QAAM,UAAU,MAAM;AACpB,QAAI,YAAY;AAChB,UAAM,UAAU,WAAW,MAAM;AAC/B,YAAM,cAAc,YAAY;AAC9B,cAAM,EAAE,IAAI,IAAI,MAAM,eAAAC,QAAQ,OAAO,eAAe,GAAG,IAAI,SAAS;AACpE,YAAI,CAAC,aAAa,WAAW,SAAS;AACpC,qBAAW,QAAQ,YAAY;AAAA,QACjC;AAAA,MACF;AAEA,WAAK,YAAY;AAAA,IACnB,GAAG,CAAC;AACJ,WAAO,MAAM;AACX,kBAAY;AACZ,mBAAa,OAAO;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,SAAO,4CAAC,SAAI,KAAK,YAAY;AAC/B;",
|
|
6
6
|
"names": ["React", "mermaid"]
|
|
7
7
|
}
|
|
@@ -13,15 +13,20 @@ const MermaidDecisionChart = (props) => {
|
|
|
13
13
|
});
|
|
14
14
|
}, []);
|
|
15
15
|
React2.useEffect(() => {
|
|
16
|
-
|
|
16
|
+
let cancelled = false;
|
|
17
|
+
const timeout = setTimeout(() => {
|
|
17
18
|
const renderAsync = async () => {
|
|
18
19
|
const { svg } = await mermaid.render(`mermaid-svg-${uid}`, mermaidMD);
|
|
19
|
-
if (mermaidRef.current) {
|
|
20
|
+
if (!cancelled && mermaidRef.current) {
|
|
20
21
|
mermaidRef.current.innerHTML = svg;
|
|
21
22
|
}
|
|
22
23
|
};
|
|
23
24
|
void renderAsync();
|
|
24
25
|
}, 0);
|
|
26
|
+
return () => {
|
|
27
|
+
cancelled = true;
|
|
28
|
+
clearTimeout(timeout);
|
|
29
|
+
};
|
|
25
30
|
}, [mermaidMD, uid]);
|
|
26
31
|
return /* @__PURE__ */ jsx("pre", { ref: mermaidRef });
|
|
27
32
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/mermaid/MermaidDecisionChart.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport mermaid from 'mermaid';\nimport type { DSDecisionGraphT } from '../../react-desc-prop-types.js';\nimport { decisionTreeToMermaidMD } from './decisionTreeToMermaidMD.js';\n// https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/mermaid.ts#L367\n\ntype MermaidProps = {\n chartJson: DSDecisionGraphT.Props['chartJson'];\n uid: string;\n direction: DSDecisionGraphT.Directions;\n};\n\nexport const MermaidDecisionChart = (props: MermaidProps) => {\n const { chartJson, uid, direction } = props;\n const mermaidRef = React.useRef<HTMLPreElement>(null);\n // this operation should be O(1), but depending on the size of the decision tree,\n // it is still potentially beneficial to memoize it...\n const mermaidMD = React.useMemo(() => decisionTreeToMermaidMD(chartJson, direction), [chartJson, direction]);\n\n // on mount initialize mermaid\n React.useEffect(() => {\n mermaid.initialize({\n startOnLoad: false,\n });\n }, []);\n\n React.useEffect(() => {\n setTimeout(() => {\n const renderAsync = async () => {\n const { svg } = await mermaid.render(`mermaid-svg-${uid}`, mermaidMD);\n if (mermaidRef.current) {\n mermaidRef.current.innerHTML = svg;\n }\n };\n // eslint-disable-next-line no-void\n void renderAsync();\n }, 0);\n }, [mermaidMD, uid]);\n\n return <pre ref={mermaidRef} />;\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport mermaid from 'mermaid';\nimport type { DSDecisionGraphT } from '../../react-desc-prop-types.js';\nimport { decisionTreeToMermaidMD } from './decisionTreeToMermaidMD.js';\n// https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/mermaid.ts#L367\n\ntype MermaidProps = {\n chartJson: DSDecisionGraphT.Props['chartJson'];\n uid: string;\n direction: DSDecisionGraphT.Directions;\n};\n\nexport const MermaidDecisionChart = (props: MermaidProps) => {\n const { chartJson, uid, direction } = props;\n const mermaidRef = React.useRef<HTMLPreElement>(null);\n // this operation should be O(1), but depending on the size of the decision tree,\n // it is still potentially beneficial to memoize it...\n const mermaidMD = React.useMemo(() => decisionTreeToMermaidMD(chartJson, direction), [chartJson, direction]);\n\n // on mount initialize mermaid\n React.useEffect(() => {\n mermaid.initialize({\n startOnLoad: false,\n });\n }, []);\n\n React.useEffect(() => {\n let cancelled = false;\n const timeout = setTimeout(() => {\n const renderAsync = async () => {\n const { svg } = await mermaid.render(`mermaid-svg-${uid}`, mermaidMD);\n if (!cancelled && mermaidRef.current) {\n mermaidRef.current.innerHTML = svg;\n }\n };\n // eslint-disable-next-line no-void\n void renderAsync();\n }, 0);\n return () => {\n cancelled = true;\n clearTimeout(timeout);\n };\n }, [mermaidMD, uid]);\n\n return <pre ref={mermaidRef} />;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC4Cd;AA5CT,OAAOA,YAAW;AAClB,OAAO,aAAa;AAEpB,SAAS,+BAA+B;AASjC,MAAM,uBAAuB,CAAC,UAAwB;AAC3D,QAAM,EAAE,WAAW,KAAK,UAAU,IAAI;AACtC,QAAM,aAAaA,OAAM,OAAuB,IAAI;AAGpD,QAAM,YAAYA,OAAM,QAAQ,MAAM,wBAAwB,WAAW,SAAS,GAAG,CAAC,WAAW,SAAS,CAAC;AAG3G,EAAAA,OAAM,UAAU,MAAM;AACpB,YAAQ,WAAW;AAAA,MACjB,aAAa;AAAA,IACf,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,YAAY;AAChB,UAAM,UAAU,WAAW,MAAM;AAC/B,YAAM,cAAc,YAAY;AAC9B,cAAM,EAAE,IAAI,IAAI,MAAM,QAAQ,OAAO,eAAe,GAAG,IAAI,SAAS;AACpE,YAAI,CAAC,aAAa,WAAW,SAAS;AACpC,qBAAW,QAAQ,YAAY;AAAA,QACjC;AAAA,MACF;AAEA,WAAK,YAAY;AAAA,IACnB,GAAG,CAAC;AACJ,WAAO,MAAM;AACX,kBAAY;AACZ,mBAAa,OAAO;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,SAAO,oBAAC,SAAI,KAAK,YAAY;AAC/B;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-decision-graph",
|
|
3
|
-
"version": "3.80.0-next.
|
|
3
|
+
"version": "3.80.0-next.44",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Decision Graph",
|
|
6
6
|
"files": [
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-grid": "3.80.0-next.
|
|
40
|
-
"@elliemae/ds-props-helpers": "3.80.0-next.
|
|
41
|
-
"@elliemae/ds-system": "3.80.0-next.
|
|
39
|
+
"@elliemae/ds-grid": "3.80.0-next.44",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.80.0-next.44",
|
|
41
|
+
"@elliemae/ds-system": "3.80.0-next.44",
|
|
42
42
|
"ajv": "^8.18.0",
|
|
43
43
|
"mermaid": "^11.16.1",
|
|
44
44
|
"uid": "^2.0.2"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@elliemae/ds-monorepo-devops": "3.80.0-next.
|
|
47
|
+
"@elliemae/ds-monorepo-devops": "3.80.0-next.44",
|
|
48
48
|
"@xstyled/system": "~3.8.1",
|
|
49
49
|
"jest": "^30.0.0"
|
|
50
50
|
},
|