SparseZoo Table UI (#69)

Added a simple dynamic table for sparsezoo models.

Core Features:
-View models by domain and subdomain.
-Pagination of models
-Filtering based on fields

Author: kevinaer

.github/workflows/quality-check.yaml

@@ -5,7 +5,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: "⚙️ Install dependencies"
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+      - name: "⚙️ Install python dependencies"
         run: pip3 install .[dev]
+      - name: "⚙️ Install js dependencies"
+        run: yarn install
       - name: "🧹 Running quality checks"
         run: make quality

Makefile

@@ -4,6 +4,8 @@ BUILDDIR := $(PWD)
 PYCHECKDIRS := examples tests src utils scripts notebooks
 PYCHECKGLOBS := 'examples/**/*.py' 'scripts/**/*.py' 'src/**/*.py' 'tests/**/*.py' 'utils/**/*.py' setup.py
 DOCDIR := docs
+JSCHECKDIRS := src public
+JSCHECKGLOBS := 'public/**/*.html' 'public/**/*.js' 'public/**/*.css' 'src/**/*.html' 'src/**/*.jsx' 'tests/**/*.jsx'
 MDCHECKGLOBS := 'docs/**/*.md' 'docs/**/*.rst' 'examples/**/*.md' 'notebooks/**/*.md' 'scripts/**/*.md'
 MDCHECKFILES := CODE_OF_CONDUCT.md CONTRIBUTING.md DEVELOPING.md README.md
 SPARSEZOO_TEST_MODE := "true"
@@ -42,6 +44,8 @@ quality:
 	black --check $(PYCHECKDIRS);
 	isort --check-only $(PYCHECKDIRS);
 	flake8 $(PYCHECKDIRS);
+	@echo "Running js/jsx quality checks";
+	yarn prettier --check $(JSCHECKDIRS);
 
 # style the code according to accepted standards for the repo
 style:
@@ -50,6 +54,8 @@ style:
 	@echo "Running python styling";
 	black $(PYCHECKDIRS);
 	isort $(PYCHECKDIRS);
+	@echo "Running js/jsx styling";
+	yarn prettier --write $(JSCHECKDIRS);
 
 # run tests for the repo
 test:
@@ -68,6 +74,10 @@ docsupdate:
 
 # creates wheel file
 build:
+	@echo "Building UI";
+	yarn install;
+	yarn build;
+	@echo "Building python package";
 	python3 setup.py sdist bdist_wheel $(BUILD_ARGS)
 
 # clean package

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "sparsezoo",
+  "version": "0.2.0",
+  "private": true,
+  "repository": "[email protected]:neuralmagic/sparsezoo.git",
+  "author": "Neuralmagic, Inc.",
+  "license": "Apache",
+  "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "@reduxjs/toolkit": "^1.5.1",
+    "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-copy-to-clipboard": "^5.0.3",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.3",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^4.0.3",
+    "react-transition-group": "^4.4.1",
+    "redux": "^4.0.5",
+    "universal-cookie": "^4.0.4"
+  },
+  "devDependencies": {
+    "prettier": "^2.2.1"
+  },
+  "scripts": {
+    "lint": "yarn prettier --write src/ui",
+    "start": "REACT_APP_SPARSEZOO_API_URL=$SPARSEZOO_API_URL react-scripts start",
+    "build": "NODE_ENV=production REACT_APP_SPARSEZOO_API_URL=$SPARSEZOO_API_URL && react-scripts build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "prettier": {
+    "printWidth": 88,
+    "tabWidth": 2,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": false,
+    "quoteProps": "as-needed",
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "always"
+  }
+}

public/assets/favicon/android-chrome-192x192.png

@@ -0,0 +1,50 @@
+<!--
+Copyright (c) 2021 - present / Neuralmagic, Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/assets/favicon/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Tables for display SparseZoo models. Developed by Neural Magic."
+    />
+    <link
+      rel="apple-touch-icon"
+      href="%PUBLIC_URL%/assets/favicon/apple-touch-icon.png"
+    />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>SparseZoo Table</title>
+    <style>
+      #root {
+        position: absolute;
+        padding: 0;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>