Merge branch 'master' of https://github.com/m2ms/fragalysis-frontend …

…into #407

# Conflicts:
#	js/components/datasets/datasetMoleculeView.js

.vscode/launch.json

@@ -1,15 +1,23 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8080",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Attach to Chrome",
+      "port": 9222,
+      "request": "attach",
+      "type": "pwa-chrome",
+      "urlFilter": "http://localhost:8080/*",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

js/components/common/Tooltips/index.js

@@ -0,0 +1,37 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Popper, Paper } from '@material-ui/core';
+import SVGInline from 'react-svg-inline';
+
+export const SvgTooltip = memo(({ open, anchorEl, imgData, width, height }) => {
+  return (
+    <Popper open={open} anchorEl={anchorEl} placement="bottom-end">
+      <Paper
+        square
+        style={{
+          height: `${height * 3}px`,
+          width: `${width * 3}px`
+        }}
+      >
+        <SVGInline
+          component="div"
+          svg={imgData}
+          style={{
+            height: `${height}px`,
+            width: `${width}px`,
+            transform: 'scale(3)',
+            transformOrigin: 'top left'
+          }}
+        />
+      </Paper>
+    </Popper>
+  );
+});
+
+SvgTooltip.propTypes = {
+  open: PropTypes.bool.isRequired,
+  anchorEl: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
+  imgData: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired
+};

js/components/common/index.js

@@ -3,3 +3,4 @@ export * from './Inputs';
 export * from './Modal';
 export * from './Navigation';
 export * from './Surfaces';
+export * from './Tooltips';