From 2764f1caf0d38d7de3e623cc5b98290fe209d303 Mon Sep 17 00:00:00 2001 From: Matthew Zegar Date: Fri, 1 Oct 2021 09:04:51 -0700 Subject: [PATCH 01/52] Setup basic viz app demo --- lerna.json | 1 + modules/demo/.vscode/launch.json | 2 +- modules/demo/viz-app/.gitignore | 30 ++++++++++++++++++ modules/demo/viz-app/index.js | 37 ++++++++++++++++++++++ modules/demo/viz-app/next.config.js | 5 +++ modules/demo/viz-app/package.json | 44 ++++++++++++++++++++++++++ modules/demo/viz-app/pages/_app.js | 19 +++++++++++ modules/demo/viz-app/pages/index.jsx | 19 +++++++++++ modules/demo/viz-app/styles/global.css | 13 ++++++++ package.json | 1 + scripts/demo/linux.sh | 2 +- 11 files changed, 171 insertions(+), 2 deletions(-) create mode 100644 modules/demo/viz-app/.gitignore create mode 100755 modules/demo/viz-app/index.js create mode 100644 modules/demo/viz-app/next.config.js create mode 100755 modules/demo/viz-app/package.json create mode 100644 modules/demo/viz-app/pages/_app.js create mode 100644 modules/demo/viz-app/pages/index.jsx create mode 100644 modules/demo/viz-app/styles/global.css diff --git a/lerna.json b/lerna.json index 27830146b..63f760332 100644 --- a/lerna.json +++ b/lerna.json @@ -14,6 +14,7 @@ "modules/demo/ssr/*", "modules/demo/tfjs/*", "modules/demo/client-server", + "modules/demo/viz-app", "modules/demo/sql/*" ] } diff --git a/modules/demo/.vscode/launch.json b/modules/demo/.vscode/launch.json index 4779b48c5..66ec46f6a 100644 --- a/modules/demo/.vscode/launch.json +++ b/modules/demo/.vscode/launch.json @@ -112,7 +112,7 @@ "command": "shellCommand.execute", "args": { "description": "Select a demo to debug", - "command": "echo client-server luma graph spatial xterm $(find modules/demo/deck modules/demo/tfjs modules/demo/ipc modules/demo/ssr modules/demo/sql -maxdepth 2 -type f -name 'package.json' -print0 | grep -z -v node_modules | tr -d '\\0' | sed -r 's@modules/demo/@@g' | sed -r 's@/package.json@ @g') | sort -Vr | sed -r 's@\\s@\\n@g'", + "command": "echo client-server viz-app luma graph spatial xterm $(find modules/demo/deck modules/demo/tfjs modules/demo/ipc modules/demo/ssr modules/demo/sql -maxdepth 2 -type f -name 'package.json' -print0 | grep -z -v node_modules | tr -d '\\0' | sed -r 's@modules/demo/@@g' | sed -r 's@/package.json@ @g') | sort -Vr | sed -r 's@\\s@\\n@g'", } }, ] diff --git a/modules/demo/viz-app/.gitignore b/modules/demo/viz-app/.gitignore new file mode 100644 index 000000000..20fccdd4b --- /dev/null +++ b/modules/demo/viz-app/.gitignore @@ -0,0 +1,30 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local diff --git a/modules/demo/viz-app/index.js b/modules/demo/viz-app/index.js new file mode 100755 index 000000000..802212c65 --- /dev/null +++ b/modules/demo/viz-app/index.js @@ -0,0 +1,37 @@ +#!/usr/bin/env -S node --trace-uncaught + +// Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. + +const Path = require('path'); + +// Change cwd to the example dir so relative file paths are resolved +process.chdir(__dirname); + +const next = require.resolve('next/dist/bin/next'); + +require('fs').stat(Path.join(__dirname, '.next'), (err, stats) => { + const {spawnSync} = require('child_process'); + + const env = { + NEXT_TELEMETRY_DISABLED: 1, // disable https://nextjs.org/telemetry + ...process.env, + }; + + if (err || !stats || !stats.isDirectory()) { + spawnSync(process.execPath, [next, 'build'], {env, cwd: __dirname, stdio: 'inherit'}); + } + + spawnSync(process.execPath, [next, 'start'], {env, cwd: __dirname, stdio: 'inherit'}); +}); diff --git a/modules/demo/viz-app/next.config.js b/modules/demo/viz-app/next.config.js new file mode 100644 index 000000000..954704d28 --- /dev/null +++ b/modules/demo/viz-app/next.config.js @@ -0,0 +1,5 @@ +module.exports = { + eslint: { + ignoreDuringBuilds: true, + }, +} diff --git a/modules/demo/viz-app/package.json b/modules/demo/viz-app/package.json new file mode 100755 index 000000000..ef7c17228 --- /dev/null +++ b/modules/demo/viz-app/package.json @@ -0,0 +1,44 @@ +{ + "name": "@rapidsai/demo-viz-app", + "version": "0.0.0", + "private": true, + "author": "NVIDIA, Inc. (https://nvidia.com/)", + "maintainers": [ + "Ajay Thorve(athorve@nvidia.com)" + ], + "bin": "index.js", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next build && next start" + }, + "dependencies": { + "@deck.gl/core": "8.5.8", + "@deck.gl/layers": "8.5.8", + "@deck.gl/react": "8.5.8", + "@deck.gl/carto": "8.5.8", + "@deck.gl/geo-layers": "8.5.8", + "@deck.gl/mesh-layers": "8.5.8", + "@fortawesome/fontawesome-svg-core": "1.2.35", + "@fortawesome/free-solid-svg-icons": "5.15.3", + "@fortawesome/react-fontawesome": "0.1.14", + "@rapidsai/cudf": "0.0.1", + "apache-arrow": "^4.0.0", + "bootstrap": "4.6.0", + "d3": "6.6.2", + "echarts": "5.0.2", + "echarts-for-react": "3.0.1", + "next": "11.1.0", + "react": "17.0.2", + "react-bootstrap": "1.6.1", + "react-dom": "17.0.2", + "react-map-gl": "5.3.16" + }, + "files": [ + "pages", + "styles", + "components", + "next.config.js", + "package.json" + ] +} diff --git a/modules/demo/viz-app/pages/_app.js b/modules/demo/viz-app/pages/_app.js new file mode 100644 index 000000000..c923cdba0 --- /dev/null +++ b/modules/demo/viz-app/pages/_app.js @@ -0,0 +1,19 @@ +// Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. + +import '../styles/global.css' + +export default function App({ Component, pageProps }) { + return +} diff --git a/modules/demo/viz-app/pages/index.jsx b/modules/demo/viz-app/pages/index.jsx new file mode 100644 index 000000000..540ac5d56 --- /dev/null +++ b/modules/demo/viz-app/pages/index.jsx @@ -0,0 +1,19 @@ +// Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. + +export default function Home() { + return ( +

Viz App

+ ) +} diff --git a/modules/demo/viz-app/styles/global.css b/modules/demo/viz-app/styles/global.css new file mode 100644 index 000000000..621c6a1a3 --- /dev/null +++ b/modules/demo/viz-app/styles/global.css @@ -0,0 +1,13 @@ +/* Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. */ diff --git a/package.json b/package.json index 127099026..b0304ce86 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "modules/demo/ssr/*", "modules/demo/tfjs/*", "modules/demo/client-server", + "modules/demo/viz-app", "modules/demo/sql/*" ], "dependencies": { diff --git a/scripts/demo/linux.sh b/scripts/demo/linux.sh index 9e5cb1da5..0fe94e6d1 100755 --- a/scripts/demo/linux.sh +++ b/scripts/demo/linux.sh @@ -29,7 +29,7 @@ fi if [[ "$DEMO" == "" ]]; then DEMOS=" - $(echo modules/demo/{graph,luma,spatial,xterm,client-server}/package.json) + $(echo modules/demo/{graph,luma,spatial,xterm,client-server,viz-app}/package.json) $(find modules/demo/{deck,tfjs,ipc,ssr,sql} -maxdepth 2 -type f -name 'package.json') "; DEMOS="$(echo -e "$DEMOS" | grep -v node_modules | sort -Vr)"; From b008dd86e2d0cf619702c2e7d364118e2cddd475 Mon Sep 17 00:00:00 2001 From: Matthew Zegar Date: Fri, 1 Oct 2021 10:04:10 -0700 Subject: [PATCH 02/52] Setup WIP demo picking page --- .../components/demo-card/demo-card.jsx | 32 +++++++++++++++++++ modules/demo/viz-app/pages/_app.js | 6 ++-- modules/demo/viz-app/pages/demo/umap.jsx | 21 ++++++++++++ modules/demo/viz-app/pages/index.jsx | 29 ++++++++++++++++- 4 files changed, 85 insertions(+), 3 deletions(-) create mode 100644 modules/demo/viz-app/components/demo-card/demo-card.jsx create mode 100644 modules/demo/viz-app/pages/demo/umap.jsx diff --git a/modules/demo/viz-app/components/demo-card/demo-card.jsx b/modules/demo/viz-app/components/demo-card/demo-card.jsx new file mode 100644 index 000000000..309afa907 --- /dev/null +++ b/modules/demo/viz-app/components/demo-card/demo-card.jsx @@ -0,0 +1,32 @@ +// Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. + +import { Card, Button } from 'react-bootstrap'; +import Link from 'next/link'; + +export default function DemoCard({ title, description, href }) { + return ( + + + {title} + + {description} + + + + + + + ) +} diff --git a/modules/demo/viz-app/pages/_app.js b/modules/demo/viz-app/pages/_app.js index c923cdba0..6f0234bc1 100644 --- a/modules/demo/viz-app/pages/_app.js +++ b/modules/demo/viz-app/pages/_app.js @@ -13,7 +13,9 @@ // limitations under the License. import '../styles/global.css' +import 'bootstrap/dist/css/bootstrap.min.css'; -export default function App({ Component, pageProps }) { - return +export default function App({Component, pageProps}) { + return < Component { ...pageProps } + /> } diff --git a/modules/demo/viz-app/pages/demo/umap.jsx b/modules/demo/viz-app/pages/demo/umap.jsx new file mode 100644 index 000000000..1ee0c991e --- /dev/null +++ b/modules/demo/viz-app/pages/demo/umap.jsx @@ -0,0 +1,21 @@ +// Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. + +import React from 'react'; + +export default class UMAPDemo extends React.Component { + render() { + return
UMAP Demo Page
+ } +} diff --git a/modules/demo/viz-app/pages/index.jsx b/modules/demo/viz-app/pages/index.jsx index 540ac5d56..6eed39a17 100644 --- a/modules/demo/viz-app/pages/index.jsx +++ b/modules/demo/viz-app/pages/index.jsx @@ -12,8 +12,35 @@ // See the License for the specific language governing permissions and // limitations under the License. +import DemoCard from "../components/demo-card/demo-card"; +import { Container, Row, Col } from 'react-bootstrap'; + export default function Home() { + + const demos = [ + { + title: 'UMAP', + description: 'This is the description of the UMAP demo.', + href: '/demo/umap' + }, + { + title: 'Graph', + description: 'Here is some description about the graph...', + href: '/demo/Graph' + }, + ]; + return ( -

Viz App

+ + + { + demos.map((demo) => ( + + + + )) + } + + ) } From 80bd96b9109701c192a6f1d1e638fb8f57c83bd2 Mon Sep 17 00:00:00 2001 From: Matthew Zegar Date: Fri, 1 Oct 2021 10:39:05 -0700 Subject: [PATCH 03/52] Create demo dashboard, generic layout/navbar --- .../components/dashboard/dashboard.jsx | 28 +++++++++++++++++++ .../demo/viz-app/components/layout/layout.jsx | 27 ++++++++++++++++++ .../components/layout/layout.module.css | 20 +++++++++++++ .../demo/viz-app/components/navbar/navbar.jsx | 28 +++++++++++++++++++ .../components/navbar/navbar.module.css | 23 +++++++++++++++ modules/demo/viz-app/pages/demo/umap.jsx | 9 +++--- modules/demo/viz-app/pages/index.jsx | 2 +- 7 files changed, 132 insertions(+), 5 deletions(-) create mode 100644 modules/demo/viz-app/components/dashboard/dashboard.jsx create mode 100644 modules/demo/viz-app/components/layout/layout.jsx create mode 100644 modules/demo/viz-app/components/layout/layout.module.css create mode 100644 modules/demo/viz-app/components/navbar/navbar.jsx create mode 100644 modules/demo/viz-app/components/navbar/navbar.module.css diff --git a/modules/demo/viz-app/components/dashboard/dashboard.jsx b/modules/demo/viz-app/components/dashboard/dashboard.jsx new file mode 100644 index 000000000..1bc5de4e4 --- /dev/null +++ b/modules/demo/viz-app/components/dashboard/dashboard.jsx @@ -0,0 +1,28 @@ +// Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. + +import React from 'react'; +import Layout from '../layout/layout'; + +export default class Dashboard extends React.Component { + render() { + const { demoName } = this.props; + + return ( + + + + ) + } +} diff --git a/modules/demo/viz-app/components/layout/layout.jsx b/modules/demo/viz-app/components/layout/layout.jsx new file mode 100644 index 000000000..c62df9d4a --- /dev/null +++ b/modules/demo/viz-app/components/layout/layout.jsx @@ -0,0 +1,27 @@ +// Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. + +import styles from './layout.module.css' +import CustomNavbar from '../navbar/navbar' + +export default function Layout({ title, children, resetall, displayReset }) { + return ( + <> + +
+ {children} +
+ + ) +} diff --git a/modules/demo/viz-app/components/layout/layout.module.css b/modules/demo/viz-app/components/layout/layout.module.css new file mode 100644 index 000000000..2c9b7ef2f --- /dev/null +++ b/modules/demo/viz-app/components/layout/layout.module.css @@ -0,0 +1,20 @@ +/* Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. */ + +.container { + width: 100%; + height: 80%; + padding: 0 1rem; + margin: 1rem auto 3rem; +} diff --git a/modules/demo/viz-app/components/navbar/navbar.jsx b/modules/demo/viz-app/components/navbar/navbar.jsx new file mode 100644 index 000000000..f76d288a2 --- /dev/null +++ b/modules/demo/viz-app/components/navbar/navbar.jsx @@ -0,0 +1,28 @@ +// Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. + +import Navbar from 'react-bootstrap/Navbar'; +import styles from './navbar.module.css'; + +export default function CustomNavbar({ title, resetall, displayReset }) { + return ( + + +
+ {title} +
+ + + ) +} diff --git a/modules/demo/viz-app/components/navbar/navbar.module.css b/modules/demo/viz-app/components/navbar/navbar.module.css new file mode 100644 index 000000000..e2f18e06f --- /dev/null +++ b/modules/demo/viz-app/components/navbar/navbar.module.css @@ -0,0 +1,23 @@ +/* Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. */ + +.navbar{ + background-color: #e2e2e2 !important; + border-bottom: 3px solid #868686; +} + +.title { + color: black; + font-weight: bold; +} diff --git a/modules/demo/viz-app/pages/demo/umap.jsx b/modules/demo/viz-app/pages/demo/umap.jsx index 1ee0c991e..6cd7a0816 100644 --- a/modules/demo/viz-app/pages/demo/umap.jsx +++ b/modules/demo/viz-app/pages/demo/umap.jsx @@ -13,9 +13,10 @@ // limitations under the License. import React from 'react'; +import Dashboard from "../../components/dashboard/dashboard"; -export default class UMAPDemo extends React.Component { - render() { - return
UMAP Demo Page
- } +export default function UMAP() { + return ( + + ) } diff --git a/modules/demo/viz-app/pages/index.jsx b/modules/demo/viz-app/pages/index.jsx index 6eed39a17..27534e288 100644 --- a/modules/demo/viz-app/pages/index.jsx +++ b/modules/demo/viz-app/pages/index.jsx @@ -35,7 +35,7 @@ export default function Home() { { demos.map((demo) => ( - + )) From a7b1d7be98f18edb6d54dd48398fa29dc7a760e4 Mon Sep 17 00:00:00 2001 From: Matthew Zegar Date: Fri, 1 Oct 2021 10:58:16 -0700 Subject: [PATCH 04/52] Add WIP demo view --- .../components/dashboard/dashboard.jsx | 3 ++- .../components/layout/layout.module.css | 2 -- .../temp-demo-view/temp-demo-view.jsx | 23 +++++++++++++++++++ .../temp-demo-view/temp-demo-view.module.css | 19 +++++++++++++++ 4 files changed, 44 insertions(+), 3 deletions(-) create mode 100644 modules/demo/viz-app/components/temp-demo-view/temp-demo-view.jsx create mode 100644 modules/demo/viz-app/components/temp-demo-view/temp-demo-view.module.css diff --git a/modules/demo/viz-app/components/dashboard/dashboard.jsx b/modules/demo/viz-app/components/dashboard/dashboard.jsx index 1bc5de4e4..b19c9b903 100644 --- a/modules/demo/viz-app/components/dashboard/dashboard.jsx +++ b/modules/demo/viz-app/components/dashboard/dashboard.jsx @@ -14,6 +14,7 @@ import React from 'react'; import Layout from '../layout/layout'; +import TempDemoView from '../temp-demo-view/temp-demo-view'; export default class Dashboard extends React.Component { render() { @@ -21,7 +22,7 @@ export default class Dashboard extends React.Component { return ( - + ) } diff --git a/modules/demo/viz-app/components/layout/layout.module.css b/modules/demo/viz-app/components/layout/layout.module.css index 2c9b7ef2f..2d4929608 100644 --- a/modules/demo/viz-app/components/layout/layout.module.css +++ b/modules/demo/viz-app/components/layout/layout.module.css @@ -15,6 +15,4 @@ .container { width: 100%; height: 80%; - padding: 0 1rem; - margin: 1rem auto 3rem; } diff --git a/modules/demo/viz-app/components/temp-demo-view/temp-demo-view.jsx b/modules/demo/viz-app/components/temp-demo-view/temp-demo-view.jsx new file mode 100644 index 000000000..4632f0375 --- /dev/null +++ b/modules/demo/viz-app/components/temp-demo-view/temp-demo-view.jsx @@ -0,0 +1,23 @@ +// Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. + +import styles from './temp-demo-view.module.css'; + +// While we wait for the actual hookup of the demo, we'll use this place-holder +// to represent the size that the demo will take up. +export default function TempDemoView() { + return ( +
+ ) +} diff --git a/modules/demo/viz-app/components/temp-demo-view/temp-demo-view.module.css b/modules/demo/viz-app/components/temp-demo-view/temp-demo-view.module.css new file mode 100644 index 000000000..b3c00dfd1 --- /dev/null +++ b/modules/demo/viz-app/components/temp-demo-view/temp-demo-view.module.css @@ -0,0 +1,19 @@ +/* Copyright (c) 2021, NVIDIA CORPORATION. +// +// 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. */ + +.view { + height: 70vh; + width: 100% !important; + background-color: #b5b5b5; +} From 7a727effb79fc1c8021982a42584c2b353d1eec4 Mon Sep 17 00:00:00 2001 From: Matthew Zegar Date: Fri, 1 Oct 2021 11:48:06 -0700 Subject: [PATCH 05/52] Style up pick demo screen --- .../components/demo-card/demo-card.jsx | 3 +- .../demo-dashboard.jsx} | 2 +- modules/demo/viz-app/pages/demo/umap.jsx | 4 +-- modules/demo/viz-app/pages/index.jsx | 28 ++++++++++--------- modules/demo/viz-app/styles/global.css | 4 +++ 5 files changed, 24 insertions(+), 17 deletions(-) rename modules/demo/viz-app/components/{dashboard/dashboard.jsx => demo-dashboard/demo-dashboard.jsx} (93%) diff --git a/modules/demo/viz-app/components/demo-card/demo-card.jsx b/modules/demo/viz-app/components/demo-card/demo-card.jsx index 309afa907..56f702ba8 100644 --- a/modules/demo/viz-app/components/demo-card/demo-card.jsx +++ b/modules/demo/viz-app/components/demo-card/demo-card.jsx @@ -17,7 +17,8 @@ import Link from 'next/link'; export default function DemoCard({ title, description, href }) { return ( - + + {title} diff --git a/modules/demo/viz-app/components/dashboard/dashboard.jsx b/modules/demo/viz-app/components/demo-dashboard/demo-dashboard.jsx similarity index 93% rename from modules/demo/viz-app/components/dashboard/dashboard.jsx rename to modules/demo/viz-app/components/demo-dashboard/demo-dashboard.jsx index b19c9b903..419f40538 100644 --- a/modules/demo/viz-app/components/dashboard/dashboard.jsx +++ b/modules/demo/viz-app/components/demo-dashboard/demo-dashboard.jsx @@ -16,7 +16,7 @@ import React from 'react'; import Layout from '../layout/layout'; import TempDemoView from '../temp-demo-view/temp-demo-view'; -export default class Dashboard extends React.Component { +export default class DemoDashboard extends React.Component { render() { const { demoName } = this.props; diff --git a/modules/demo/viz-app/pages/demo/umap.jsx b/modules/demo/viz-app/pages/demo/umap.jsx index 6cd7a0816..6294a5acd 100644 --- a/modules/demo/viz-app/pages/demo/umap.jsx +++ b/modules/demo/viz-app/pages/demo/umap.jsx @@ -13,10 +13,10 @@ // limitations under the License. import React from 'react'; -import Dashboard from "../../components/dashboard/dashboard"; +import DemoDashboard from "../../components/demo-dashboard/demo-dashboard"; export default function UMAP() { return ( - + ) } diff --git a/modules/demo/viz-app/pages/index.jsx b/modules/demo/viz-app/pages/index.jsx index 27534e288..2a3b7c18e 100644 --- a/modules/demo/viz-app/pages/index.jsx +++ b/modules/demo/viz-app/pages/index.jsx @@ -13,7 +13,7 @@ // limitations under the License. import DemoCard from "../components/demo-card/demo-card"; -import { Container, Row, Col } from 'react-bootstrap'; +import { Container, Row, Col, Jumbotron } from 'react-bootstrap'; export default function Home() { @@ -27,20 +27,22 @@ export default function Home() { title: 'Graph', description: 'Here is some description about the graph...', href: '/demo/Graph' - }, + } ]; return ( - - - { - demos.map((demo) => ( - - - - )) - } - - + + + + { + demos.map((demo) => ( + + + + )) + } + + + ) } diff --git a/modules/demo/viz-app/styles/global.css b/modules/demo/viz-app/styles/global.css index 621c6a1a3..4b90d7486 100644 --- a/modules/demo/viz-app/styles/global.css +++ b/modules/demo/viz-app/styles/global.css @@ -11,3 +11,7 @@ // 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. */ + +html, #__next, .jumbotron { + background-color: #1a1a1a !important; +} From 05f9a05383a3a2d886c8e8125d67067b33b6e432 Mon Sep 17 00:00:00 2001 From: Matthew Zegar Date: Fri, 1 Oct 2021 11:49:54 -0700 Subject: [PATCH 06/52] Change to dark theme buttons --- modules/demo/viz-app/components/demo-card/demo-card.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/demo/viz-app/components/demo-card/demo-card.jsx b/modules/demo/viz-app/components/demo-card/demo-card.jsx index 56f702ba8..4acff17b5 100644 --- a/modules/demo/viz-app/components/demo-card/demo-card.jsx +++ b/modules/demo/viz-app/components/demo-card/demo-card.jsx @@ -25,7 +25,7 @@ export default function DemoCard({ title, description, href }) { {description} - + From 8084deaea7ed21cbf39f40ea7b04e10443291a99 Mon Sep 17 00:00:00 2001 From: Matthew Zegar Date: Fri, 1 Oct 2021 13:30:34 -0700 Subject: [PATCH 07/52] Add footer --- .../demo-dashboard/demo-dashboard.jsx | 2 ++ .../demo/viz-app/components/footer/footer.jsx | 23 +++++++++++++++++++ modules/demo/viz-app/styles/global.css | 9 ++++++++ 3 files changed, 34 insertions(+) create mode 100644 modules/demo/viz-app/components/footer/footer.jsx diff --git a/modules/demo/viz-app/components/demo-dashboard/demo-dashboard.jsx b/modules/demo/viz-app/components/demo-dashboard/demo-dashboard.jsx index 419f40538..f98ca65a0 100644 --- a/modules/demo/viz-app/components/demo-dashboard/demo-dashboard.jsx +++ b/modules/demo/viz-app/components/demo-dashboard/demo-dashboard.jsx @@ -15,6 +15,7 @@ import React from 'react'; import Layout from '../layout/layout'; import TempDemoView from '../temp-demo-view/temp-demo-view'; +import Footer from '../footer/footer'; export default class DemoDashboard extends React.Component { render() { @@ -23,6 +24,7 @@ export default class DemoDashboard extends React.Component { return ( +