Feature/geospatial interface

package.json

@@ -269,5 +269,8 @@
             "@utils/(.*)$": "<rootDir>/src/utils/$1",
             "^react-native$": "react-native-web"
         }
+    },
+    "dependencies": {
+        "mapbox-gl": "^3.9.3"
     }
 }

public/index.html

@@ -6,11 +6,13 @@
       http-equiv="Content-Security-Policy"
       content="
       default-src 'self';
-      connect-src 'self' https://api.github.com:* http://localhost:* https://localhost:* https://documentation.networkcanvas.com:* https://assets.networkcanvas.com:* %REACT_APP_CONNECT_SRC_CSP%;
-      script-src 'self' %REACT_APP_SCRIPT_SRC_CSP%;
-      style-src 'self' 'unsafe-inline';
-      media-src 'self' data: protocol: asset:;
-      img-src 'self' data: protocol: asset:;
+      worker-src blob: ;
+      child-src blob: ;
+      connect-src 'self' https://api.github.com:* http://localhost:* https://localhost:* https://documentation.networkcanvas.com:* https://assets.networkcanvas.com:* https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com %REACT_APP_CONNECT_SRC_CSP% ;
+      script-src 'self' %REACT_APP_SCRIPT_SRC_CSP% ;
+      style-src 'self' 'unsafe-inline' ;
+      media-src 'self' data: protocol: asset: ;
+      img-src 'self' data: blob: protocol: asset: ;
     "
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

src/components/AssetBrowser/Asset.js

@@ -15,6 +15,9 @@ const ASSET_COMPONENTS = {
   video: Thumbnails.Video,
   audio: Thumbnails.Audio,
   network: Thumbnails.Network,
+  geospatial: Thumbnails.GeoJSON,
+  apikey: Thumbnails.APIKey,
+  geojson: Thumbnails.GeoJSON,
 };
 
 const Asset = ({

src/components/AssetBrowser/Assets.js

@@ -11,6 +11,8 @@ const ASSET_TYPES = [
   { label: 'Video', value: 'video' },
   { label: 'Audio', value: 'audio' },
   { label: 'Network', value: 'network' },
+  { label: 'GeoJSON', value: 'geospatial' },
+  { label: 'API Key', value: 'apikey' },
 ];
 
 const Assets = ({
@@ -32,21 +34,26 @@ const Assets = ({
     source,
     type: thumbnailType,
     isUsed,
-  }) => (
-    <div className="asset-browser-assets__asset" key={id}>
-      <Asset
-        id={id}
-        name={name}
-        source={source}
-        type={thumbnailType}
-        isUsed={isUsed}
-        onClick={onSelect}
-        onPreview={onPreview}
-        onDownload={onDownload}
-        onDelete={handleDelete}
-      />
-    </div>
-  ));
+  }) => {
+    // disable download for apikey type
+    const handleDownload = (thumbnailType === 'apikey') ? null : onDownload;
+
+    return (
+      <div className="asset-browser-assets__asset" key={id}>
+        <Asset
+          id={id}
+          name={name}
+          source={source}
+          type={thumbnailType}
+          isUsed={isUsed}
+          onClick={onSelect}
+          onPreview={onPreview}
+          onDownload={handleDownload}
+          onDelete={handleDelete}
+        />
+      </div>
+    );
+  });
 
   return (
     <div className="asset-browser-assets">

src/components/AssetBrowser/Preview.js

@@ -4,6 +4,7 @@ import { compose } from 'redux';
 import cx from 'classnames';
 import { Button } from '@codaco/ui';
 import Window from '@components/Window';
+import ContentCopyIcon from '@material-ui/icons/FileCopy';
 import DownloadIcon from '@material-ui/icons/GetApp';
 import withAssetMeta from '@components/Assets/withAssetMeta';
 import withAssetPath from '@components/Assets/withAssetPath';
@@ -21,6 +22,10 @@ const getRenderer = (meta) => {
       return ({ id }) => <Assets.Video id={id} controls />;
     case 'network':
       return Assets.Network;
+    case 'geospatial':
+      return Assets.GeoJSON;
+    case 'apikey':
+      return Assets.APIKey;
     default:
       return () => <p>No preview available.</p>;
   }
@@ -39,6 +44,12 @@ const Preview = ({
     onDownload(assetPath, meta);
   }, [onDownload, assetPath, meta]);
 
+  const handleCopyKey = useCallback(() => {
+    if (meta.value) {
+      navigator.clipboard.writeText(meta.value);
+    }
+  }, []);
+
   const primaryButtons = [
     <Button
       onClick={onClose}
@@ -49,14 +60,23 @@ const Preview = ({
     </Button>,
   ];
 
-  const secondaryButtons = [
+  // API keys are copied instead of downloaded
+  const secondaryButtons = meta.type !== 'apikey' ? [
     <Button
       onClick={handleDownload}
       icon={<DownloadIcon />}
       key="download"
     >
       Download asset
     </Button>,
+  ] : [
+    <Button
+      onClick={handleCopyKey}
+      icon={<ContentCopyIcon />}
+      key="copy"
+    >
+      Copy API Key
+    </Button>,
   ];
 
   const className = cx(

src/components/AssetBrowser/withAssetActions.js

@@ -10,6 +10,7 @@ const connectActions = connect(
   null,
   {
     deleteAsset: assetActions.deleteAsset,
+    importAsset: assetActions.importAsset,
     openDialog: dialogActions.openDialog,
   },
 );

src/components/Assets/APIKey.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withAssetMeta from './withAssetMeta';
+
+const APIKey = ({ meta }) => (
+  <h1 style={{ wordWrap: 'break-word' }}>
+    {meta.value}
+  </h1>
+);
+
+APIKey.propTypes = {
+  meta: PropTypes.shape({
+    value: PropTypes.string,
+    name: PropTypes.string,
+  }),
+};
+
+APIKey.defaultProps = {
+  meta: {
+    value: '',
+  },
+};
+
+export default withAssetMeta(APIKey);

src/components/Assets/GeoJSON.js

@@ -0,0 +1,58 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+import { get } from 'lodash';
+import fs from 'fs-extra';
+import Table from './Table';
+import withAssetPath from './withAssetPath';
+
+const initialContent = {
+  geojson: { features: [] },
+  columns: [],
+};
+
+const getGeoJSON = (assetPath) => fs.readJson(assetPath);
+
+const getRows = (geojson) => get(geojson, ['features'], []).map(
+  ({ properties }) => properties,
+);
+
+const getColumns = (geojson) => {
+  const properties = get(geojson, ['features'], []).map(
+    (feature) => feature.properties,
+  );
+
+  const columnNames = Array.from(
+    new Set(properties.flatMap(Object.keys)),
+  );
+
+  return columnNames.map((col) => ({
+    Header: col,
+    accessor: col,
+  }));
+};
+
+const GeoJSONTable = ({ assetPath }) => {
+  const [content, setContent] = useState({ ...initialContent });
+
+  useEffect(() => {
+    if (!assetPath) {
+      setContent({ ...initialContent });
+      return;
+    }
+
+    getGeoJSON(assetPath)
+      .then(setContent);
+  }, [assetPath]);
+
+  const data = useMemo(() => getRows(content), [content]);
+  const columns = useMemo(() => getColumns(content), [content]);
+
+  return <Table data={data} columns={columns} />;
+};
+
+GeoJSONTable.propTypes = {
+  assetPath: PropTypes.string.isRequired,
+};
+
+export default withAssetPath(GeoJSONTable);

src/components/Assets/Network.js

@@ -3,12 +3,10 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
-import { useTable, useSortBy } from 'react-table';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
 import { getVariableNamesFromNetwork } from '@app/protocol-validation/validation/validateExternalData';
 import withAssetPath from './withAssetPath';
 import { networkReader } from '../../utils/protocols/assetTools';
+import Table from './Table';
 
 const initialContent = {
   network: { nodes: [] },
@@ -26,15 +24,6 @@ const getColumns = (network) => getVariableNamesFromNetwork(network).map(
   }),
 );
 
-const getSortIcon = (column) => {
-  if (!column.isSorted) { return null; }
-  return (
-    column.isSortedDesc
-      ? <ArrowDropDownIcon />
-      : <ArrowDropUpIcon />
-  );
-};
-
 const Network = ({ assetPath }) => {
   const [content, setContent] = useState({ ...initialContent });
 
@@ -51,60 +40,15 @@ const Network = ({ assetPath }) => {
   const data = useMemo(() => getRows(content), [content]);
   const columns = useMemo(() => getColumns(content), [content]);
 
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    rows,
-    prepareRow,
-  } = useTable(
-    { data, columns },
-    useSortBy,
-  );
-
   return (
-    <table {...getTableProps()} className="network">
-      <thead>
-        {headerGroups.map((headerGroup) => (
-          <tr {...headerGroup.getHeaderGroupProps()}>
-            {headerGroup.headers.map((column) => (
-              <th
-                {...column.getHeaderProps(column.getSortByToggleProps())}
-              >
-                {column.render('Header')}
-                {getSortIcon(column)}
-              </th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-      <tbody {...getTableBodyProps()}>
-        {rows.map((row) => {
-          prepareRow(row);
-
-          return (
-            <tr {...row.getRowProps()}>
-              {row.cells.map((cell) => (
-                <td
-                  {...cell.getCellProps()}
-                >
-                  {cell.render('Cell')}
-                </td>
-              ))}
-            </tr>
-          );
-        })}
-      </tbody>
-    </table>
+    <Table data={data} columns={columns} />
   );
 };
 
 Network.propTypes = {
   assetPath: PropTypes.string.isRequired,
 };
 
-export { Network };
-
 export default compose(
   withAssetPath,
 )(Network);