STARMAP® evaluates the processability of compounds in CESS® ranking them in terms of their solubility in supercritical CO2 (on the horizontal axis of the matrix) and propensity to crystallize in CESS® (on the vertical axis of the matrix).
\r\n
The coloring of the cells indicates the compatibility with CESS®, with results in the green cells having the greatest likelihood of success.
\r\n
We have different approaches that can be explored to increase the compatibility with CESS® of the more challenging compounds.
Note: Computations regarding solubility or crystallinity may in rare cases fail for some molecules. In case this happens, the molecule will not appear in the matrix plot, but all the properties that were successfully computed are listed in the table.
\r\n\r\n
\r\n );\r\n}\r\n","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgLock(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgLock);\nexport default __webpack_public_path__ + \"static/media/lock.130a551c.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgBurger(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"Logo\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 16.633 14.97\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"menu_1_\",\n \"data-name\": \"menu (1)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"_x33__6_\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_2707\",\n \"data-name\": \"Grupo 2707\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_1871\",\n \"data-name\": \"Caminho 1871\",\n d: \"M15.8,43.905H.832a.832.832,0,0,0,0,1.663H15.8a.832.832,0,0,0,0-1.663ZM.832,32.262H15.8a.832.832,0,1,0,0-1.663H.832a.832.832,0,1,0,0,1.663Zm14.97,4.99H.832a.832.832,0,0,0,0,1.663H15.8a.832.832,0,0,0,0-1.663Z\",\n transform: \"translate(0 -30.599)\"\n }))))));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgBurger);\nexport default __webpack_public_path__ + \"static/media/burger.a3df613c.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgX(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 12.21 12.219\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_1871\",\n d: \"M11.98,10.81,1.4.22A.835.835,0,0,0,.22,1.4L10.8,11.98a.836.836,0,0,0,1.18-.04.822.822,0,0,0,0-1.13ZM10.81.22.22,10.81A.835.835,0,0,0,1.4,11.99L11.98,1.4A.836.836,0,0,0,11.94.22a.843.843,0,0,0-1.13,0Z\",\n transform: \"translate(0.005 0.004)\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgX);\nexport default __webpack_public_path__ + \"static/media/x.8644bc26.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgLogout(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 17.884 17.884\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_31\",\n \"data-name\": \"Caminho 31\",\n d: \"M13.039,18.5l1.406,1.406,4.968-4.968L14.445,9.974,13.039,11.38l2.568,2.568H6v1.987h9.608ZM21.9,6H7.987A1.987,1.987,0,0,0,6,7.987v3.974H7.987V7.987H21.9V21.9H7.987V17.923H6V21.9a1.987,1.987,0,0,0,1.987,1.987H21.9A1.987,1.987,0,0,0,23.884,21.9V7.987A1.987,1.987,0,0,0,21.9,6Z\",\n transform: \"translate(-6 -6)\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgLogout);\nexport default __webpack_public_path__ + \"static/media/logout.6d19d83b.svg\";\nexport { ForwardRef as ReactComponent };","import { useEffect, useState } from \"react\";\r\nimport { useIsAuthenticated, useMsal } from '@azure/msal-react';\r\nimport { IdentityHelper, MarketplaceClaims } from '../Identity.Helper';\r\nimport { IdentityProvider } from '../IdentityProvider';\r\n\r\n\r\nexport function useIdentityUserDisplayName() {\r\n const [userDisplayName, setUserDisplayName] = useState(null);\r\n const [userDisplayNameIsLoading, setUserDisplayNameIsLoading] = useState(true);\r\n const [userDisplayNameError, setUserDisplayNameError] = useState(null);\r\n\r\n const { instance } = useMsal();\r\n const isAuthenticated = useIsAuthenticated();\r\n\r\n\r\n useEffect(() => {\r\n setUserDisplayNameIsLoading(true);\r\n if(isAuthenticated){\r\n const activeAccount = instance.getActiveAccount(); // This will only return a non-null value if you have logic somewhere else that calls the setActiveAccount API\r\n const accounts = instance.getAllAccounts();\r\n\r\n const request = {\r\n ...IdentityProvider.getBaseLoginRequest(),\r\n account: activeAccount || accounts[0]\r\n };\r\n\r\n instance.acquireTokenSilent(request)\r\n .then(authResult => {\r\n setUserDisplayName(IdentityHelper.getUserDisplayNameFromClaims(authResult.idTokenClaims as MarketplaceClaims))\r\n setUserDisplayNameIsLoading(false);\r\n setUserDisplayNameError(null);\r\n })\r\n .catch((e) => {\r\n setUserDisplayName(null);\r\n setUserDisplayNameIsLoading(false);\r\n setUserDisplayNameError(e);\r\n })\r\n } else {\r\n setUserDisplayName(null);\r\n setUserDisplayNameIsLoading(false);\r\n setUserDisplayNameError(null);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [isAuthenticated]);\r\n\r\n\r\n return {userDisplayName, userDisplayNameIsLoading, userDisplayNameError};\r\n}\r\n","import { useIsAuthenticated, useMsal } from \"@azure/msal-react\";\r\nimport { IdentityHelper, MarketplaceClaims } from \"../Identity.Helper\";\r\nimport { IdentityProvider } from \"../IdentityProvider\";\r\nimport {useEffect, useState} from 'react';\r\n\r\nexport function useIdentityUserEmail() {\r\n const [userEmail, setUserEmail] = useState(null);\r\n const [userEmailIsLoading, setUserEmailIsLoading] = useState(true);\r\n const [userEmailError, setUserEmailError] = useState(null);\r\n\r\n const { instance } = useMsal();\r\n const isAuthenticated = useIsAuthenticated();\r\n\r\n\r\n useEffect(() => {\r\n setUserEmailIsLoading(true);\r\n\r\n\r\n if(isAuthenticated){\r\n const activeAccount = instance.getActiveAccount(); // This will only return a non-null value if you have logic somewhere else that calls the setActiveAccount API\r\n const accounts = instance.getAllAccounts();\r\n\r\n const request = {\r\n ...IdentityProvider.getBaseLoginRequest(),\r\n account: activeAccount || accounts[0]\r\n };\r\n\r\n instance.acquireTokenSilent(request)\r\n .then(authResult => {\r\n setUserEmail(IdentityHelper.getUserEmailFromClaims(authResult.idTokenClaims as MarketplaceClaims))\r\n setUserEmailIsLoading(false);\r\n setUserEmailError(null);\r\n })\r\n .catch((e) => {\r\n setUserEmail(null);\r\n setUserEmailIsLoading(false);\r\n setUserEmailError(e);\r\n })\r\n } else {\r\n setUserEmail(null);\r\n setUserEmailIsLoading(false);\r\n setUserEmailError(null);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [isAuthenticated]);\r\n\r\n\r\n return {userEmail, userEmailIsLoading, userEmailError};\r\n}\r\n","import {ReactComponent as LogoutSvg} from '../../../../assets/svg/logout.svg';\r\nimport {ReactComponent as UserSvg} from '../../../../assets/svg/user.svg';\r\nimport './DropdownMenu.css'\r\nimport { useIdentityUserDisplayName } from '../../../../Infrastructure/Identity/Hooks/useIdentityUserDisplayName';\r\nimport { useIdentityUserEmail } from '../../../../Infrastructure/Identity/Hooks/useIdentityUserEmail';\r\n\r\ninterface IProps{\r\n handleClickSettings: (option: string) => void;\r\n handleClickLogout: (option: string) => void;\r\n setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport function DropdownMenu(props: IProps) {\r\n\r\n const {userDisplayName, userDisplayNameIsLoading} = useIdentityUserDisplayName();\r\n const {userEmail, userEmailIsLoading} = useIdentityUserEmail();\r\n\r\n return (\r\n <>\r\n
\r\n )\r\n}\r\n\r\n/****************** OK *******************/\r\n","import \"./SideBar.css\";\r\nimport { ReactComponent as UserSvg } from '../../assets/svg/user.svg';\r\nimport { ReactComponent as LockSvg } from '../../assets/svg/lock.svg';\r\nimport { HeaderButton } from '../Header/components/Button/HeaderButton';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { ReactComponent as LogoutSvg } from '../../assets/svg/logout.svg';\r\nimport { useIdentityUserEmail } from '../../Infrastructure/Identity/Hooks/useIdentityUserEmail';\r\nimport { useIdentityUserDisplayName } from '../../Infrastructure/Identity/Hooks/useIdentityUserDisplayName';\r\nimport Tooltip from \"@mui/material/Tooltip\";\r\n\r\ninterface IProps{\r\n isOpen?: boolean;\r\n isAdmin?: boolean;\r\n}\r\n\r\nexport function SideBar(props: IProps){\r\n\r\n let history = useHistory();\r\n const {userDisplayName, userDisplayNameIsLoading} = useIdentityUserDisplayName();\r\n const {userEmail, userEmailIsLoading} = useIdentityUserEmail();\r\n\r\n return(\r\n
\r\n );\r\n}","import { useContext } from 'react';\r\nimport { UIContext } from '../UIServices';\r\n\r\n\r\nexport function useGlobalPopup(){\r\n\r\n const context = useContext(UIContext);\r\n if(!context){\r\n throw new Error(\"useViewport must be used within UIServices\");\r\n }\r\n\r\n return {setShowPopup: context.setShowPopup, setPopupContent: context.setPopupContent, isShowPopup: context.showPopup}\r\n}\r\n\r\nexport function useRenderGlobalPopup(){\r\n\r\n const context = useContext(UIContext);\r\n if(!context){\r\n throw new Error(\"useViewport must be used within UIServices\");\r\n }\r\n\r\n return {isShowPopup: context.showPopup, popupContent: context.popupContent}\r\n}","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgFileDocument(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgFileDocument);\nexport default __webpack_public_path__ + \"static/media/file-document.a5abb9e5.svg\";\nexport { ForwardRef as ReactComponent };","import './button-submit.css';\r\n\r\ninterface ButtonSubmitProps{\r\n text: string,\r\n classNames?:string,\r\n color?:string,\r\n onClick : () => void,\r\n}\r\n\r\nexport function ButtonSubmit(props: ButtonSubmitProps){\r\n\r\n return(\r\n
props.onClick()}>\r\n \r\n
\r\n );\r\n\r\n}","import { useContext } from \"react\";\r\nimport { UIContext } from \"../UIServices\";\r\n\r\nexport function useGlobalLoading() {\r\n const context = useContext(UIContext);\r\n if(!context){\r\n throw new Error(\"useGlobalLoading must be used within UIServices\");\r\n }\r\n\r\n return { setShowFSL: context.setShowFSL, setFSLContent: context.setFSLContent }\r\n}\r\n\r\nexport function useRenderGlobalLoading(){\r\n const context = useContext(UIContext);\r\n if(!context){\r\n throw new Error(\"useViewport must be used within UIServices\");\r\n }\r\n\r\n return {showFSL: context.showFSL, FSLContent: context.FSLContent}\r\n}","import './FullScreenLoader.css'\r\nimport { Loader } from '../../../../components/loader/Loader';\r\n\r\n\r\nexport function FullScreenLoader() {\r\n\r\n return (\r\n
\r\n
\r\n \r\n
\r\n
\r\n )\r\n}","import {useRef, useCallback, useMemo} from 'react';\r\nimport { ButtonSubmit } from '../button-submit/button-submit';\r\nimport * as XLSX from 'xlsx';\r\nimport { MoleculeEntry } from '../../models/domain/MoleculeEntry';\r\nimport './input-file.css';\r\nimport { useGlobalLoading } from '../../Infrastructure/UI/Hooks/useGlobalLoading';\r\nimport { FullScreenLoader } from '../../Infrastructure/UI/Components/FullScreenLoader/FullScreenLoader';\r\n\r\ninterface IProp {\r\n name?: string,\r\n loadData: (data: any) => void,\r\n //onLoading?: (isLoading: boolean) => void,\r\n placeholder?: string,\r\n marginTop?: number,\r\n error?: string,\r\n}\r\n\r\nexport function InputFile(props:IProp){\r\n const {setShowFSL, setFSLContent} = useGlobalLoading();\r\n const divRef = useRef(null);\r\n\r\n const style = useMemo(()=>{\r\n return ({ marginTop: `${props.marginTop ? props.marginTop + `rem` : null}`, })\r\n },[props.marginTop]);\r\n\r\n const replaceComma = useCallback((data : XLSX.WorkSheet) => {\r\n data['!rows']?.map(e=>console.log(e))\r\n \r\n console.log(data)\r\n var replacedData=data.replace(',','#;#');\r\n return replacedData;\r\n },[]);\r\n\r\n const extractValueFromCell = (cell: string) => {\r\n let cellValue = cell;\r\n if(cell.indexOf(',') > -1){\r\n cellValue = cellValue.substr(1, cellValue.length-2)\r\n }\r\n return cellValue.replace(/\"\"/g, '\"');\r\n }\r\n const convertToMoleculesArray = useCallback((csv: any, fileName: string): MoleculeEntry[] => {\r\n var lines = csv.split(\"\\n\");\r\n var molecules: MoleculeEntry[] = [];\r\n\r\n for (var i = 6; i < lines.length; i++) {\r\n \r\n //Regex to split ony when commas are not inside quotes\r\n var currentline = lines[i].split(/,(?=(?:(?:[^\"]*\"){2})*[^\"]*$)/);\r\n\r\n if (currentline[0] !== \"\") {\r\n var molecule: MoleculeEntry = {\r\n name: extractValueFromCell(currentline[0]),\r\n smiles: extractValueFromCell(currentline[1]),\r\n meltingPoint: currentline[2] ? Number.parseFloat(currentline[2]) : undefined,\r\n enthalpyOfFusion: currentline[3] ? Number.parseFloat(currentline[3]) : undefined,\r\n waterSolubility: currentline[4] ? Number.parseFloat(currentline[4]) : undefined,\r\n ph: currentline[5] ? Number.parseFloat(currentline[5]) : undefined,\r\n logP: currentline[6] ? Number.parseFloat(currentline[6]) : undefined,\r\n excelFileName: fileName,\r\n excelLine: i+1 || undefined,\r\n }\r\n molecules.push(molecule);\r\n }\r\n }\r\n return molecules;\r\n },[]);\r\n\r\n const handleUpload = useCallback((e:any)=>{\r\n e.preventDefault();\r\n try{\r\n setShowFSL(true)\r\n setFSLContent()\r\n\r\n // if(props.onLoading){\r\n // props.onLoading(true);\r\n // }\r\n\r\n\r\n\r\n\r\n\r\n\r\n var files = e.target.files, f = files[0];\r\n\r\n console.log(f);\r\n\r\n if(f && f.name){\r\n var ext = f.name.match(/\\.([^\\.]+)$/)[1];\r\n console.log(ext);\r\n if(ext !== 'xls' && ext !== 'xlsx'){\r\n throw new Error(\"Invalid File\");\r\n }\r\n }\r\n\r\n\r\n var reader = new FileReader();\r\n\r\n reader.onload = function (e: any) {\r\n debugger;\r\n var data = e.target.result;\r\n let readedData = XLSX.read(data, { type: 'binary' });\r\n const wsname = readedData.SheetNames[0];\r\n const ws = readedData.Sheets[wsname];\r\n\r\n // const wsReplaced=replaceComma(ws)\r\n\r\n /* Convert array to json*/\r\n const dataParse = XLSX.utils.sheet_to_csv(ws);\r\n\r\n\r\n const res = convertToMoleculesArray(dataParse, f.name);\r\n props.loadData(res);\r\n\r\n if(divRef.current){\r\n divRef.current.value = \"\";\r\n }\r\n\r\n // if(props.onLoading){\r\n // props.onLoading(false);\r\n // }\r\n setShowFSL(false)\r\n };\r\n\r\n\r\n reader.onerror = function(e:any){\r\n console.log(e);\r\n // if(props.onLoading){\r\n // props.onLoading(false);\r\n // }\r\n setShowFSL(false)\r\n }\r\n\r\n reader.readAsBinaryString(f)\r\n\r\n // setShowFSL(false)\r\n }catch(err){\r\n //TODO pop up fail\r\n console.log(err);\r\n setShowFSL(false);\r\n }\r\n },[divRef, props, convertToMoleculesArray, setShowFSL, setFSLContent]);\r\n\r\n\r\n return(\r\n
\r\n \r\n );\r\n}\r\n","import './PopUp.css'\r\nimport { ReactComponent as CloseSVG } from '../../assets/svg/window-close.svg'\r\n\r\ninterface IProps{\r\n setShowPopup: (value: boolean) => void;\r\n}\r\n\r\nexport function MoleculeSubmissionHelpPopup(props: IProps){\r\n\r\n return(\r\n
\r\n
\r\n
How to fill the STARMAP input template
\r\n
{\r\n //needed for firefox scroll\r\n var elem = document.getElementById('main-content');\r\n if(elem) elem.style.overflowY = 'scroll';\r\n\r\n props.setShowPopup(false)\r\n }}/>
\r\n
\r\n
\r\n
\r\n
The following information is the minimum to perform the STARMAP evaluation of a compound. These two cells cannot be left blank:
\r\n
\r\n
Identifier: This can be any string, for instance the common name, the codename or something like “Molecule 13”. The purpose is to have a unique identifier for each molecule, so this entry needs to be different for each compound.
\r\n When filling out the Unique Identifier field for your submission, please avoid introducing sensitive information.\r\n
The following experimental data are required for optimal predictions. If there are missing values, please leave the corresponding cells blank.
\r\n
\r\n
Melting temperature (C): Melting temperature of the compound in degrees Celsius. Must be greater than 25.0°C. The compounds submitted for evaluation must be solid at room temperature.
\r\n
Enthalpy of fusion (J/mol): Enthalpy of fusion in Joule per mole. Must be greater than 0.0 J/mol.
\r\n
Solubility in water (mg/L): Solubility of the compound in water, in units of mg/L. If the solubility has been measured in different buffers, please select the one closer to pH=7 and include the pH value in the appropriate column. Must be greater than 0.0 mg/L.
\r\n
pH of aqueous buffer (if applicable): pH of the aqueous solution where solubility in water has been measured. Valid range: [0.0, 14.0].
\r\n );\r\n}","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgDeleteSweepOutline(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15,16H19V18H15V16M15,8H22V10H15V8M15,12H21V14H15V12M11,10V18H5V10H11M13,8H3V18A2,2 0 0,0 5,20H11A2,2 0 0,0 13,18V8M14,5H11L10,4H6L5,5H2V7H14V5Z\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgDeleteSweepOutline);\nexport default __webpack_public_path__ + \"static/media/delete-sweep-outline.a60e35a0.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgPencilOutline(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgPencilOutline);\nexport default __webpack_public_path__ + \"static/media/pencil-outline.ba9c57d3.svg\";\nexport { ForwardRef as ReactComponent };","\r\nexport interface MoleculeEntry {\r\n name: string;\r\n smiles: string;\r\n meltingPoint?: number;\r\n enthalpyOfFusion?: number;\r\n waterSolubility?: number;\r\n ph?: number;\r\n logP? : number;\r\n\r\n excelFileName?: string;\r\n excelLine?: number;\r\n}\r\n\r\nexport enum Molecule{\r\nIdentifier = 1 , Smiles = 2 , MeltingPoint = 3, EnthalpyOfFusion = 4, WaterSolubility = 5, PH = 6, LogP = 7\r\n}\r\n","import { MoleculeEntry } from '../../../models/domain/MoleculeEntry';\r\n\r\n\r\nexport class ValidationsFields {\r\n\r\n onRegexValue(value: any): string{\r\n let regex = /\\d+(\\.\\d*)?/g;\r\n let arr = regex.exec(value) || [\"\"];\r\n let val = \"\" + value;\r\n if(val.charAt(0) === \"-\"){\r\n return \"-\" + arr[0];\r\n } else {\r\n return arr[0];\r\n }\r\n }\r\n \r\n moleculeIsTheSame(moleculeA: MoleculeEntry, moleculeB :MoleculeEntry){\r\n if(moleculeA.name === moleculeB.name && moleculeA.smiles === moleculeB.smiles && moleculeA.meltingPoint === moleculeB.meltingPoint && moleculeA.enthalpyOfFusion === moleculeB.enthalpyOfFusion\r\n && moleculeA.waterSolubility === moleculeB.waterSolubility && moleculeA.ph === moleculeB.ph && moleculeA.logP === moleculeB.logP){\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n moleculeIsPotentiallyTheSame(moleculeA: MoleculeEntry, moleculeB :MoleculeEntry){\r\n if(moleculeA.smiles === moleculeB.smiles \r\n && moleculeA.meltingPoint === moleculeB.meltingPoint \r\n && moleculeA.enthalpyOfFusion === moleculeB.enthalpyOfFusion\r\n && moleculeA.waterSolubility === moleculeB.waterSolubility \r\n && moleculeA.ph === moleculeB.ph \r\n && moleculeA.logP === moleculeB.logP){\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n validateIdentifier(molecule: MoleculeEntry, moleculesList: MoleculeEntry[]): boolean{\r\n let aux = [...moleculesList];\r\n let moleculesWithSameName = aux.filter(r => r.name === molecule.name && r !== molecule);\r\n if(moleculesWithSameName && moleculesWithSameName.length > 0){\r\n return false;\r\n }\r\n return true;\r\n }\r\n\r\n validateMelting(melting: string): boolean{\r\n if(Number.parseFloat(this.onRegexValue(melting)) < 25){\r\n return false;\r\n }else{\r\n return true\r\n }\r\n }\r\n\r\n validateEnthalpy(enthalpy: string): boolean{\r\n if(Number.parseFloat(this.onRegexValue(enthalpy)) <= 0){\r\n console.log(\"false\")\r\n return false;\r\n }else{\r\n return true\r\n }\r\n } \r\n \r\n validateWater(water: string): boolean{\r\n if(Number.parseFloat(this.onRegexValue(water)) <= 0){\r\n return false;\r\n }else{\r\n return true\r\n }\r\n }\r\n\r\n validatePH(ph: string): boolean{\r\n if(Number.parseFloat(this.onRegexValue(ph)) < 0 || Number.parseFloat(this.onRegexValue(ph)) > 14){\r\n return false;\r\n }else{\r\n return true\r\n }\r\n }\r\n\r\n validateLogP(logP: string): boolean{\r\n if(Number.parseFloat(this.onRegexValue(logP)) < -50 || Number.parseFloat(this.onRegexValue(logP)) > 50){\r\n return false;\r\n }else{\r\n return true\r\n }\r\n }\r\n \r\n\r\n}","import { ReactComponent as MenuDown} from '../../assets/svg/menu-down.svg'\r\nimport { ReactComponent as MenuUp} from '../../assets/svg/menu-up.svg'\r\nimport { ReactComponent as RemoveSVG} from '../../assets/svg/close-circle-outline.svg';\r\nimport { ReactComponent as EditSVG } from '../../assets/svg/pencil-outline.svg';\r\nimport './Accordion.css'\r\nimport { useCallback, useState } from 'react';\r\nimport { Molecule, MoleculeEntry } from '../../models/domain/MoleculeEntry';\r\nimport { ValidationsFields } from '../../areas/submit-molecules/ValidationsFields/validationsFields';\r\nimport { SmilesValidator } from '../../areas/submit-molecules/components/SubmissionForm/SmilesValidator';\r\nimport ReactTooltip from 'react-tooltip';\r\nimport { createTheme, MuiThemeProvider } from \"@material-ui/core/styles\";\r\nimport Tooltip from \"@material-ui/core/Tooltip\";\r\n\r\ninterface IProps{\r\n molecule: MoleculeEntry;\r\n list: MoleculeEntry[];\r\n onDelete: (molecule: MoleculeEntry) => void;\r\n onEdit: (molecule: MoleculeEntry) => void;\r\n}\r\n\r\nexport function AccordionRowList(props: IProps){\r\n\r\n const[isOpen, setIsOpen] = useState(false);\r\n\r\n\r\n const fieldToString = useCallback((field: any) => {\r\n if(field === undefined || field === null)\r\n return \"\";\r\n\r\n return field;\r\n }, []);\r\n\r\n const validateLineOfList = useCallback((value: MoleculeEntry, numberField: number) => {\r\n const validators = new ValidationsFields()\r\n let css = \"n4mp-table-cell\";\r\n\r\n let numberOfPotentiallyTheSame = props.list.filter(x => validators.moleculeIsPotentiallyTheSame(x,value))\r\n if(numberOfPotentiallyTheSame.length && numberOfPotentiallyTheSame.length > 1){\r\n css = \"n4mp-table-cell-potential-duplicated\";\r\n }\r\n\r\n switch (numberField){\r\n case Molecule.Identifier:\r\n return css = validators.validateIdentifier(value, props.list) ? css : \"n4mp-table-cell-error\"\r\n case Molecule.Smiles:\r\n return css = SmilesValidator.validateSmiles(value.smiles) ? css : \"n4mp-table-cell-error\";\r\n case Molecule.MeltingPoint:\r\n return css = validators.validateMelting(fieldToString(value.meltingPoint)) ? css : \"n4mp-table-cell-error\"\r\n case Molecule.EnthalpyOfFusion:\r\n return css = validators.validateEnthalpy(fieldToString(value.enthalpyOfFusion)) ? css : \"n4mp-table-cell-error\"\r\n case Molecule.WaterSolubility:\r\n return css = validators.validateWater(fieldToString(value.waterSolubility)) ? css : \"n4mp-table-cell-error\"\r\n case Molecule.PH:\r\n return css = validators.validatePH(fieldToString(value.ph)) ? css : \"n4mp-table-cell-error\"\r\n case Molecule.LogP:\r\n return css = validators.validateLogP(fieldToString(value.logP)) ? css : \"n4mp-table-cell-error\"\r\n default:\r\n throw new Error(`Unsupported NUMBERfIELD id: ${numberField}`);\r\n }\r\n }, [props, fieldToString]);\r\n\r\n const theme = createTheme({\r\n overrides: {\r\n MuiTooltip: {\r\n tooltip: {\r\n fontSize: \"0.9em\"\r\n }\r\n }\r\n }\r\n });\r\n\r\n return(\r\n
\r\n
\r\n\r\n
{props.molecule.name}
\r\n
\r\n {isOpen ?\r\n
setIsOpen(false)}/>
\r\n :\r\n
setIsOpen(true)}/>
\r\n }\r\n \r\n
props.onDelete(props.molecule)}/>
\r\n \r\n
props.onEdit(props.molecule)}/>
\r\n
\r\n
\r\n\r\n { isOpen ?\r\n <>\r\n \r\n
\r\n
\r\n
SMILES
\r\n
{props.molecule.smiles}
\r\n
\r\n
\r\n
MP
\r\n
{props.molecule.meltingPoint}
\r\n
\r\n
\r\n
EF
\r\n
{props.molecule.enthalpyOfFusion}
\r\n
\r\n
\r\n
WS
\r\n
{props.molecule.waterSolubility}
\r\n
\r\n
\r\n
Ph
\r\n
{props.molecule.ph}
\r\n
\r\n
\r\n
Log
\r\n
{props.molecule.logP}
\r\n
\r\n
\r\n
Excel Line
\r\n \r\n \r\n
{fieldToString(props.molecule.excelLine)}
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n : null\r\n }\r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\n\r\nexport function useViewport(){\r\n const [width, setWidth] = React.useState(window.innerWidth);\r\n // Add a second state variable \"height\" and default it to the current window height\r\n const [height, setHeight] = React.useState(window.innerHeight);\r\n React.useEffect(() => {\r\n const handleWindowResize = () => {\r\n setWidth(window.innerWidth);\r\n // Set the height in state as well as the width\r\n setHeight(window.innerHeight);\r\n }\r\n window.addEventListener(\"resize\", handleWindowResize);\r\n return () => window.removeEventListener(\"resize\", handleWindowResize);\r\n }, []);\r\n // Return both the height and width\r\n return { width, height };\r\n}","import './PopUp.css'\r\nimport { IconButton } from '../IconButton/IconButton';\r\n\r\ninterface IProps{\r\n setShowPopup: (value: boolean) => void;\r\n}\r\n\r\nexport function SubmissionTableHelpPopUp(props: IProps){\r\n return(\r\n
\r\n
Submission Table Help
\r\n
\r\n \r\n
\r\n
\r\n
Color subtitle
\r\n
Value out of range
\r\n
Potential repeated molecule *
\r\n
\r\n
\r\n
\r\n \r\n
* When two molecules have the same values but different identifiers.
\r\n
\r\n\r\n
\r\n {props.setShowPopup(false)}} />\r\n
\r\n
\r\n );\r\n}","import './MoleculesList.css'\r\nimport { ReactComponent as RemoveSVG } from '../../../../assets/svg/close-circle-outline.svg';\r\nimport { ReactComponent as RemoveAllSVG } from '../../../../assets/svg/delete-sweep-outline.svg';\r\nimport { ReactComponent as EditSVG } from '../../../../assets/svg/pencil-outline.svg';\r\nimport { useCallback, useMemo, useEffect } from 'react';\r\nimport { ContainerLayout } from '../../../../components/Container/ContainerLayout';\r\nimport { Table } from '../../../../components/Table/Table';\r\nimport { Molecule, MoleculeEntry } from '../../../../models/domain/MoleculeEntry';\r\nimport { Accordion } from '../../../../components/Accordion/Accordion';\r\nimport { IconButton } from '../../../../components/IconButton/IconButton';\r\nimport { AccordionRowList } from '../../../../components/Accordion/AccordionRowList';\r\nimport { useViewport } from '../../../../Hooks/UseViewPort';\r\nimport { ValidationsFields } from '../../ValidationsFields/validationsFields';\r\nimport { ReactComponent as HelpSVG } from '../../../../assets/svg/help-circle-outline.svg'\r\nimport { SubmissionTableHelpPopUp } from '../../../../components/PopUps/SubmissionTableHelpPopUp';\r\nimport { useGlobalPopup } from '../../../../Infrastructure/UI/Hooks/useGlobalPopup';\r\nimport { SmilesValidator } from '../SubmissionForm/SmilesValidator';\r\nimport { ActionButton } from '../../../../components/ActionButton/ActionButton';\r\nimport Tooltip from \"@material-ui/core/Tooltip\";\r\nimport { createTheme, MuiThemeProvider } from \"@material-ui/core/styles\";\r\n\r\ninterface IProps{\r\n isLoading?: boolean;\r\n moleculesList: MoleculeEntry[];\r\n onSubmit: () => void;\r\n onDelete: (molecule: MoleculeEntry) => void;\r\n onDeleteAll: () => void;\r\n onEdit: (molecule: MoleculeEntry) => void;\r\n}\r\n\r\n\r\nexport function fieldToString(field: any) {\r\n if(field === undefined || field === null)\r\n return \"\";\r\n return field;\r\n}\r\n\r\n\r\nexport function MoleculesList(props: IProps){\r\n const { width } = useViewport();\r\n const {setShowPopup, setPopupContent} = useGlobalPopup();\r\n\r\n const formIsValid = useMemo(() => {\r\n const validators = new ValidationsFields();\r\n if(props.moleculesList.length < 1){ return false }\r\n \r\n for(var row of props.moleculesList) {\r\n const rowValid = (\r\n validators.validateMelting(fieldToString(row.meltingPoint))\r\n && validators.validateEnthalpy(fieldToString(row.enthalpyOfFusion))\r\n && validators.validateWater(fieldToString(row.waterSolubility))\r\n && validators.validatePH(fieldToString(row.ph))\r\n && validators.validateLogP(fieldToString(row.logP))\r\n );\r\n\r\n if(!rowValid){ return false }\r\n }\r\n return true;\r\n },[props.moleculesList]);\r\n\r\n\r\n const validateLineOfList = useCallback((value: MoleculeEntry, numberField: number) => {\r\n const validators = new ValidationsFields()\r\n let css = \"n4mp-table-cell\";console.log(value);\r\n\r\n let numberOfPotentiallyTheSame = props.moleculesList.filter(x => validators.moleculeIsPotentiallyTheSame(x,value))\r\n if(numberOfPotentiallyTheSame.length && numberOfPotentiallyTheSame.length > 1){\r\n css = \"n4mp-table-cell-potential-duplicated\";\r\n }\r\n\r\n switch (numberField){\r\n case Molecule.Identifier:\r\n return css = validators.validateIdentifier(value, props.moleculesList) ? css : \"n4mp-table-cell-error\"\r\n case Molecule.Smiles:\r\n return css = SmilesValidator.validateSmiles(value.smiles) ? css : \"n4mp-table-cell-error\"\r\n case Molecule.MeltingPoint:\r\n return css = validators.validateMelting(fieldToString(value.meltingPoint)) ? css : \"n4mp-table-cell-error\"\r\n case Molecule.EnthalpyOfFusion:\r\n return css = validators.validateEnthalpy(fieldToString(value.enthalpyOfFusion)) ? css : \"n4mp-table-cell-error\"\r\n case Molecule.WaterSolubility:\r\n return css = validators.validateWater(fieldToString(value.waterSolubility)) ? css : \"n4mp-table-cell-error\"\r\n case Molecule.PH:\r\n return css = validators.validatePH(fieldToString(value.ph)) ? css : \"n4mp-table-cell-error\"\r\n case Molecule.LogP:\r\n return css = validators.validateLogP(fieldToString(value.logP)) ? css : \"n4mp-table-cell-error\"\r\n default:\r\n throw new Error(`Unsupported NUMBERfIELD id: ${numberField}`);\r\n }\r\n }, [props]);\r\n\r\n\r\n useEffect(() => {\r\n \r\n },[props.moleculesList]);\r\n\r\n const theme = createTheme({\r\n overrides: {\r\n MuiTooltip: {\r\n tooltip: {\r\n fontSize: \"0.9em\"\r\n }\r\n }\r\n }\r\n });\r\n\r\n\r\n return(\r\n
\r\n\r\n\r\n