Added visualization explorer tab to dataset page (#362)

* Added ability to load data

* Added table visualization

* Added tailwind and more base UI components

* Updated UI components

* Updated scout font size and added several fixes

* Fixed more styles

* Expanded visualization dropdown

* Updated select background color

* Added viz picker

* Added histogram

* Added histogram visualization

Author: Juan Pablo Sarmiento

.eslintrc

@@ -52,6 +52,21 @@
         "components": ["Link"],
         "specialLink": ["to"]
       }
+    ],
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        "labelComponents": ["LabelWrapper"],
+        "labelAttributes": ["label"],
+        "controlComponents": [
+          "InputText",
+          "InputNumber",
+          "Select",
+          "MixedCheckbox",
+          "MultiSelect",
+          "TextArea"
+        ]
+      }
     ]
   },
   "settings": {

packages/frontend/package.json

@@ -7,23 +7,31 @@
     "@azure/msal-browser": "^2.22.0",
     "@azure/msal-react": "^1.3.0",
     "@elastic/elasticsearch": "^7.9.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.26",
-    "@fortawesome/free-brands-svg-icons": "^5.12.1",
-    "@fortawesome/free-regular-svg-icons": "^5.12.0",
-    "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@fortawesome/react-fontawesome": "^0.1.8",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@nestjs/elasticsearch": "^7.1.0",
+    "@nivo/bar": "^0.80.0",
+    "@nivo/core": "^0.80.0",
+    "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-slider": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.0.5",
     "@reach/dialog": "^0.16.2",
     "@reach/menu-button": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/invariant": "^2.2.35",
     "@types/pluralize": "^0.0.29",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/styled-components": "^5.1.25",
     "@types/uuid": "^8.3.4",
+    "ag-grid-community": "^29.1.0",
+    "ag-grid-react": "^29.1.0",
     "antd": "^4.8.2",
     "bootstrap": "^4.4.1",
     "classnames": "^2.3.1",
@@ -39,6 +47,7 @@
     "node-sass": "^6.0.0",
     "normalize.css": "^8.0.1",
     "numeral": "^2.0.6",
+    "papaparse": "^5.4.0",
     "pluralize": "^8.0.0",
     "react": "^17.0.2",
     "react-bootstrap": "^1.0.0-beta.16",
@@ -51,12 +60,16 @@
     "react-share": "^4.4.0",
     "react-toastify": "^8.2.0",
     "react-use-fuse": "^0.5.2",
+    "remeda": "^1.9.0",
     "styled-components": "^5.3.5",
+    "tailwindcss": "^3.2.7",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@types/numeral": "^2.0.2",
     "@types/jwt-decode": "^3.1.0",
+    "@types/numeral": "^2.0.2",
+    "@types/papaparse": "^5.3.7",
+    "eslint-plugin-tailwindcss": "^3.10.1",
     "gh-pages": "^2.2.0",
     "husky": "1.2.0",
     "lint-staged": "^9.2.1",

packages/frontend/src/App.scss

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 // Color Variables
 $PaleGrey: #f1f1f2;
 $LightGrey: #b2b2b2;
@@ -18,7 +22,7 @@ body {
   margin: 0px;
   padding: 0px;
   font-family: 'Lato', sans-serif;
-  font-size: 11px;
+  font-size: 16px;
 }
 ul {
   list-style: None;
@@ -28,18 +32,18 @@ ul {
 
 h1 {
   width: 100%;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: normal;
-  line-height: 22px;
+  line-height: 1.75rem;
   margin: 0;
   padding: 2px 0;
 }
 
 h2 {
   width: 100%;
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 700;
-  line-height: 17px;
+  line-height: 1.75rem;
   text-align: left;
 }
 
@@ -49,15 +53,15 @@ a.title {
 }
 
 h3 {
-  font-size: 11px;
+  font-size: 0.875rem;
   font-weight: bold;
-  line-height: 13px;
+  line-height: 1.25rem;
 }
 
 p {
   font-weight: normal;
-  font-size: 11px;
-  line-height: 13px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 #root {
@@ -115,17 +119,17 @@ p {
   font-weight: bold;
 }
 
-button {
-  font-weight: bold;
-  color: white;
+button.primary-button {
   border: none;
   background: none;
   background-color: #1c4d5e;
-  //    background-color: #e7f2ff;
-  height: 24px;
-  width: 131px;
+  font-weight: bold;
+  color: white;
   outline: none;
+  padding: 0.25rem 0.75rem;
+  min-width: 135px;
 }
+
 button::-moz-focus-inner {
   border: 0;
 }
@@ -149,19 +153,6 @@ button.header-button {
   }
 }
 
-button.header-button {
-  color: white;
-  width: 100%;
-  background-color: transparent;
-  color: white;
-  border: none;
-  display: flex;
-  justify-content: space-between;
-  &:active {
-    outline: none;
-  }
-}
-
 .bold {
   font-weight: 700;
 }

packages/frontend/src/components/AddToCollectionButton/index.tsx

@@ -17,15 +17,17 @@ import { usePreventCollectionTabBlur } from '../CollectionTab/CollectionTab';
 import { useUserCollections } from '../../hooks/collections';
 
 const MenuItemHeader = styled.h6`
-  font-size: 13px;
+  font-size: 0.9rem;
   font-weight: 700;
+  line-height: 1.25rem;
   padding-left: 10px;
   padding-right: 24px;
 `;
 
 const StyledMenuList = styled(MenuList)`
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  font-size: 12px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   margin-top: 4px;
 `;
 
@@ -123,9 +125,11 @@ export default function AddToCollectionButton({
     if (itemsWithDataset.length > 0) {
       return (
         <>
-          <MenuItemHeader>Collections that have this dataset</MenuItemHeader>
+          <MenuItemHeader className="mb-1">
+            Collections that have this dataset
+          </MenuItemHeader>
           {itemsWithDataset}
-          <MenuItemHeader style={{ marginTop: 8 }}>
+          <MenuItemHeader className="mb-1 mt-2">
             Other collections
           </MenuItemHeader>
           {itemsWithoutDataset.length === 0 ? (
@@ -148,7 +152,7 @@ export default function AddToCollectionButton({
   return (
     /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
     <Menu>
-      <MenuButton>
+      <MenuButton className="primary-button text-sm w-40">
         <div onClick={preventCollectionTabBlur}>
           {menuButtonText}
           <FontAwesomeIcon
@@ -169,14 +173,9 @@ export default function AddToCollectionButton({
             onNameChange={setName}
             onDescriptionChange={setDescription}
           />
-          <div
-            css={`
-              display: flex;
-              flex: 1;
-              justify-content: center;
-            `}
-          >
+          <div className="flex flex-1 justify-center mt-2">
             <button
+              className="primary-button"
               type="button"
               style={{ marginRight: 8 }}
               disabled={isCreating}
@@ -192,7 +191,11 @@ export default function AddToCollectionButton({
             >
               Create and add dataset
             </button>
-            <button type="button" onClick={onDismissModal}>
+            <button
+              className="primary-button !text-slate-700 !bg-gray-200"
+              type="button"
+              onClick={onDismissModal}
+            >
               Cancel
             </button>
           </div>

packages/frontend/src/components/CollectionTab/CollectionCreateForm.tsx

@@ -26,16 +26,18 @@ export default function CollectionCreateForm({
   return (
     <>
       <h2>Create Collection</h2>
-      <div className="collections-tab-create-options">
+      <div className="collections-tab-create-options space-y-2">
         <p>Name your new collection</p>
         <input
           placeholder="Name"
+          className="border !border-gray-400"
           type="text"
           value={name}
           onChange={onNameChangeFn}
         />
         <p>Describe your collection</p>
         <input
+          className="border !border-gray-400"
           placeholder="Description"
           type="text"
           value={description}

packages/frontend/src/components/CollectionTab/CollectionTab.scss

@@ -108,7 +108,6 @@
         height: 44px;
         .collection-name {
             color: #152935;
-            font-size: 14px;
             font-weight: normal;
             padding-bottom: 0px;
             margin-bottom: 4px;
@@ -131,9 +130,6 @@
     padding: 0px;
     color: black;
     display: flex;
-    p {
-        font-size: 12px;
-    }
     ul {
         overflow-y: auto;
         flex: 1;

packages/frontend/src/components/CollectionTab/CollectionTabCreate.jsx

@@ -18,6 +18,7 @@ export function CollectionTabCreate({ onDone }) {
       />
       <div className="collection-tab-buttons">
         <button
+          className="primary-button"
           type="submit"
           onClick={async () => {
             await onTryCreateCollection(name, description);
@@ -27,7 +28,11 @@ export function CollectionTabCreate({ onDone }) {
         >
           Create
         </button>
-        <button type="button" onClick={() => onDone()}>
+        <button
+          className="primary-button"
+          type="button"
+          onClick={() => onDone()}
+        >
           Cancel
         </button>
       </div>

packages/frontend/src/components/CollectionTab/CollectionTabList/DatasetList.tsx

@@ -65,6 +65,7 @@ export default function DatasetList({ collection }: Props): JSX.Element {
           </div>
           <button
             type="button"
+            className="px-2 hover:bg-slate-200 transition-colors"
             onClick={async () => {
               removeFromCollection(dataset.id, collection.id);
             }}

packages/frontend/src/components/CollectionTab/CollectionTabList/EmptyPanelContent.tsx

@@ -7,21 +7,12 @@ const StyledDiv = styled.div`
   padding: 10px 12px;
   text-align: center;
   width: 100%;
-  p {
-    width: 100%;
-    font-size: 1.2rem;
-    line-height: 1.4rem;
-  }
 `;
 
 type Props = {
   children: ReactNode;
 };
 
 export default function EmptyPanelContent({ children }: Props): JSX.Element {
-  return (
-    <StyledDiv>
-      <p>{children}</p>
-    </StyledDiv>
-  );
+  return <StyledDiv>{children}</StyledDiv>;
 }