{"version":3,"sources":["components/TextInput.js","components/Button.js","App.js","index.js"],"names":["TextInput","props","react_default","a","createElement","label","type","value","placeholder","onChange","handleChange","Button","onClick","App","_useState","useState","_useState2","Object","slicedToArray","albumin","setAlbumin","_useState3","_useState4","age","setAge","_useState5","_useState6","ast","setAst","_useState7","_useState8","plt","setPlt","_useState9","_useState10","alt","setAlt","_useState11","_useState12","fib5","setFib5","className","style","display","width","margin","padding","boxSizing","href","components_TextInput","event","target","components_Button","euler","Math","E","odds","pow","fib5Value","num","m","Number","abs","toPrecision","round","sign","toFixed","isNaN","rootElement","document","getElementById","ReactDOM","render","StrictMode","src_App"],"mappings":"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","file":"static/js/main.c618fd6e.chunk.js","sourcesContent":["import React from \"react\";\n\nconst TextInput = (props) => {\n  return (\n    <div>\n      <label>{props.label}</label>\n      <input\n        type=\"number\"\n        value={props.value}\n        placeholder={props.placeholder}\n        onChange={props.handleChange}\n      />\n    </div>\n  );\n};\n\nexport default TextInput;\n","import React from \"react\";\n\nfunction Button(props) {\n    return <button onClick={props.onClick}>{props.label}</button>;\n}\n\nexport default Button;\n","import React, { useState } from \"react\";\n\nimport TextInput from \"./components/TextInput\";\nimport Button from \"./components/Button\";\nimport './styles.css';\nconst App = () => {\n  const [albumin, setAlbumin] = useState();\n  const [age, setAge] = useState();\n  const [ast, setAst] = useState();\n  const [plt, setPlt] = useState();\n  const [alt, setAlt] = useState();\n\n  const [fib5, setFib5] = useState();\n  /*const [fib5Class, setFib5Class] = useState();*/\n\n  const handleAlbuminChange = (event) => setAlbumin(event.target.value);\n  const handleAgeChange = (event) => setAge(event.target.value);\n  const handleAstChange = (event) => setAst(event.target.value);\n  const handlePltChange = (event) => setPlt(event.target.value);\n  const handleAltChange = (event) => setAlt(event.target.value);\n\n  const computeFib5 = () => {\n    /* let fib5Value = round((10**(0.7207-(0.6729*albumin)+(0.4408*((age*ast)/(plt*alt^0.5)))).toFixed(2))*100); */\n    let euler = Math.E;\n    let odds = euler**(0.7207-(0.6729*albumin)+(0.4408*((age*ast)/(plt*alt**0.5))));\n    let prob = (odds/(odds+1))\n    let fib5Value = round((prob*100).toFixed(2));\n    setFib5(fib5Value);\n    /*let fib5Class = getFib5(fib5Value);\n    setFib5Class(fib5Class);*/\n\n    setAlbumin(\"\")\n    setAge(\"\")\n    setAst(\"\")\n    setPlt(\"\")\n    setAlt(\"\")\n    \n  };\n\n  function round(num) {\n    var m = Number((Math.abs(num) * 100).toPrecision(15));\n    return Math.round(m) / 100 * Math.sign(num);\n  };\n  /* const getFib5 = (fib5) => {\n    \n    if (fib5 <= 10) {\n      return \"Low Risk (Under 10%)\";\n    }\n    if (fib5 > 10 && fib5 <= 25) {\n      return \"Medium Risk (10-25%)\";\n    }\n    if (fib5 > 25 && fib5 <= 50) {\n      return \"High Risk (25-50%)\";\n    }\n    if (fib5 > 50) {\n      return \"This is Bad!! (>50%)\";\n    }\n  };*/\n\n  return (\n    <div className=\"App\">\n    <div className=\"container\">\n      <div\n        style={{\n          display: \"block\",\n          width: \"50%\",\n          margin: \"0 auto\",\n          padding: \"20px\",\n          boxSizing: \"border-box\",\n        }}\n      >\n        <h2>Welcome to the Fib4+ Calculator!</h2>\n        <h3>This Website provides a Fib4+ Calculator by Rabiee et al</h3>\n        <h4>Reference:</h4>\n        <h4>Rabiee A, Deng Y, Ciarleglio M, Chan JL, Pons M, Genesca J, Garcia-Tsao G. Noninvasive predictors of clinically significant portal hypertension in NASH cirrhosis: Validation of ANTICIPATE models and development of a lab-based model. Hepatol Commun. 2022 Oct 10. doi: 10.1002/hep4.2091. PMID: 36214066.</h4>\n        <h4><a href=\"https://aasldpubs.onlinelibrary.wiley.com/doi/full/10.1002/hep4.2091\">Direct Link</a></h4>\n        <h4><a href=\"https://pubmed.ncbi.nlm.nih.gov/36214066/\">PubMed</a></h4>\n      </div>\n      <div className=\"row\">\n        <TextInput\n          label=\"Albumin\"\n          placeholder=\"Enter Albumin in g/dL\"\n          handleChange={handleAlbuminChange}\n          value={albumin}\n        />\n      </div>\n\n      <div className=\"row\">\n        <TextInput\n          label=\"Age\"\n          placeholder=\"Enter Age in Years\"\n          handleChange={handleAgeChange}\n          value={age}          \n        />\n      </div>\n\n       <div className=\"row\">\n        <TextInput\n          label=\"AST\"\n          placeholder=\"Enter AST in IU/L\"\n          handleChange={handleAstChange}\n          value={ast}          \n        />\n       </div>\n  \n        <div className=\"row\">\n        <TextInput\n          label=\"Platelets\"\n          placeholder=\"Enter PLTs in 10^9/L\"\n          handleChange={handlePltChange}\n          value={plt}          \n        />\n      </div>\n\n        <div className=\"row\">\n        <TextInput\n          label=\"ALT\"\n          placeholder=\"Enter ALT in IU/L\"\n          handleChange={handleAltChange}\n          value={alt}          \n        />     \n      </div>\n\n      <div className=\"button\">\n        <Button label=\"CALCULATE\" onClick={computeFib5} />\n      </div>\n      \n      <div className=\"row\">\n        {\n          isNaN(fib5)?null:<h3>Your probability of having Clinically Significant Portal Hypertension (CSPH) is: {fib5}%</h3> \n        }\n        \n      </div>\n      <div className=\"row\">\n        \n      </div>\n    </div>\n    </div>\n  );\n};\n\nexport default App;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  rootElement\n);\n"],"sourceRoot":""}