From 71e3f95601b1a4462a0f261ddf96dd3a33840426 Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Mon, 11 Jan 2021 14:09:22 +0100
Subject: [PATCH] Add variation to ratio
---
uhepp-js/src/components/UheppHistUI.jsx | 89 ++++++++++++++++++++-----
1 file changed, 71 insertions(+), 18 deletions(-)
diff --git a/uhepp-js/src/components/UheppHistUI.jsx b/uhepp-js/src/components/UheppHistUI.jsx
index defa1bd..f7fdd91 100644
--- a/uhepp-js/src/components/UheppHistUI.jsx
+++ b/uhepp-js/src/components/UheppHistUI.jsx
@@ -18,22 +18,55 @@ const variationList = (uhepp) => {
]).flat())).sort()
}
-const makeVariationStacks = (uhepp, variation, updown) => {
- return uhepp.stacks.map(stack =>
- ({
+const varstyle = (updown) => {
+ if (updown == "up") {
+ return {color: "#ff0000"}
+ } if (updown == "down") {
+ return {color: "#0000ff"}
+ } else {
+ return {}
+ }
+}
+
+const makeVariationStacks = (uhepp, stackId, variation, updown) => {
+ const stack = uhepp.stacks[stackId]
+ return [{
type: "step",
content: [{
+ style: varstyle(updown),
"label": updown,
"yield": stack.content.map(item =>
item.yield.map(name => `${name}/${variation}/${updown}`)
).flat()
}]
- })
- )
+ }]
+}
+
+const makeVariationRatio = (uhepp, stackId, variation, updown) => {
+ const stack = uhepp.stacks[stackId]
+ return [{
+ type: "step",
+ style: varstyle(updown),
+ numerator: stack.content.map(item =>
+ item.yield.map(name => `${name}/${variation}/${updown}`)
+ ).flat(),
+ denominator: stack.content.map(item =>
+ item.yield.map(name => `${name}`)
+ ).flat()
+ }]
}
const UheppHistUI = ({width, height, uhepp}) => {
const [uhepp_data, setData] = useState(uhepp)
+ const [envId, setEnvId] = useState(0)
+ const [envName, setEnvName] = useState("NOMINAL")
+
+ const reset = () => {
+ setData(uhepp)
+ setEnvId(0)
+ setEnvName("NOMINAL")
+ }
+
const handleRebin = (e) => {
let values = Array.from(e.target.selectedOptions, option => parseFloat(option.value))
@@ -61,16 +94,26 @@ const UheppHistUI = ({width, height, uhepp}) => {
))
}
+ const uhepp_data_env = envName == "NOMINAL" ? uhepp_data : Object.assign({}, uhepp_data,
+ {stacks: [
+ ...uhepp.stacks,
+ ...makeVariationStacks(uhepp, envId, envName, "up"),
+ ...makeVariationStacks(uhepp, envId, envName, "down"),
+ ],
+ ratio: [
+ ...makeVariationRatio(uhepp, envId, envName, "up"),
+ ...makeVariationRatio(uhepp, envId, envName, "down"),
+ ...uhepp.ratio,
+ ]},
+ )
+
const handleEnvelop = (e) => {
let variationName = e.target.value
- setData(Object.assign({}, uhepp_data,
- {stacks: [
- ...uhepp.stacks,
- ...makeVariationStacks(uhepp, variationName, "up"),
- ...makeVariationStacks(uhepp, variationName, "down"),
- ]}
- ))
-
+ setEnvName(variationName)
+ }
+ const handleEnvStack = (e) => {
+ let stackId = parseInt(e.target.value)
+ setEnvId(stackId)
}
const variations = variationList(uhepp)
@@ -86,7 +129,7 @@ const UheppHistUI = ({width, height, uhepp}) => {
<span className="badge badge-pill badge-secondary">{value}</span>
</span>
) }</div>
- <UheppHist width={width} height={height} uhepp={uhepp_data} />
+ <UheppHist width={width} height={height} uhepp={uhepp_data_env} />
<ul className="nav nav-tabs" id="view-options" role="tablist">
<li className="nav-item">
@@ -186,9 +229,19 @@ const UheppHistUI = ({width, height, uhepp}) => {
{ isVariationReady &&
<form>
<div className="form-group">
- <label htmlFor="envelop">Envelop</label>
- <select className="form-control" id="envelop" onChange={(e) => handleEnvelop(e)}>
- { variations.map((name, i) => <option value={name} key={i}>{name}</option>) }
+ <label htmlFor="envelop">Add envelop of </label>
+ <select value={envName} className="form-control" id="envelop" onChange={(e) => handleEnvelop(e)}>
+ { [
+ <option value="NOMINAL" key="-1">Nominal</option>,
+ ...variations.map((name, i) => <option value={name} key={i}>{name}</option>)
+ ]
+ }
+ </select>
+ </div>
+ <div className="form-group">
+ <label htmlFor="env-stack">for</label>
+ <select value={envId} className="form-control" id="env-stack" onChange={(e) => handleEnvStack(e)}>
+ { uhepp.stacks.map((stack, i) => <option value={i} key={i}>Stack {i} ({stack.content.length} items)</option>) }
</select>
</div>
</form>
@@ -197,7 +250,7 @@ const UheppHistUI = ({width, height, uhepp}) => {
<div className="tab-pane p-3" id="reset" role="tabpanel" aria-labelledby="reset-tab">
<p>Reset all view modifications. Pull the plot to make permanent
changes.</p>
- <button className="btn btn-secondary m-1" type="button" onClick={() => setData(uhepp)}>
+ <button className="btn btn-secondary m-1" type="button" onClick={() => reset()}>
Reset view
</button>
</div>
--
GitLab