{"version":3,"sources":["actions/tableActions.js","context.js","components/HookedBrowserRouter.js","components/Element.js","components/Empty.js","components/Group.js","components/Period.js","components/Placeholder.js","components/Type.js","components/Table.js","components/List.js","components/ThemePicker.js","components/Navbar.js","components/Footer.js","components/Sidebar.js","components/Main.js","components/App.js","serviceWorker.js","index.js"],"names":["tableActions","toggleMenu","state","menuMobileOpen","searchElements","term","elements","search","setElementalState","temp","setElementalStates","temperatureUnit","temperature","setTheme","theme","localStorage","setItem","JSON","stringify","createTheme","setTempUnit","tempUnit","setDisplayValue","value","getDisplayValues","displayValue","displayValueText","getDisplayValueText","setupElements","unit","forEach","element","isActive","type","typeData","find","e","toLowerCase","undefined","types","getDisplayValue","convertToKelvin","i","indexOf","terms","split","length","toString","trim","fahrenheit","parseFloat","toFixed","celsius","map","key","getElectronConfiguration","sigFigs","first","kelvin","toUpperCase","INITIAL_STATE","getItem","elementData","getElements","parse","palette","Error","primary","indigo","secondary","pink","error","red","contrastThreshold","getTheme","showAtomicWeightOnMobile","showAtomicNumberOnMobile","contract","Context","React","createContext","ContextProvider","props","useGovernor","context","actions","children","Provider","useContext","RouterContext","HookedBrowserRouter","routeProps","Element","classes","useStyles","useState","popoverOpen","setPopoverOpen","anchorEl","setAnchorEl","icon","setIcon","normalizedType","replace","elementClassName","handlePopoverClose","useEffect","newIcon","className","root","id","symbol","onClick","onMouseOver","event","currentTarget","onMouseOut","body","active","inactive","join","info","atomicNumber","elementState","size","Hidden","mdDown","atomicName","Popover","popover","paper","open","anchorOrigin","vertical","horizontal","transformOrigin","onClose","disableRestoreFocus","Typography","variant","popoverHeader","popoverContent","popoverItem","header","textRight","Grid","container","points","item","xs","color","makeStyles","width","backgroundColor","padding","margin","border","display","flexDirection","alignItems","cursor","flexGrow","textAlign","whiteSpace","lineHeight","opacity","marginLeft","fontSize","fontWeight","overflow","textOverflow","flexWrap","justifyContent","pointerEvents","spacing","paddingRight","paddingTop","paddingBottom","Empty","Group","group","text","number","alignSelf","Period","period","Placeholder","setClassName","setText","height","Type","setIsActive","searchTerm","useRef","current","content","Table","getGroup","groupData","g","getPeriod","periodData","p","getPlaceholderStatus","pTable","pTableItems","gridMapData","index","getTileType","getElement","legend","a","overflowX","minWidth","marginTop","List","displayedElements","setDisplayedElements","order","setOrder","orderBy","setOrderBy","tableHeaders","setTableHeaders","label","numeric","Paper","table","TableHead","TableRow","TableCell","align","TableSortLabel","direction","newOrderBy","newOrder","sort","b","handleRequestSort","TableBody","filter","background","COLORS","purple","deepPurple","blue","lightBlue","cyan","teal","green","lightGreen","lime","yellow","amber","orange","deepOrange","brown","grey","blueGrey","dialogTitle","dialogContent","maxWidth","colorPreviews","colorPreview","colorPreviewButton","transition","borderRadius","selectedColors","selectedColor","selector","colorPreviewSelector","marginRight","colorPreviewSelectorIcon","title","position","top","bottom","left","right","grow","ThemePicker","dialogOpen","setDialogOpen","selection","setSelection","color1","setColor1","color2","setColor2","changeType","changeColors","handleClose","Tooltip","IconButton","aria-label","Dialog","fullScreen","DialogTitle","DialogContent","Button","ButtonBase","style","selectColor","DialogActions","Navbar","router","AppBar","muiNavbar","Toolbar","src","alt","xsDown","location","pathname","component","Link","to","lgUp","menuButton","breakpoints","up","Footer","footer","link","href","target","rel","heart","Sidebar","searchLocal","setSearchLocal","temperatureLocal","setTemperatureLocal","searchTimer","tempTimer","drawer","drawerContent","drawerTop","Divider","section","FormControl","TextField","onChange","clearTimeout","setTimeout","onKeyDown","keyCode","InputProps","endAdornment","InputAdornment","tempText","InputLabel","htmlFor","Select","inputProps","name","MenuItem","RadioGroup","FormControlLabel","control","Radio","sideBar","Drawer","anchor","ModalProps","keepMounted","minHeight","Main","ThemeProvider","CssBaseline","siteWrapper","main","mainContent","exact","path","App","library","add","far","fas","fab","Boolean","window","hostname","match","ReactDOM","render","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister"],"mappings":"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","file":"static/js/main.2a198b3d.chunk.js","sourcesContent":["import React from 'react';\r\n\r\nimport elementData from '../data/elements.json';\r\nimport typeData from '../data/types.json';\r\n\r\n// material\r\nimport indigo from '@material-ui/core/colors/indigo';\r\nimport pink from '@material-ui/core/colors/pink';\r\nimport red from '@material-ui/core/colors/red';\r\nimport { createTheme } from '@material-ui/core/styles';\r\n\r\nexport const tableActions = {\r\n  toggleMenu() {\r\n    return state => {\r\n      return {\r\n        ...state,\r\n        menuMobileOpen: !state.menuMobileOpen,\r\n      };\r\n    };\r\n  },\r\n  searchElements(term) {\r\n    return state => {\r\n      return {\r\n        ...state,\r\n        elements: searchElements([...state.elements], term),\r\n        search: term,\r\n      };\r\n    };\r\n  },\r\n  setElementalState(temp) {\r\n    return state => {\r\n      return {\r\n        ...state,\r\n        elements: setElementalStates(\r\n          [...state.elements],\r\n          temp,\r\n          state.temperatureUnit,\r\n        ),\r\n        temperature: temp,\r\n      };\r\n    };\r\n  },\r\n  setTheme(theme) {\r\n    return state => {\r\n      localStorage.setItem('theme', JSON.stringify(theme));\r\n      return {\r\n        ...state,\r\n        theme: createTheme({ ...theme }),\r\n      };\r\n    };\r\n  },\r\n  setTempUnit(tempUnit) {\r\n    return state => {\r\n      return {\r\n        ...state,\r\n        elements: setElementalStates(\r\n          [...state.elements],\r\n          state.temperature,\r\n          tempUnit,\r\n        ),\r\n        temperatureUnit: tempUnit,\r\n      };\r\n    };\r\n  },\r\n  setDisplayValue(value) {\r\n    return state => {\r\n      return {\r\n        ...state,\r\n        elements: getDisplayValues([...state.elements], value),\r\n        displayValue: value,\r\n        displayValueText: getDisplayValueText(value),\r\n      };\r\n    };\r\n  },\r\n};\r\n\r\nexport const getElements = () => {\r\n  let tempUnit = localStorage.getItem('tempUnit');\r\n  if (tempUnit === null) {\r\n    localStorage.setItem('tempUnit', 'k');\r\n    tempUnit = 'k';\r\n  }\r\n  return {\r\n    elements: setupElements(elementData, 'atomic-mass', tempUnit),\r\n    temperatureUnit: tempUnit,\r\n  };\r\n};\r\n\r\nexport const getTheme = () => {\r\n  let theme = localStorage.getItem('theme');\r\n  try {\r\n    theme = JSON.parse(theme);\r\n    if (!theme.palette.type) {\r\n      throw new Error('using old settings');\r\n    }\r\n  } catch (e) {\r\n    theme = {\r\n      palette: {\r\n        type: 'light',\r\n        primary: indigo,\r\n        secondary: pink,\r\n        error: red,\r\n        contrastThreshold: 3,\r\n      },\r\n    };\r\n    localStorage.setItem('theme', JSON.stringify(theme));\r\n  }\r\n  return createTheme(theme);\r\n};\r\n\r\nfunction setupElements(elements, displayValue, unit) {\r\n  if (!displayValue || displayValue === '') {\r\n    displayValue = 'atomic-mass';\r\n  }\r\n\r\n  elements.forEach(element => {\r\n    element.isActive = true;\r\n\r\n    // assign temp\r\n    const type = typeData.find(\r\n      e => e['name-singular'].toLowerCase() === element.type.toLowerCase(),\r\n    );\r\n    if (type !== undefined) {\r\n      element.types = element.type + ' ' + type['name-plural'];\r\n    }\r\n\r\n    // displayed value\r\n    element['display-value'] = getDisplayValue(element, displayValue);\r\n\r\n    // temps\r\n    element['melting-point-converted'] = convertToKelvin(\r\n      element['melting-point'],\r\n      unit,\r\n    );\r\n\r\n    element['boiling-point-converted'] = convertToKelvin(\r\n      element['boiling-point'],\r\n      unit,\r\n    );\r\n  });\r\n  return elements;\r\n}\r\n\r\nfunction searchElements(elements, search) {\r\n  search = search.toLowerCase();\r\n  elements.forEach((element, i) => {\r\n    if (search === '' || search === undefined) {\r\n      element.isActive = true;\r\n    } else {\r\n      // search by property with : delimiter\r\n      if (search.indexOf(':') !== -1) {\r\n        var terms = search.split(':');\r\n        // only search if key and value is found\r\n        if (terms.length === 2) {\r\n          if (element[terms[0]] === undefined) {\r\n            element.isActive = true;\r\n          } else {\r\n            // account for plural of type\r\n            if (terms[0] === 'type') {\r\n              terms[0] = 'types';\r\n            }\r\n            var propVal = element[terms[0]].toString().toLowerCase();\r\n            if (propVal.indexOf(terms[1].trim()) !== -1) {\r\n              element.isActive = true;\r\n            } else {\r\n              element.isActive = false;\r\n            }\r\n          }\r\n        }\r\n      } else {\r\n        // search if no delimiter\r\n        if (element['atomic-number'].toString().indexOf(search) !== -1)\r\n          element.isActive = true;\r\n        else if (element['symbol'].toLowerCase().indexOf(search) !== -1)\r\n          element.isActive = true;\r\n        else if (element['atomic-name'].toLowerCase().indexOf(search) !== -1)\r\n          element.isActive = true;\r\n        else if (element['type'].toLowerCase().indexOf(search) !== -1)\r\n          element.isActive = true;\r\n        else element.isActive = false;\r\n      }\r\n    }\r\n  });\r\n  return elements;\r\n}\r\n\r\nfunction setElementalStates(elements, temp, unit) {\r\n  switch (unit.toLowerCase()) {\r\n    case 'f':\r\n      temp = convertFahrenheitToKelvin(temp);\r\n      break;\r\n    case 'c':\r\n      temp = convertCelsiusToKelvin(temp);\r\n      break;\r\n    default:\r\n      break;\r\n  }\r\n  elements.forEach((element, i) => {\r\n    if (temp === null || temp === undefined || temp === '') {\r\n      element.state = undefined;\r\n    } else {\r\n      if (element['melting-point'] || element['boiling-point']) {\r\n        if (\r\n          !element['melting-point'] ||\r\n          parseFloat(temp) < parseFloat(element['melting-point'])\r\n        ) {\r\n          element.state = 'solid';\r\n        } else if (\r\n          !element['boiling-point'] ||\r\n          parseFloat(temp) < parseFloat(element['boiling-point'])\r\n        ) {\r\n          element.state = 'liquid';\r\n        } else {\r\n          element.state = 'gas';\r\n        }\r\n      }\r\n    }\r\n\r\n    // temps\r\n    element['melting-point-converted'] = convertToKelvin(\r\n      element['melting-point'],\r\n      unit,\r\n    );\r\n\r\n    element['boiling-point-converted'] = convertToKelvin(\r\n      element['boiling-point'],\r\n      unit,\r\n    );\r\n  });\r\n  return elements;\r\n}\r\n\r\nfunction getDisplayValueText(value) {\r\n  switch (value) {\r\n    case 'atomic-mass':\r\n      return 'Atomic Mass';\r\n    case 'electronegativity':\r\n      return 'Electronegativity';\r\n    case 'electron-configuration':\r\n      return 'Electron Configuration';\r\n    case 'ionization-energies':\r\n      return 'Ionization Energies';\r\n    default:\r\n      break;\r\n  }\r\n}\r\n\r\nfunction getDisplayValues(elements, displayValue) {\r\n  elements.forEach(element => {\r\n    element['display-value'] = getDisplayValue(element, displayValue);\r\n  });\r\n  return elements;\r\n}\r\n\r\nfunction getDisplayValue(element, displayValue) {\r\n  if (displayValue === 'electron-configuration') {\r\n    return getElectronConfiguration(element['electron-configuration']);\r\n  } else if (displayValue === 'ionization-energies') {\r\n    if (element['ionization-energies']) {\r\n      return element['ionization-energies'].first;\r\n    }\r\n  } else if (displayValue === 'atomic-mass' && element['atomic-mass'] < 0) {\r\n    return '[' + element['atomic-mass'] * -1 + ']';\r\n  } else if (typeof element[displayValue] === 'number') {\r\n    const sigFigs = displayValue === 'atomic-mass' ? 4 : 3;\r\n    return (\r\n      element[displayValue].toFixed(\r\n        sigFigs - element[displayValue].toFixed(0).length,\r\n      ) + ''\r\n    );\r\n  } else {\r\n    return element[displayValue];\r\n  }\r\n}\r\n\r\nfunction getElectronConfiguration(value) {\r\n  if (value) {\r\n    const values = value.split(' ');\r\n    return values.map((value, i) => {\r\n      const split = value.split('^');\r\n      return (\r\n        <span key={i}>\r\n          {split[0]}\r\n          <sup>{split[1]}</sup>\r\n        </span>\r\n      );\r\n    });\r\n  }\r\n}\r\n\r\nfunction convertCelsiusToKelvin(celsius) {\r\n  if (celsius === '' || !parseFloat(celsius)) {\r\n    return null;\r\n  } else {\r\n    return parseFloat(celsius) + 273.15;\r\n  }\r\n}\r\n\r\nfunction convertFahrenheitToKelvin(fahrenheit) {\r\n  if (fahrenheit === '' || !parseFloat(fahrenheit)) {\r\n    return null;\r\n  } else {\r\n    return (((parseFloat(fahrenheit) + 459.67) * 5.0) / 9.0).toFixed(2);\r\n  }\r\n}\r\n\r\nfunction convertToKelvin(kelvin, unit) {\r\n  if (!unit || !kelvin || kelvin === '') {\r\n    return '';\r\n  } else {\r\n    switch (unit) {\r\n      case 'c':\r\n        return (kelvin - 273.15).toFixed(2) + ' ' + unit.toUpperCase();\r\n      case 'f':\r\n        return (\r\n          ((kelvin * 9) / 5 - 459.67).toFixed(2) + ' ' + unit.toUpperCase()\r\n        );\r\n      default:\r\n        return kelvin + ' ' + unit.toUpperCase();\r\n    }\r\n  }\r\n}\r\n","import React from 'react';\r\n\r\nimport { useGovernor } from '@techempower/react-governor';\r\n\r\nimport { tableActions, getTheme, getElements } from './actions/tableActions';\r\n\r\nexport const INITIAL_STATE = {\r\n  ...getElements(),\r\n  // elements: [],\r\n  // temperatureUnit: '',\r\n\r\n  search: '',\r\n  temperature: '',\r\n\r\n  theme: getTheme(),\r\n\r\n  displayValue: 'atomic-mass',\r\n  displayValueText: 'Atomic Mass',\r\n  menuMobileOpen: false,\r\n  showAtomicWeightOnMobile: true,\r\n  showAtomicNumberOnMobile: true,\r\n};\r\n\r\nconst contract = {\r\n  ...tableActions,\r\n};\r\n\r\nconst Context = React.createContext(INITIAL_STATE);\r\n\r\nexport default function ContextProvider(props) {\r\n  const [context, actions] = useGovernor(INITIAL_STATE, contract);\r\n\r\n  const { children } = props;\r\n\r\n  return (\r\n    <Context.Provider value={[context, actions]}>{children}</Context.Provider>\r\n  );\r\n}\r\n\r\nexport function useContext() {\r\n  return React.useContext(Context);\r\n}\r\n","import * as React from 'react';\r\nimport { BrowserRouter, Route } from 'react-router-dom';\r\n\r\nconst RouterContext = React.createContext(null);\r\n\r\nexport const HookedBrowserRouter = ({ children }) => (\r\n  <BrowserRouter>\r\n    <Route>\r\n      {routeProps => (\r\n        <RouterContext.Provider value={routeProps}>\r\n          {children}\r\n        </RouterContext.Provider>\r\n      )}\r\n    </Route>\r\n  </BrowserRouter>\r\n);\r\n\r\nexport function useRouter() {\r\n  return React.useContext(RouterContext);\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useContext } from '../context';\r\n\r\n// material\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Hidden from '@material-ui/core/Hidden';\r\nimport Popover from '@material-ui/core/Popover';\r\nimport Grid from '@material-ui/core/Grid';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\n// font awesome\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\nexport default function Element({ element }) {\r\n  const classes = useStyles();\r\n  const [{ displayValueText }] = useContext();\r\n\r\n  const [popoverOpen, setPopoverOpen] = useState(false);\r\n  const [anchorEl, setAnchorEl] = useState(null);\r\n  const [icon, setIcon] = useState(null);\r\n\r\n  const normalizedType = element['type'].replace(/\\s+/g, '-').toLowerCase();\r\n  const elementClassName = `${normalizedType}-bg group-${\r\n    element['group']\r\n  } period-${element['period']}`;\r\n\r\n  const handlePopoverOpen = event => {\r\n    setAnchorEl(event.currentTarget);\r\n    setPopoverOpen(true);\r\n  };\r\n\r\n  const handlePopoverClose = () => {\r\n    setAnchorEl(null);\r\n    setPopoverOpen(false);\r\n  };\r\n\r\n  const togglePopover = () => {\r\n    setPopoverOpen(!popoverOpen);\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (element.state) {\r\n      let newIcon = '';\r\n      switch (element.state) {\r\n        case 'solid':\r\n          newIcon = 'circle';\r\n          break;\r\n        case 'liquid':\r\n          newIcon = 'tint';\r\n          break;\r\n        case 'gas':\r\n          newIcon = 'cloud';\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n      setIcon(newIcon);\r\n    } else {\r\n      setIcon(null);\r\n    }\r\n  }, [element]);\r\n\r\n  return (\r\n    <button\r\n      className={classes.root}\r\n      id={'Popover-' + element.symbol}\r\n      onClick={togglePopover}\r\n      onMouseOver={handlePopoverOpen}\r\n      onMouseOut={handlePopoverClose}\r\n    >\r\n      {/* set if active here */}\r\n      <div\r\n        className={[\r\n          classes.body,\r\n          elementClassName,\r\n          element.isActive ? classes.active : classes.inactive,\r\n        ].join(' ')}\r\n      >\r\n        <div className={classes.info}>\r\n          <div className={classes.atomicNumber}>\r\n            <span>{element['atomic-number']}</span>\r\n            {icon && (\r\n              <span className={classes.elementState}>\r\n                <FontAwesomeIcon icon={icon} size=\"xs\" />\r\n              </span>\r\n            )}\r\n          </div>\r\n          <div className={classes.symbol}>{element['symbol']}</div>\r\n          <Hidden mdDown>\r\n            <div className={classes.atomicName}>{element['atomic-name']}</div>\r\n          </Hidden>\r\n          <div className={classes.displayValue}>{element['display-value']}</div>\r\n        </div>\r\n      </div>\r\n      <Popover\r\n        className={classes.popover}\r\n        classes={{ paper: classes.paper }}\r\n        open={popoverOpen}\r\n        anchorEl={anchorEl}\r\n        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\r\n        transformOrigin={{ vertical: 'top', horizontal: 'left' }}\r\n        onClose={handlePopoverClose}\r\n        disableRestoreFocus\r\n      >\r\n        <div className={`${normalizedType}-bg`}>\r\n          <Typography variant=\"h6\" className={classes.popoverHeader}>\r\n            {element['atomic-name']}\r\n          </Typography>\r\n        </div>\r\n        <div className={classes.popoverContent}>\r\n          <table>\r\n            <tbody>\r\n              <tr className={classes.popoverItem}>\r\n                <td className={classes.header}>\r\n                  <Typography>Atomic Number</Typography>\r\n                </td>\r\n                <td className={classes.textRight}>\r\n                  <Typography>{element['atomic-number']}</Typography>\r\n                </td>\r\n              </tr>\r\n              <tr className={classes.popoverItem}>\r\n                <td className={classes.header}>\r\n                  <Typography>Symbol</Typography>\r\n                </td>\r\n                <td className={classes.textRight}>\r\n                  <Typography>{element['symbol']}</Typography>\r\n                </td>\r\n              </tr>\r\n              <tr className={classes.popoverItem}>\r\n                <td className={classes.header}>\r\n                  <Typography>Type</Typography>\r\n                </td>\r\n                <td className={`${normalizedType}-border-bottom`}>\r\n                  <Typography>{element['type']}</Typography>\r\n                </td>\r\n              </tr>\r\n              <tr className={classes.popoverItem}>\r\n                <td className={classes.header}>\r\n                  <Typography>{displayValueText}</Typography>\r\n                </td>\r\n                <td className={classes.textRight}>\r\n                  <Typography>{element['display-value']}</Typography>\r\n                </td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n          {(element['melting-point'] || element['boiling-point']) && (\r\n            <Grid container className={classes.points}>\r\n              <Grid item xs={6}>\r\n                <FontAwesomeIcon\r\n                  icon=\"tint\"\r\n                  size=\"xs\"\r\n                  className={`${normalizedType}-text`}\r\n                />{' '}\r\n                <span className=\"\">\r\n                  <Typography>{element['melting-point-converted']}</Typography>\r\n                </span>\r\n              </Grid>\r\n              <Grid item xs={6}>\r\n                <FontAwesomeIcon\r\n                  icon=\"cloud\"\r\n                  size=\"xs\"\r\n                  className={`${normalizedType}-text`}\r\n                />{' '}\r\n                <span className=\"\">\r\n                  <Typography color=\"textPrimary\">\r\n                    {element['boiling-point-converted']}\r\n                  </Typography>\r\n                </span>\r\n              </Grid>\r\n            </Grid>\r\n          )}\r\n        </div>\r\n      </Popover>\r\n    </button>\r\n  );\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    width: 'calc(100% / 18 - 15px / 18)',\r\n    backgroundColor: 'transparent',\r\n    padding: 0,\r\n    margin: 0,\r\n    border: 'none',\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    alignItems: 'stretch',\r\n  },\r\n  body: {\r\n    margin: 1,\r\n    padding: 4,\r\n    cursor: 'pointer',\r\n    flexGrow: 1,\r\n  },\r\n  info: {\r\n    textAlign: 'center',\r\n    whiteSpace: 'nowrap',\r\n    lineHeight: 1.3,\r\n  },\r\n  active: {\r\n    opacity: 1,\r\n  },\r\n  inactive: {\r\n    opacity: 0.25,\r\n  },\r\n  elementState: {\r\n    marginLeft: 'auto',\r\n  },\r\n  atomicNumber: {\r\n    fontSize: '9pt',\r\n    display: 'flex',\r\n  },\r\n  symbol: {\r\n    fontSize: '12pt',\r\n    fontWeight: 'bold',\r\n  },\r\n  atomicName: {\r\n    fontSize: '9pt',\r\n    overflow: 'hidden',\r\n    textOverflow: 'ellipsis',\r\n  },\r\n  displayValue: {\r\n    fontSize: '9pt',\r\n    display: 'flex',\r\n    flexWrap: 'wrap',\r\n    justifyContent: 'center',\r\n  },\r\n  textRight: {\r\n    textAlign: 'right',\r\n  },\r\n  popover: {\r\n    pointerEvents: 'none',\r\n  },\r\n  popoverHeader: {\r\n    padding: theme.spacing(1.5),\r\n    color: 'black',\r\n  },\r\n  popoverContent: {\r\n    padding: theme.spacing(1.5),\r\n  },\r\n  header: {\r\n    width: 125,\r\n    paddingRight: theme.spacing(),\r\n    paddingTop: theme.spacing(),\r\n    paddingBottom: theme.spacing(),\r\n  },\r\n  points: {\r\n    textAlign: 'center',\r\n    paddingTop: theme.spacing(2),\r\n    paddingBottom: theme.spacing(2),\r\n  },\r\n}));\r\n","import React from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nexport default function Empty() {\r\n  const classes = useStyles();\r\n\r\n  return <div className={classes.root} />;\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    width: 'calc(100% / 18 - 15px / 18)',\r\n  },\r\n}));\r\n","import React from 'react';\r\n\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nexport default function Group({ group }) {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <Typography className={classes.text} variant=\"subtitle2\">\r\n        {group.number}\r\n      </Typography>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    width: 'calc(100% / 18 - 15px / 18)',\r\n    display: 'flex',\r\n  },\r\n  text: {\r\n    alignSelf: 'flex-end',\r\n    margin: '0 auto',\r\n    opacity: 0.5,\r\n  },\r\n}));\r\n","import React from 'react';\r\n\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nexport default function Period({ period }) {\r\n  const classes = useStyles();\r\n\r\n  if (!period) {\r\n    return <div className={classes.root} />;\r\n  } else {\r\n    return (\r\n      <div className={classes.root}>\r\n        <Typography className={classes.text} variant=\"subtitle2\">\r\n          {period.number}\r\n        </Typography>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    width: 15,\r\n    textAlign: 'center',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'flex-end',\r\n  },\r\n  text: {\r\n    opacity: 0.5,\r\n    paddingRight: 5,\r\n  },\r\n}));\r\n","import React, { useState, useEffect } from 'react';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nexport default function Placeholder({ isActive, type }) {\r\n  const classes = useStyles();\r\n\r\n  const [className, setClassName] = useState('');\r\n  const [text, setText] = useState('');\r\n\r\n  useEffect(() => {\r\n    switch (type) {\r\n      case 'l':\r\n        setClassName('lanthanoid');\r\n        setText('57-71');\r\n        break;\r\n      case 'a':\r\n        setClassName('actinoid');\r\n        setText('89-103');\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }, [type]);\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <div\r\n        className={[\r\n          classes.body,\r\n          className + '-bg',\r\n          isActive ? classes.active : classes.inactive,\r\n        ].join(' ')}\r\n      >\r\n        <span>{text}</span>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    width: 'calc(100% / 18 - 15px / 18)',\r\n  },\r\n  active: {\r\n    opacity: 1,\r\n  },\r\n  inactive: {\r\n    opacity: 0.25,\r\n  },\r\n  body: {\r\n    margin: 1,\r\n    padding: 4,\r\n    height: 'calc(100% - 2px)',\r\n    fontSize: '9pt',\r\n    lineHeight: 1.3,\r\n    color: 'black',\r\n  },\r\n}));\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { useContext } from './../context';\r\n\r\n// material\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nexport default function Type({ type }) {\r\n  const classes = useStyles();\r\n  const [{ search }, { searchElements }] = useContext();\r\n\r\n  const [isActive, setIsActive] = useState(false);\r\n  const searchTerm = useRef(`type: ${type['name-plural']}`);\r\n  const className = useRef(\r\n    type['name-plural'].replace(/\\s+/g, '-').toLowerCase(),\r\n  );\r\n\r\n  const searchByType = () => {\r\n    if (isActive) {\r\n      searchElements('');\r\n      setIsActive(false);\r\n    } else {\r\n      searchElements(searchTerm.current);\r\n      setIsActive(true);\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (search.toLowerCase() !== searchTerm.current.toLowerCase()) {\r\n      setIsActive(false);\r\n    } else {\r\n      setIsActive(true);\r\n    }\r\n  }, [search]);\r\n\r\n  return (\r\n    <button\r\n      onClick={searchByType}\r\n      className={[\r\n        classes.root,\r\n        'legend-item',\r\n        className.current + '-bg',\r\n        isActive ? 'active' : 'inactive',\r\n      ].join(' ')}\r\n    >\r\n      <div\r\n        className={[\r\n          'legend-item-content',\r\n          className.current + '-border-bottom',\r\n        ].join(' ')}\r\n      >\r\n        <Typography variant=\"body2\" color=\"textPrimary\">\r\n          {type['name-plural']}\r\n        </Typography>\r\n      </div>\r\n    </button>\r\n  );\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    margin: '0 5px 5px 5px',\r\n    padding: '1px 3px',\r\n    fontWeight: 400,\r\n    border: 'none',\r\n  },\r\n  content: {\r\n    padding: '0 3px',\r\n  },\r\n}));\r\n","import React from 'react';\r\nimport { useContext } from '../context';\r\n\r\n// material\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\n// data\r\nimport gridMapData from '../data/grid-map.json';\r\nimport groupData from '../data/groups.json';\r\nimport periodData from '../data/periods.json';\r\nimport typeData from '../data/types.json';\r\n\r\n// components\r\nimport Element from '../components/Element';\r\nimport Empty from '../components/Empty';\r\nimport Group from '../components/Group';\r\nimport Period from '../components/Period';\r\nimport Placeholder from '../components/Placeholder';\r\nimport Type from '../components/Type';\r\n\r\nexport default function Table() {\r\n  const classes = useStyles();\r\n  const [{ search, elements }] = useContext();\r\n\r\n  const getTileType = map => {\r\n    let type = 'empty';\r\n    if (typeof map === 'number') {\r\n      type = 'element';\r\n    } else if (typeof map === 'string') {\r\n      if (map === '') {\r\n        type = 'empty';\r\n      } else if (map.indexOf('g') !== -1) {\r\n        type = 'group';\r\n      } else if (map.indexOf('p') !== -1) {\r\n        type = 'period';\r\n      } else if (map === 'l' || map === 'a') {\r\n        type = 'placeholder';\r\n      }\r\n    }\r\n    return type;\r\n  };\r\n\r\n  const getElement = (elements, map) => {\r\n    return elements.find(e => e['atomic-number'] === map);\r\n  };\r\n\r\n  const getGroup = map => {\r\n    return groupData.find(g => g.number.toString() === map.replace('g', ''));\r\n  };\r\n\r\n  const getPeriod = map => {\r\n    return periodData.find(p => p.number.toString() === map.replace('p', ''));\r\n  };\r\n\r\n  const getPlaceholderStatus = (map, search) => {\r\n    if (search) {\r\n      const terms = search.toLowerCase().split(':');\r\n      if (terms[0] === 'type') {\r\n        switch (map) {\r\n          case 'l':\r\n            return terms[1].trim().indexOf('lanthanoid') !== -1;\r\n          case 'a':\r\n            return terms[1].trim().indexOf('actinoid') !== -1;\r\n          default:\r\n            return false;\r\n        }\r\n      }\r\n    } else {\r\n      return true;\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className={classes.root}>\r\n      <div className={classes.pTable}>\r\n        <div className={classes.pTableItems}>\r\n          {gridMapData.map((map, index) => {\r\n            switch (getTileType(map)) {\r\n              case 'element':\r\n                const element = getElement(elements, map);\r\n                return <Element key={index} element={{ ...element }} />;\r\n              case 'group':\r\n                return <Group key={index} group={getGroup(map)} />;\r\n              case 'period':\r\n                return <Period key={index} period={getPeriod(map)} />;\r\n              case 'placeholder':\r\n                return (\r\n                  <Placeholder\r\n                    key={index}\r\n                    type={map}\r\n                    isActive={getPlaceholderStatus(map, search)}\r\n                  />\r\n                );\r\n              default:\r\n                return <Empty key={index} />;\r\n            }\r\n          })}\r\n        </div>\r\n      </div>\r\n      <div className={classes.legend}>\r\n        {typeData.map((a, i) => (\r\n          <Type key={i} type={a} />\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  root: {\r\n    padding: theme.spacing(2),\r\n  },\r\n  pTable: {\r\n    overflow: 'auto',\r\n    paddingBottom: '15px',\r\n    overflowX: 'auto',\r\n  },\r\n  pTableItems: {\r\n    display: 'flex',\r\n    flexWrap: 'wrap',\r\n    minWidth: '950px',\r\n  },\r\n  legend: {\r\n    marginTop: 25,\r\n    display: 'flex',\r\n    flexWrap: 'wrap',\r\n    justifyContent: 'center',\r\n  },\r\n}));\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useContext } from '../context';\r\n\r\n// material\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nexport default function List() {\r\n  const classes = useStyles();\r\n  const [{ elements, displayValueText }] = useContext();\r\n\r\n  const [displayedElements, setDisplayedElements] = useState(elements);\r\n  const [order, setOrder] = useState('asc');\r\n  const [orderBy, setOrderBy] = useState('atomic-number');\r\n  const [tableHeaders, setTableHeaders] = useState([]);\r\n\r\n  const handleRequestSort = newOrderBy => {\r\n    setOrderBy(newOrderBy);\r\n\r\n    let newOrder = 'desc';\r\n    if (orderBy === newOrderBy && order === 'desc') {\r\n      newOrder = 'asc';\r\n    }\r\n    setOrder(newOrder);\r\n\r\n    setDisplayedElements(\r\n      newOrder === 'desc'\r\n        ? elements.sort((a, b) => (b[newOrderBy] < a[newOrderBy] ? -1 : 1))\r\n        : elements.sort((a, b) => (a[newOrderBy] < b[newOrderBy] ? -1 : 1)),\r\n    );\r\n  };\r\n\r\n  useEffect(() => {\r\n    setTableHeaders([\r\n      { id: 'atomic-number', label: '#', numeric: true },\r\n      { id: 'symbol', label: 'Symbol', numeric: false },\r\n      { id: 'atomic-name', label: 'Name', numeric: false },\r\n      { id: 'type', label: 'Type', numeric: false },\r\n      {\r\n        id: 'display-value',\r\n        label: displayValueText,\r\n        numeric: true,\r\n      },\r\n      { id: 'melting-point', label: 'Melt (K)', numeric: true },\r\n      { id: 'boiling-point', label: 'Boil (K)', numeric: true },\r\n      { id: 'state', label: 'State', numeric: false },\r\n    ]);\r\n  }, [displayValueText]);\r\n\r\n  return (\r\n    <div>\r\n      <Paper>\r\n        <Table className={classes.table}>\r\n          <TableHead>\r\n            <TableRow>\r\n              {tableHeaders.map(header => {\r\n                return (\r\n                  <TableCell\r\n                    key={header.id}\r\n                    align={header.numeric ? 'right' : 'left'}\r\n                  >\r\n                    <TableSortLabel\r\n                      active={orderBy === header.id}\r\n                      direction={order}\r\n                      onClick={() => handleRequestSort(header.id)}\r\n                    >\r\n                      {header.label}\r\n                    </TableSortLabel>\r\n                  </TableCell>\r\n                );\r\n              })}\r\n            </TableRow>\r\n          </TableHead>\r\n          <TableBody>\r\n            {displayedElements\r\n              .filter(element => element.isActive)\r\n              .map(e => {\r\n                const normalizedType = e['type']\r\n                  .replace(/\\s+/g, '-')\r\n                  .toLowerCase();\r\n                return (\r\n                  <TableRow key={e['atomic-number']}>\r\n                    <TableCell align=\"right\">{e['atomic-number']}</TableCell>\r\n                    <TableCell>{e.symbol}</TableCell>\r\n                    <TableCell>{e['atomic-name']}</TableCell>\r\n                    <TableCell>\r\n                      <span className={`${normalizedType}-border-bottom pb-0`}>\r\n                        {e.type}\r\n                      </span>\r\n                    </TableCell>\r\n                    <TableCell align=\"right\">{e['display-value']}</TableCell>\r\n                    <TableCell align=\"right\">{e['melting-point']}</TableCell>\r\n                    <TableCell align=\"right\">{e['boiling-point']}</TableCell>\r\n                    <TableCell>{e.state}</TableCell>\r\n                  </TableRow>\r\n                );\r\n              })}\r\n          </TableBody>\r\n        </Table>\r\n      </Paper>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  table: {\r\n    backgroundColor: theme.palette.background.paper,\r\n  },\r\n}));\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useContext } from '../context';\r\n\r\n// material\r\nimport Button from '@material-ui/core/Button';\r\nimport ButtonBase from '@material-ui/core/ButtonBase';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport DialogTitle from '@material-ui/core/DialogTitle';\r\nimport DialogContent from '@material-ui/core/DialogContent';\r\nimport DialogActions from '@material-ui/core/DialogActions';\r\nimport Dialog from '@material-ui/core/Dialog';\r\nimport Tooltip from '@material-ui/core/Tooltip';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\n// material icons\r\nimport Check from '@material-ui/icons/Check';\r\nimport ColorLens from '@material-ui/icons/ColorLens';\r\n\r\n// material colors\r\nimport red from '@material-ui/core/colors/red';\r\nimport pink from '@material-ui/core/colors/pink';\r\nimport purple from '@material-ui/core/colors/purple';\r\nimport deepPurple from '@material-ui/core/colors/deepPurple';\r\nimport indigo from '@material-ui/core/colors/indigo';\r\nimport blue from '@material-ui/core/colors/blue';\r\nimport lightBlue from '@material-ui/core/colors/lightBlue';\r\nimport cyan from '@material-ui/core/colors/cyan';\r\nimport teal from '@material-ui/core/colors/teal';\r\nimport green from '@material-ui/core/colors/green';\r\nimport lightGreen from '@material-ui/core/colors/lightGreen';\r\nimport lime from '@material-ui/core/colors/lime';\r\nimport yellow from '@material-ui/core/colors/yellow';\r\nimport amber from '@material-ui/core/colors/amber';\r\nimport orange from '@material-ui/core/colors/orange';\r\nimport deepOrange from '@material-ui/core/colors/deepOrange';\r\nimport brown from '@material-ui/core/colors/brown';\r\nimport grey from '@material-ui/core/colors/grey';\r\nimport blueGrey from '@material-ui/core/colors/blueGrey';\r\n\r\nconst COLORS = [\r\n  red,\r\n  pink,\r\n  purple,\r\n  deepPurple,\r\n  indigo,\r\n  blue,\r\n  lightBlue,\r\n  cyan,\r\n  teal,\r\n  green,\r\n  lightGreen,\r\n  lime,\r\n  yellow,\r\n  amber,\r\n  orange,\r\n  deepOrange,\r\n  brown,\r\n  grey,\r\n  blueGrey,\r\n];\r\n\r\nexport const ThemePicker = () => {\r\n  const classes = useStyles();\r\n  const [{ theme }, { setTheme }] = useContext();\r\n\r\n  const [dialogOpen, setDialogOpen] = useState(false);\r\n  const [selection, setSelection] = useState('primary');\r\n  const [color1, setColor1] = useState(theme && theme.palette.primary);\r\n  const [color2, setColor2] = useState(theme && theme.palette.secondary);\r\n\r\n  const changeType = () => {\r\n    setTheme({\r\n      palette: {\r\n        type: theme.palette.type === 'light' ? 'dark' : 'light',\r\n        primary: theme.palette.primary,\r\n        secondary: theme.palette.secondary,\r\n        error: theme.palette.error,\r\n        contrastThreshold: 3,\r\n      },\r\n    });\r\n  };\r\n\r\n  const changeColors = (primary, secondary) => {\r\n    setTheme({\r\n      palette: {\r\n        type: theme.palette.type,\r\n        primary: primary,\r\n        secondary: secondary,\r\n        error: theme.palette.error,\r\n        contrastThreshold: 3,\r\n      },\r\n    });\r\n  };\r\n\r\n  const handleDialogOpen = () => {\r\n    setDialogOpen(true);\r\n  };\r\n\r\n  const handleClose = () => {\r\n    setDialogOpen(false);\r\n  };\r\n\r\n  const selectColor = (color) => {\r\n    switch (selection) {\r\n      case 'primary':\r\n        setColor1(color);\r\n        if (color2) {\r\n          changeColors(color, color2);\r\n        }\r\n        break;\r\n      case 'secondary':\r\n        setColor2(color);\r\n        if (color1) {\r\n          changeColors(color1, color);\r\n        }\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (theme && theme.palette) {\r\n      if (theme.palette.primary) {\r\n        setColor1(theme.palette.primary);\r\n      }\r\n      if (theme.palette.secondary) {\r\n        setColor2(theme.palette.secondary);\r\n      }\r\n    }\r\n  }, [theme]);\r\n\r\n  return (\r\n    <div>\r\n      <Tooltip title=\"Change theme\">\r\n        <IconButton\r\n          onClick={handleDialogOpen}\r\n          color=\"inherit\"\r\n          aria-label=\"Change Theme\"\r\n        >\r\n          <ColorLens />\r\n        </IconButton>\r\n      </Tooltip>\r\n      <Dialog\r\n        fullScreen={false}\r\n        open={dialogOpen}\r\n        onClose={handleClose}\r\n        classes={{ paper: 'colors-dialog' }}\r\n      >\r\n        <DialogTitle id=\"theme-picker-dialog\" className={classes.dialogTitle}>\r\n          Change Theme\r\n        </DialogTitle>\r\n        <DialogContent>\r\n          <div className={classes.dialogContent}>\r\n            <div>\r\n              {theme && theme.palette.type === 'light' ? (\r\n                <Button\r\n                  onClick={changeType}\r\n                  variant=\"contained\"\r\n                  color=\"primary\"\r\n                  // startIcon={<BrightnessHigh />}\r\n                >\r\n                  Light Theme\r\n                </Button>\r\n              ) : (\r\n                <Button\r\n                  onClick={changeType}\r\n                  variant=\"contained\"\r\n                  color=\"primary\"\r\n                  // startIcon={<Brightness2 />}\r\n                >\r\n                  Dark Theme\r\n                </Button>\r\n              )}\r\n            </div>\r\n            <div className={classes.selector}>\r\n              <ButtonBase\r\n                onClick={() => setSelection('primary')}\r\n                className={classes.colorPreviewSelector}\r\n              >\r\n                <div\r\n                  className={classes.colorPreviewSelectorIcon}\r\n                  style={{ backgroundColor: color1 ? color1[500] : '' }}\r\n                />\r\n                {color1 && selection === 'primary' && (\r\n                  <div\r\n                    className={classes.active}\r\n                    style={{ border: `5px solid ${color1[900]}` }}\r\n                  >\r\n                    <Check style={{ color: color1[900] }} />\r\n                  </div>\r\n                )}\r\n              </ButtonBase>\r\n              <Typography\r\n                className={classes.title}\r\n                onClick={() => setSelection('primary')}\r\n              >\r\n                Primary\r\n              </Typography>\r\n            </div>\r\n            <div className={classes.selector}>\r\n              <ButtonBase\r\n                onClick={() => setSelection('secondary')}\r\n                className={classes.colorPreviewSelector}\r\n              >\r\n                <div\r\n                  className={classes.colorPreviewSelectorIcon}\r\n                  style={{ backgroundColor: color2 ? color2[500] : '' }}\r\n                />\r\n                {color2 && selection === 'secondary' && (\r\n                  <div\r\n                    className={classes.active}\r\n                    style={{ border: `5px solid ${color2[900]}` }}\r\n                  >\r\n                    <Check style={{ color: color2[900] }} />\r\n                  </div>\r\n                )}\r\n              </ButtonBase>\r\n              <Typography\r\n                className={classes.title}\r\n                onClick={() => setSelection('secondary')}\r\n              >\r\n                Secondary\r\n              </Typography>\r\n            </div>\r\n\r\n            <div className={classes.colorPreviews}>\r\n              {COLORS.map((color, i) => {\r\n                return (\r\n                  <div key={i} className={classes.colorPreview}>\r\n                    <ButtonBase\r\n                      onClick={() => selectColor(color)}\r\n                      style={{ backgroundColor: color[500] }}\r\n                      className={classes.colorPreviewButton}\r\n                    />\r\n                  </div>\r\n                );\r\n              })}\r\n            </div>\r\n          </div>\r\n        </DialogContent>\r\n        <DialogActions>\r\n          <div className={classes.grow} />\r\n          <Button onClick={handleClose} color=\"secondary\" variant=\"text\">\r\n            Close\r\n          </Button>\r\n        </DialogActions>\r\n      </Dialog>\r\n    </div>\r\n  );\r\n};\r\n\r\nconst SIZE = 40;\r\nconst SPACING = 1;\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n  dialogTitle: {},\r\n  dialogContent: {\r\n    maxWidth: (SIZE + SPACING * 2) * 4,\r\n    margin: theme.spacing(0, 4),\r\n  },\r\n  colorPreviews: {\r\n    display: 'flex',\r\n    flexWrap: 'wrap',\r\n  },\r\n  colorPreview: {\r\n    padding: SPACING,\r\n  },\r\n  colorPreviewButton: {\r\n    height: SIZE,\r\n    width: SIZE,\r\n    transition: 'all 300ms ease',\r\n    '&:hover': {\r\n      borderRadius: '100%',\r\n    },\r\n  },\r\n  selectedColors: {\r\n    paddingTop: theme.spacing(2),\r\n    display: 'flex',\r\n    flexWrap: 'nowrap',\r\n  },\r\n  selectedColor: {\r\n    width: SIZE,\r\n  },\r\n  selector: {\r\n    display: 'flex',\r\n    flexWrap: 'nowrap',\r\n    alignItems: 'center',\r\n    margin: theme.spacing(2, 0),\r\n  },\r\n  colorPreviewSelector: {\r\n    marginRight: theme.spacing(1),\r\n  },\r\n  colorPreviewSelectorIcon: {\r\n    height: SIZE,\r\n    width: SIZE,\r\n  },\r\n  title: {\r\n    cursor: 'pointer',\r\n    width: '100%',\r\n  },\r\n  active: {\r\n    position: 'absolute',\r\n    top: 0,\r\n    bottom: 0,\r\n    left: 0,\r\n    right: 0,\r\n    transition: 'all 300ms ease',\r\n    display: 'flex',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n  },\r\n  grow: {\r\n    flexGrow: 1,\r\n  },\r\n}));\r\n\r\nexport default ThemePicker;\r\n","import React from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { useContext } from '../context';\r\n\r\n// material\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport MenuIcon from '@material-ui/icons/Menu';\r\nimport Hidden from '@material-ui/core/Hidden';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nimport TableChartIcon from '@material-ui/icons/TableChart';\r\nimport GridOnIcon from '@material-ui/icons/GridOn';\r\n\r\n// components\r\nimport ThemePicker from './ThemePicker';\r\nimport { useRouter } from './HookedBrowserRouter';\r\n\r\nexport default function Navbar() {\r\n  const classes = useStyles();\r\n  const { toggleMenu } = useContext()[1];\r\n  const router = useRouter();\r\n\r\n  return (\r\n    <AppBar className={classes.muiNavbar} position=\"fixed\">\r\n      <Toolbar>\r\n        <img src=\"/favicon.png\" alt=\"Logo\" />\r\n        <Hidden xsDown>\r\n          <Typography variant=\"h6\" color=\"inherit\">\r\n            All the Atoms\r\n          </Typography>\r\n        </Hidden>\r\n        <div className={classes.flexGrow} />\r\n        {router.location.pathname === '/list' && (\r\n          <IconButton component={Link} to=\"/\" color=\"inherit\">\r\n            <GridOnIcon />\r\n          </IconButton>\r\n        )}\r\n        {router.location.pathname === '/' && (\r\n          <IconButton component={Link} to=\"/list\" color=\"inherit\">\r\n            <TableChartIcon />\r\n          </IconButton>\r\n        )}\r\n        <ThemePicker />\r\n        <Hidden lgUp>\r\n          <IconButton\r\n            color=\"inherit\"\r\n            aria-label=\"open drawer\"\r\n            className={classes.menuButton}\r\n            onClick={toggleMenu}\r\n          >\r\n            <MenuIcon />\r\n          </IconButton>\r\n        </Hidden>\r\n      </Toolbar>\r\n    </AppBar>\r\n  );\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  muiNavbar: {\r\n    '& img': {\r\n      height: 25,\r\n      marginRight: theme.spacing(2),\r\n    },\r\n    [theme.breakpoints.up('lg')]: {\r\n      marginRight: 250,\r\n      width: 'calc(100% - 250px)',\r\n    },\r\n  },\r\n  flexGrow: {\r\n    flexGrow: 1,\r\n  },\r\n}));\r\n","import React from 'react';\r\n\r\nimport Typography from '@material-ui/core/Typography';\r\n\r\n// fonts & icons\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\n// material\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\nexport default function Footer() {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <footer className={classes.footer}>\r\n      <Typography component=\"p\" className={classes.text}>\r\n        Made by{' '}\r\n        <a\r\n          className={classes.link}\r\n          href=\"http://devdavidlee.com\"\r\n          target=\"_blank\"\r\n          rel=\"noopener noreferrer\"\r\n        >\r\n          David Lee\r\n        </a>{' '}\r\n        for Michelle Kang{' '}\r\n        <FontAwesomeIcon icon=\"heart\" size=\"xs\" className={classes.heart} />\r\n      </Typography>\r\n    </footer>\r\n  );\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  footer: {\r\n    textAlign: 'center',\r\n    padding: 5,\r\n    opacity: 0.25,\r\n    '& p': {\r\n      fontSize: '0.65rem',\r\n    },\r\n  },\r\n  heart: {\r\n    color: '#ff5b5b',\r\n  },\r\n  link: {\r\n    color: theme.palette.text.primary,\r\n  },\r\n  text: {\r\n    fontSize: '.7rem',\r\n  },\r\n}));\r\n","import React, { useState, useRef, useEffect } from 'react';\r\nimport { useContext } from '../context';\r\n\r\n// material design\r\nimport Drawer from '@material-ui/core/Drawer';\r\nimport Hidden from '@material-ui/core/Hidden';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Radio from '@material-ui/core/Radio';\r\nimport RadioGroup from '@material-ui/core/RadioGroup';\r\nimport FormControl from '@material-ui/core/FormControl';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport InputLabel from '@material-ui/core/InputLabel';\r\nimport InputAdornment from '@material-ui/core/InputAdornment';\r\nimport Select from '@material-ui/core/Select';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport Divider from '@material-ui/core/Divider';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport { makeStyles } from '@material-ui/styles';\r\n\r\n// material icons\r\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\r\nimport CloseIcon from '@material-ui/icons/Close';\r\n\r\n// font awesome\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\n\r\nexport default function Sidebar() {\r\n  const classes = useStyles();\r\n  const [\r\n    { search, temperature, temperatureUnit, menuMobileOpen, displayValue },\r\n    {\r\n      toggleMenu,\r\n      searchElements,\r\n      setElementalState,\r\n      setDisplayValue,\r\n      setTempUnit,\r\n    },\r\n  ] = useContext();\r\n\r\n  const [searchLocal, setSearchLocal] = useState(search);\r\n  const [temperatureLocal, setTemperatureLocal] = useState(temperature);\r\n\r\n  const searchTimer = useRef(null);\r\n  const tempTimer = useRef(null);\r\n\r\n  const handleSearchChange = e => {\r\n    const value = e.target.value; // must set for synthetic event\r\n    setSearchLocal(value);\r\n    if (searchTimer.current) {\r\n      clearTimeout(searchTimer.current);\r\n    }\r\n    searchTimer.current = setTimeout(() => {\r\n      searchElements(value);\r\n    }, 500);\r\n  };\r\n\r\n  const handleSearchKeyDown = e => {\r\n    if (e.keyCode === 13) {\r\n      setSearchLocal(e.target.value);\r\n      if (searchTimer.current) {\r\n        clearTimeout(searchTimer);\r\n      }\r\n      searchElements(e.target.value);\r\n    }\r\n  };\r\n\r\n  const handleClearSearch = () => {\r\n    setSearchLocal('');\r\n    searchElements('');\r\n  };\r\n\r\n  const handleTempChange = e => {\r\n    const value = e.target.value;\r\n    setTemperatureLocal(value);\r\n    if (tempTimer.current) {\r\n      clearTimeout(tempTimer.current);\r\n    }\r\n    tempTimer.current = setTimeout(() => {\r\n      setElementalState(value);\r\n    }, 500);\r\n  };\r\n\r\n  const handleTempKeyDown = e => {\r\n    if (e.keyCode === 13) {\r\n      setTemperatureLocal(e.target.value);\r\n      if (tempTimer.current) {\r\n        clearTimeout(tempTimer.current);\r\n      }\r\n      setElementalState(e.target.value);\r\n    }\r\n  };\r\n\r\n  const handleClearTemperature = () => {\r\n    setTemperatureLocal('');\r\n    setElementalState(null);\r\n  };\r\n\r\n  useEffect(() => {\r\n    setSearchLocal(search);\r\n  }, [search]);\r\n\r\n  const drawer = (\r\n    <div className={classes.drawerContent}>\r\n      <Hidden lgUp>\r\n        <div className={classes.drawerTop}>\r\n          <IconButton onClick={toggleMenu}>\r\n            <ChevronRightIcon />\r\n          </IconButton>\r\n        </div>\r\n        <Divider />\r\n      </Hidden>\r\n      <div className={classes.content}>\r\n        <div className={classes.section}>\r\n          <FormControl className={classes.search}>\r\n            <TextField\r\n              label=\"Search\"\r\n              onChange={handleSearchChange}\r\n              onKeyDown={handleSearchKeyDown}\r\n              value={searchLocal}\r\n              InputProps={{\r\n                endAdornment: searchLocal ? (\r\n                  <InputAdornment position=\"end\">\r\n                    <IconButton onClick={handleClearSearch} size=\"small\">\r\n                      <CloseIcon />\r\n                    </IconButton>\r\n                  </InputAdornment>\r\n                ) : null,\r\n              }}\r\n            />\r\n          </FormControl>\r\n          <div className={classes.temp}>\r\n            <FormControl className={classes.tempText}>\r\n              <TextField\r\n                label=\"Temperature\"\r\n                onChange={handleTempChange}\r\n                onKeyDown={handleTempKeyDown}\r\n                value={temperatureLocal}\r\n                InputProps={{\r\n                  endAdornment: temperatureLocal ? (\r\n                    <InputAdornment position=\"end\">\r\n                      <IconButton onClick={handleClearTemperature} size=\"small\">\r\n                        <CloseIcon />\r\n                      </IconButton>\r\n                    </InputAdornment>\r\n                  ) : null,\r\n                }}\r\n              />\r\n            </FormControl>\r\n            <FormControl className={classes.tempUnit}>\r\n              <InputLabel htmlFor=\"temperature-unit\" />\r\n              <Select\r\n                value={temperatureUnit}\r\n                onChange={e => setTempUnit(e.target.value)}\r\n                inputProps={{\r\n                  name: 'unit',\r\n                  id: 'temperature-unit',\r\n                }}\r\n              >\r\n                <MenuItem value=\"k\">K</MenuItem>\r\n                <MenuItem value=\"c\">C</MenuItem>\r\n                <MenuItem value=\"f\">F</MenuItem>\r\n              </Select>\r\n            </FormControl>\r\n          </div>\r\n          <Typography>\r\n            <small>\r\n              <FontAwesomeIcon icon=\"circle\" size=\"xs\" /> Solid\r\n              &nbsp;&nbsp;&nbsp;\r\n              <FontAwesomeIcon icon=\"tint\" size=\"xs\" /> Liquid\r\n              &nbsp;&nbsp;&nbsp;\r\n              <FontAwesomeIcon icon=\"cloud\" size=\"xs\" /> Gas\r\n            </small>\r\n          </Typography>\r\n        </div>\r\n        <Divider />\r\n        <FormControl className={classes.section}>\r\n          <RadioGroup\r\n            name=\"display\"\r\n            value={displayValue}\r\n            onChange={e => setDisplayValue(e.target.value)}\r\n            className={classes.display}\r\n          >\r\n            <FormControlLabel\r\n              value=\"atomic-mass\"\r\n              control={<Radio color=\"primary\" />}\r\n              label=\"Atomic Mass (g/mol)\"\r\n            />\r\n            <FormControlLabel\r\n              value=\"electronegativity\"\r\n              control={<Radio color=\"primary\" />}\r\n              label=\"Electronegativity\"\r\n            />\r\n            <FormControlLabel\r\n              value=\"electron-configuration\"\r\n              control={<Radio color=\"primary\" />}\r\n              label=\"Electron configuration\"\r\n            />\r\n            <FormControlLabel\r\n              value=\"ionization-energies\"\r\n              control={<Radio color=\"primary\" />}\r\n              label=\"Ionization Energies (kJ/mol)\"\r\n            />\r\n          </RadioGroup>\r\n        </FormControl>\r\n        <Divider />\r\n      </div>\r\n      <div className={classes.link}>\r\n        <IconButton\r\n          color=\"secondary\"\r\n          size=\"small\"\r\n          href=\"https://github.com/david-j-lee/all-the-atoms\"\r\n          target=\"_blank\"\r\n          rel=\"noopener noreferrer\"\r\n        >\r\n          <FontAwesomeIcon icon={['fab', 'github']} size=\"lg\" />\r\n        </IconButton>\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n  return (\r\n    <div className={classes.sideBar}>\r\n      <Hidden lgUp>\r\n        <Drawer\r\n          variant=\"temporary\"\r\n          anchor=\"right\"\r\n          open={menuMobileOpen}\r\n          onClose={toggleMenu}\r\n          classes={{ paper: classes.drawer }}\r\n          ModalProps={{\r\n            keepMounted: true, // Better open performance on mobile.\r\n          }}\r\n        >\r\n          {drawer}\r\n        </Drawer>\r\n      </Hidden>\r\n      <Hidden mdDown>\r\n        <Drawer\r\n          variant=\"permanent\"\r\n          open\r\n          anchor=\"right\"\r\n          classes={{ paper: classes.drawer }}\r\n        >\r\n          {drawer}\r\n        </Drawer>\r\n      </Hidden>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  sideBar: {\r\n    [theme.breakpoints.up('lg')]: {\r\n      position: 'relative',\r\n      minWidth: 250,\r\n    },\r\n  },\r\n  section: {\r\n    padding: theme.spacing(2),\r\n  },\r\n  content: {\r\n    flexGrow: 1,\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n  },\r\n  link: {\r\n    padding: '0.5rem 1rem',\r\n    textAlign: 'center',\r\n    '& svg': {\r\n      margin: theme.spacing(1),\r\n    },\r\n  },\r\n  display: {\r\n    flexWrap: 'nowrap',\r\n  },\r\n  drawer: {\r\n    width: 250,\r\n    minHeight: '100vh',\r\n  },\r\n  drawerContent: {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    minHeight: '100vh',\r\n  },\r\n  drawerTop: {\r\n    height: 64,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n  },\r\n  search: {\r\n    width: '100%',\r\n  },\r\n  temp: {\r\n    display: 'flex',\r\n    paddingTop: theme.spacing(2),\r\n    paddingBottom: theme.spacing(0.5),\r\n  },\r\n  tempText: {\r\n    width: 'calc(100% - 50px)',\r\n  },\r\n  tempUnit: {\r\n    width: 50,\r\n    textAlign: 'center',\r\n  },\r\n}));\r\n","import React from 'react';\r\nimport { Route } from 'react-router-dom';\r\nimport { HookedBrowserRouter } from './HookedBrowserRouter';\r\nimport { useContext } from '../context';\r\n\r\n// material\r\nimport CssBaseline from '@material-ui/core/CssBaseline';\r\nimport { ThemeProvider, makeStyles } from '@material-ui/styles';\r\n\r\n// components\r\nimport Table from './Table';\r\nimport List from './List';\r\nimport Navbar from './Navbar';\r\nimport Footer from './Footer';\r\nimport Sidebar from './Sidebar';\r\n\r\nexport default function Main() {\r\n  const classes = useStyles();\r\n  const [{ theme }] = useContext();\r\n\r\n  return (\r\n    <ThemeProvider theme={theme}>\r\n      <CssBaseline />\r\n      <HookedBrowserRouter>\r\n        <div className={classes.siteWrapper}>\r\n          <Navbar />\r\n          <div className={classes.main}>\r\n            <div className={classes.mainContent}>\r\n              <Route exact path=\"/\" component={Table} />\r\n              <Route path=\"/list\" component={List} />\r\n            </div>\r\n            <Footer />\r\n          </div>\r\n          <Sidebar />\r\n        </div>\r\n      </HookedBrowserRouter>\r\n    </ThemeProvider>\r\n  );\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  siteWrapper: {\r\n    display: 'flex',\r\n    position: 'relative',\r\n    width: '100%',\r\n    alignItems: 'stretch',\r\n    minHeight: '100vh',\r\n  },\r\n  main: {\r\n    flexGrow: 1,\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    paddingTop: '4rem',\r\n    width: '100%',\r\n  },\r\n  mainContent: {\r\n    flexGrow: 1,\r\n    width: '100%',\r\n  },\r\n}));\r\n","import React from 'react';\r\nimport ContextProvider from '../context';\r\n\r\n// font awesome icons\r\nimport { library } from '@fortawesome/fontawesome-svg-core';\r\nimport { fab } from '@fortawesome/free-brands-svg-icons';\r\nimport { far } from '@fortawesome/free-regular-svg-icons';\r\nimport { fas } from '@fortawesome/free-solid-svg-icons';\r\n\r\nimport Main from './Main';\r\n\r\nlibrary.add(far, fas, fab);\r\n\r\nexport default function App() {\r\n  return (\r\n    <ContextProvider className=\"App\">\r\n      <Main />\r\n    </ContextProvider>\r\n  );\r\n}\r\n","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://bit.ly/CRA-PWA\r\n\r\nconst isLocalhost = Boolean(\r\n  window.location.hostname === 'localhost' ||\r\n    // [::1] is the IPv6 localhost address.\r\n    window.location.hostname === '[::1]' ||\r\n    // 127.0.0.1/8 is considered localhost for IPv4.\r\n    window.location.hostname.match(\r\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n    )\r\n);\r\n\r\nexport function register(config) {\r\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n    // The URL constructor is available in all browsers that support SW.\r\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\r\n    if (publicUrl.origin !== window.location.origin) {\r\n      // Our service worker won't work if PUBLIC_URL is on a different origin\r\n      // from what our page is served on. This might happen if a CDN is used to\r\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n      return;\r\n    }\r\n\r\n    window.addEventListener('load', () => {\r\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n      if (isLocalhost) {\r\n        // This is running on localhost. Let's check if a service worker still exists or not.\r\n        checkValidServiceWorker(swUrl, config);\r\n\r\n        // Add some additional logging to localhost, pointing developers to the\r\n        // service worker/PWA documentation.\r\n        navigator.serviceWorker.ready.then(() => {\r\n          console.log(\r\n            'This web app is being served cache-first by a service ' +\r\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\r\n          );\r\n        });\r\n      } else {\r\n        // Is not localhost. Just register service worker\r\n        registerValidSW(swUrl, config);\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\nfunction registerValidSW(swUrl, config) {\r\n  navigator.serviceWorker\r\n    .register(swUrl)\r\n    .then(registration => {\r\n      registration.onupdatefound = () => {\r\n        const installingWorker = registration.installing;\r\n        if (installingWorker == null) {\r\n          return;\r\n        }\r\n        installingWorker.onstatechange = () => {\r\n          if (installingWorker.state === 'installed') {\r\n            if (navigator.serviceWorker.controller) {\r\n              // At this point, the updated precached content has been fetched,\r\n              // but the previous service worker will still serve the older\r\n              // content until all client tabs are closed.\r\n              console.log(\r\n                'New content is available and will be used when all ' +\r\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\r\n              );\r\n\r\n              // Execute callback\r\n              if (config && config.onUpdate) {\r\n                config.onUpdate(registration);\r\n              }\r\n            } else {\r\n              // At this point, everything has been precached.\r\n              // It's the perfect time to display a\r\n              // \"Content is cached for offline use.\" message.\r\n              console.log('Content is cached for offline use.');\r\n\r\n              // Execute callback\r\n              if (config && config.onSuccess) {\r\n                config.onSuccess(registration);\r\n              }\r\n            }\r\n          }\r\n        };\r\n      };\r\n    })\r\n    .catch(error => {\r\n      console.error('Error during service worker registration:', error);\r\n    });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl, config) {\r\n  // Check if the service worker can be found. If it can't reload the page.\r\n  fetch(swUrl)\r\n    .then(response => {\r\n      // Ensure service worker exists, and that we really are getting a JS file.\r\n      const contentType = response.headers.get('content-type');\r\n      if (\r\n        response.status === 404 ||\r\n        (contentType != null && contentType.indexOf('javascript') === -1)\r\n      ) {\r\n        // No service worker found. Probably a different app. Reload the page.\r\n        navigator.serviceWorker.ready.then(registration => {\r\n          registration.unregister().then(() => {\r\n            window.location.reload();\r\n          });\r\n        });\r\n      } else {\r\n        // Service worker found. Proceed as normal.\r\n        registerValidSW(swUrl, config);\r\n      }\r\n    })\r\n    .catch(() => {\r\n      console.log(\r\n        'No internet connection found. App is running in offline mode.'\r\n      );\r\n    });\r\n}\r\n\r\nexport function unregister() {\r\n  if ('serviceWorker' in navigator) {\r\n    navigator.serviceWorker.ready.then(registration => {\r\n      registration.unregister();\r\n    });\r\n  }\r\n}\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.scss';\r\nimport App from './components/App';\r\nimport * as serviceWorker from './serviceWorker';\r\n\r\nReactDOM.render(<App />, document.getElementById('root'));\r\n\r\n// If you want your app to work offline and load faster, you can change\r\n// unregister() to register() below. Note this comes with some pitfalls.\r\n// Learn more about service workers: https://bit.ly/CRA-PWA\r\nserviceWorker.unregister();\r\n"],"sourceRoot":""}