diff --git a/gui/package.json b/gui/package.json index b0c19147..9c500bce 100644 --- a/gui/package.json +++ b/gui/package.json @@ -45,6 +45,7 @@ "@testing-library/dom": "^10.1.0", "@testing-library/react": "^16.0.0", "@types/node": "^20.12.11", + "@types/plotly.js": "^2.35.2", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", "@types/react-plotly.js": "^2.6.3", diff --git a/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/Histogram.tsx b/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/Histogram.tsx index dd528179..081f9bef 100644 --- a/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/Histogram.tsx +++ b/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/Histogram.tsx @@ -13,27 +13,29 @@ const Histogram: FunctionComponent = ({ variableName, }) => { const data = useMemo( - () => - ({ + () => [ + { x: histData, type: "histogram", nbinsx: Math.ceil(1.5 * Math.sqrt(histData.length)), marker: { color: "#505060" }, histnorm: "probability", - }) as const, + } as const, + ], [histData], ); - return ( - + + const layout = useMemo( + () => ({ + title: { text: title, font: { size: 12 } }, + xaxis: { title: { text: variableName } }, + yaxis: { title: { text: "Count" } }, + margin: { r: 0 }, + }), + [title, variableName], ); + + return ; }; export default Histogram; diff --git a/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/TracePlot.tsx b/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/TracePlot.tsx index c90959af..b454574c 100644 --- a/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/TracePlot.tsx +++ b/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/TracePlot.tsx @@ -18,41 +18,43 @@ const TracePlot: FunctionComponent = ({ const plotSequences = useMemo(() => { const uniqueChainIds = Array.from(new Set(drawChainIds)).sort(); return uniqueChainIds.map( - (chainId, ii) => { + (chainId) => { return { label: `Chain ${chainId}`, data: draws[columnIndex].filter( (_, i) => drawChainIds[i] === chainId, ), - color: chainColorForIndex(ii), }; }, [draws, columnIndex], ); }, [draws, columnIndex, drawChainIds]); - const data: any[] = useMemo( + const data = useMemo( () => - plotSequences.map((ps) => ({ - x: [...new Array(ps.data.length).keys()].map((i) => i + 1), - y: ps.data, - type: "scatter", - mode: "lines+markers", - marker: { color: ps.color }, - })), + plotSequences.map( + (ps) => + ({ + x: [...new Array(ps.data.length).keys()].map((i) => i + 1), + y: ps.data, + type: "scatter", + mode: "lines+markers", + }) as const, + ), [plotSequences], ); const layout = useMemo( () => ({ - title: "", - yaxis: { title: variableName }, - xaxis: { title: "draw" }, + title: { text: "" }, + yaxis: { title: { text: variableName } }, + xaxis: { title: { text: "draw" } }, margin: { t: 30, b: 40, r: 0, }, showlegend: false, + colorway: chainColorList, }), [variableName], ); @@ -164,8 +166,4 @@ const chainColorList: string[] = [ "#06f6c9", ]; -const chainColorForIndex = (i: number) => { - return chainColorList[i % chainColorList.length]; -}; - export default TracePlot; diff --git a/gui/yarn.lock b/gui/yarn.lock index 98914e40..c53416b0 100644 --- a/gui/yarn.lock +++ b/gui/yarn.lock @@ -1170,7 +1170,7 @@ resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239" integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw== -"@types/plotly.js@*": +"@types/plotly.js@*", "@types/plotly.js@^2.35.2": version "2.35.2" resolved "https://registry.yarnpkg.com/@types/plotly.js/-/plotly.js-2.35.2.tgz#c771a7bf56b398730f8c799879895de4294289c0" integrity sha512-tn0Kp7F6VWiu96jknCvR/PcdIGIATeIK+Z5WXH3bEvG6CRwUNfhy34yBhfPYmTea7mMQxXvTZKGMm6/Y4wxESg==