Merge pull request #543 from MetaCell/feature/GEP-166

GEP-166 Update showcase code to make it compatible with the last geppetto.js libs
MetaCell · Sep 25, 2024 · baf0e97 · baf0e97
2 parents cb19bee + de76d75
commit baf0e97
Show file tree

Hide file tree

Showing 15 changed files with 1,515 additions and 3,127 deletions.
diff --git a/examples/layout-manager-playground/package.json b/examples/layout-manager-playground/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "prepare": "yarn link:yalc",
     "link:yalc": "yalc link @metacell/geppetto-meta-core && yalc link @metacell/geppetto-meta-ui && yalc link @metacell/geppetto-meta-client",
     "dev": "vite",
     "build": "tsc -b && vite build",

diff --git a/examples/layout-manager-playground/setup.bash b/examples/layout-manager-playground/setup.bash
@@ -8,8 +8,5 @@ cd "${PARENT_PATH}"
 GEPPETTO_JS="../../geppetto.js"
 
 (bash "${GEPPETTO_JS}/dev-install.sh")
-(cd "${GEPPETTO_JS}/geppetto-core" && yarn build:dev)
-(cd "${GEPPETTO_JS}/geppetto-ui" && yarn build:dev)
-(cd "${GEPPETTO_JS}/geppetto-client" && yarn build:dev)
 
-yarn install && yarn link:yalc
+yarn install
diff --git a/geppetto-showcase/README.md b/geppetto-showcase/README.md
@@ -15,7 +15,7 @@ We use [yalc](https://github.com/wclr/yalc) as a local repository to manage thes
 The `./setup.sh` script will build and add the local geppetto packages to the showcase:
 
 ```bash
-sh ./setup.sh
+bash ./setup.sh
 ```
 
 Install dependencies
@@ -33,9 +33,7 @@ yarn start
 (optional for hot reloading)
 
 ```bash
-yarn global add nodemon
-cd ../geppetto.js/geppetto-ui
-nodemon -w ./src -x 'yarn build:src && yalc push build'
+bash watch-geppettojs-updates.sh
 ```
 
 ## Deployment
@@ -49,5 +47,5 @@ docker build -t geppetto-showcase .
 Start container with:
 
 ````bash
-docker run -p 8080:80 geppetto-showcase 
+docker run -p 8080:80 geppetto-showcase
 ````
diff --git a/geppetto-showcase/package.json b/geppetto-showcase/package.json
@@ -5,6 +5,8 @@
   "repository": "https://github.com/MetaCell/geppetto-website.git",
   "license": "MIT",
   "scripts": {
+    "prepare": "yarn link:yalc",
+    "link:yalc": "yalc link @metacell/geppetto-meta-core && yalc link @metacell/geppetto-meta-ui && yalc link @metacell/geppetto-meta-client",
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "webpack serve --open --mode development",
     "build": "webpack"
@@ -29,25 +31,24 @@
     "eslint": "^7.22.0",
     "file-loader": "^5.1.0",
     "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.6.0",
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
     "markdown-loader": "^5.1.0",
-    "node-sass": "^6.0.0",
     "prismjs": "^1.25.0",
     "raw-loader": "^4.0.0",
     "react-docgen": "^5.3.0",
     "react-svg-loader": "^3.0.3",
-    "sass": "^1.32.12",
-    "sass-loader": "^10.2.0",
+    "sass": "^1.78.0",
+    "sass-loader": "^16.0.1",
     "speed-measure-webpack-plugin": "^1.5.0",
     "style-loader": "^1.2.1",
     "svg-url-loader": "^4.0.0",
     "typescript": "^4.3.2",
     "url-loader": "^3.0.0",
-    "webpack": "^4.41.6",
-    "webpack-cli": "^4.9.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
@@ -67,11 +68,12 @@
     "aframe-slice9-component": ">=1.0.0",
     "ami.js": ">=0.32.0",
     "axios": "^0.21.1",
+    "buffer": "^6.0.3",
     "core-js": "^3.18.0",
     "d3": "4.0.0",
     "d3-plugins-dist": "^3.2.0",
     "file-saver": "^2.0.2",
-    "font-awesome": "^4.7.0",
+    "@fortawesome/fontawesome-free": "^6.6.0",
     "griddle-react": "^1.13.1",
     "handlebars": "^4.0.5",
     "html-to-image": "^1.9.0",
@@ -88,6 +90,7 @@
     "pako": "^1.0.3",
     "pixi.js": "^4.2.3",
     "plotly.js": "^1.42.5",
+    "process": "^0.11.10",
     "prop-types": "latest",
     "react": "^17.0.0",
     "react-color": "^2.17.3",
@@ -96,7 +99,7 @@
     "react-dom": "^17.0.2",
     "react-dom-factories": "^1.0.2",
     "react-dropzone": "^8.0.3",
-    "react-fontawesome": "^1.6.1",
+    "react-fontawesome": "^1.7.1",
     "react-force-graph-2d": ">=1.23.8",
     "react-force-graph-3d": ">=1.21.10",
     "react-jsonschema-form": "^1.0.6",
@@ -116,7 +119,7 @@
     "string-similarity": "^4.0.1",
     "styled-components": "^4.3.2",
     "text": "^0.1.0",
-    "three": "^0.138.3",
+    "three": "^0.118.0",
     "three-render-objects": ">=1.13.3",
     "ts-loader": "^8.3.0",
     "typeahead.js": "^0.11.1",

diff --git a/geppetto-showcase/setup.sh b/geppetto-showcase/setup.sh
@@ -1,20 +1,12 @@
-yarn global add yalc
+#!/usr/bin/env bash
 
-cd ../
-app=$(pwd)
+# Trick to have folder relative to the script, not CWD
+PARENT_PATH=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+cd "${PARENT_PATH}"
 
-cd $app/geppetto.js/geppetto-core
-yarn && yarn build && yarn publish:yalc
+# Install the libraries (if not already installed)
+GEPPETTO_JS="../geppetto.js"
 
-cd $app/geppetto.js/geppetto-ui
-yarn && yarn build:src && yarn publish:yalc
+(bash "${GEPPETTO_JS}/dev-install.sh")
 
-cd $app/geppetto.js/geppetto-client
-yarn && yarn build && yarn publish:yalc
-
-cd $app/geppetto-showcase
-yalc add @metacell/geppetto-meta-client
-yalc add @metacell/geppetto-meta-core
-yalc add @metacell/geppetto-meta-ui
-
-yarn
+yarn install && yarn link:yalc
diff --git a/geppetto-showcase/src/examples/tree-viewer/TreeShowcase.js b/geppetto-showcase/src/examples/tree-viewer/TreeShowcase.js
@@ -24,7 +24,7 @@ export default class TreeShowcase extends Component {
       {
         title: 'San Diego, APRIL 25-26, 2009',
         subtitle:
-            '1.5 T General Electric (GE) Signa Excite. 8-channel, transmit-receive head coil',
+            '1.5 T General Electric (GE) Signa Excite. 8-channel, transmit-receive head coil',
         expanded: true,
         children: [
           {

diff --git a/geppetto-showcase/src/index.js b/geppetto-showcase/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import 'font-awesome/scss/font-awesome.scss';
+// import 'font-awesome/scss/font-awesome.scss';
 import '@metacell/geppetto-meta-client/style/css/gpt-icons.css';
 // import '@metacell/geppetto-meta-ui/flex-layout/showcase/styles/flexlayout.less';
 import './examples/flex-layout/flexlayout.less';

diff --git a/geppetto-showcase/src/pages/index.js b/geppetto-showcase/src/pages/index.js
@@ -17,14 +17,14 @@ const Menu = lazy(() => import(/* webpackChunkName: "menu" */'./navigation/menu'
 const TreeViewer = lazy(() => import(/* webpackChunkName: "treeviewer" */'./navigation/treeviewer'));
 const PythonConsole = lazy(() => import(/* webpackChunkName: "pythonconsole" */'./programmatic/pythonconsole'));
 const pages = [
-  
+
   {
     component: Canvas,
     parent: 'Data Viewers',
     name: '3D Canvas',
     to: '/dataviewers/canvas',
   },
-  
+
   {
     component: BigImgViewer,
     parent: 'Data Viewers',
@@ -73,14 +73,15 @@ const pages = [
     name: 'Stack Viewer',
     to: '/dataviewers/stackviewer',
   },
-  
+
   {
-    component: VRCanvas,
+    // component: VRCanvas,
+    component: null,
     parent: 'Data Viewers',
     name: 'VR Canvas',
     to: '/dataviewers/vrcanvas',
   },
-   
+
   {
     component: FlexLayout,
     parent: 'Navigation/Layout',

diff --git a/geppetto-showcase/watch-geppettojs-updates.sh b/geppetto-showcase/watch-geppettojs-updates.sh
@@ -0,0 +1,17 @@
+#!/usr/bin/env sh
+
+# Trick to have folder relative to the script, not CWD
+PARENT_PATH=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+cd "${PARENT_PATH}"
+
+function kill_subprocess(){
+    kill $(jobs -p -r)
+}
+
+GEPPETTO_JS="../geppetto.js"
+(cd "${GEPPETTO_JS}/geppetto-core" && yarn watch) &
+(cd "${GEPPETTO_JS}/geppetto-ui" && yarn watch) &
+(cd "${GEPPETTO_JS}/geppetto-client" && yarn watch) &
+
+trap kill_subprocess INT
+wait
diff --git a/geppetto-showcase/webpack.config.js b/geppetto-showcase/webpack.config.js
@@ -1,22 +1,31 @@
 const HtmlWebPackPlugin = require('html-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin')
+const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
+const webpack = require('webpack');
 const smp = new SpeedMeasurePlugin();
 
 module.exports = smp.wrap({
   entry: './src/index.js',
   mode: 'development',
   devtool: 'inline-source-map',
-  devServer: { historyApiFallback: true },
-  node: { fs: 'empty', },
+  devServer: { historyApiFallback: true, hot: true },
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: '[name].bundle.js',
     chunkFilename: '[name].chunk.js',
     publicPath: '/'
   },
-  resolve: { extensions: ['*', '.js', '.json', '.ts', '.tsx', '.jsx'], },
+  resolve: {
+    extensions: ['.*', '.js', '.json', '.ts', '.tsx', '.jsx'],
+    fallback: {
+      "fs": false,  // Disable 'fs', remove if not required
+      "path": require.resolve("path-browserify"),
+      "crypto": require.resolve("crypto-browserify"),
+      "process": require.resolve("process"),
+      "buffer": require.resolve("buffer"),
+    }
+  },
   module: {
     rules: [
       {
@@ -40,88 +49,77 @@ module.exports = smp.wrap({
         use: [{ loader: 'html-loader' }],
       },
       {
-        test: /\.svg/,
-        use: {
-          loader: 'svg-url-loader',
-          options: {},
-        },
+        test: /\.svg$/,
+        type: 'asset/resource', // Webpack 5 built-in asset handling
       },
       {
         test: /\.less$/,
         use: ['style-loader', 'css-loader', 'less-loader']
       },
       {
-        test: /\.s[a|c]ss$/,
-        use: [
-          { loader: 'style-loader' },
-          { loader: 'css-loader' },
-          { loader: 'sass-loader' },
-        ],
+        test: /\.s[ac]ss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
       },
       {
         test: /\.(png|gif|jpg|cur)$/i,
-        loader: 'url-loader',
-      },
-      {
-        test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
-        loader: 'url-loader',
-        options: { limit: 10000, mimetype: 'application/font-woff2' },
+        type: 'asset', // Webpack 5 built-in asset handling
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000 // 10kb limit for inlining images as Data URLs
+          }
+        }
       },
       {
-        test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
-        loader: 'url-loader',
-        options: { limit: 10000, mimetype: 'application/font-woff' },
+        test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/i,
+        type: 'asset/resource', // Webpack 5 built-in asset handling for fonts
       },
       {
-        test: /\.(ttf|eot|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
-        loader: 'file-loader',
+        test: /\.(ttf|eot|otf)$/,
+        type: 'asset/resource', // Webpack 5 built-in asset handling
       },
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
       },
       {
         test: /\.md$/,
-        use: [{ loader: 'html-loader' }, { loader: 'markdown-loader' }],
+        use: ['html-loader', 'markdown-loader'],
       },
       {
-        test: /\.dat$/i,
-        use: [
-          {
-            loader: 'raw-loader',
-            options: { esModule: false, },
-          },
-        ],
+        test: /\.dat$/,
+        type: 'asset/source', // Use Webpack's asset/source for raw data
       },
       {
-        test: /\.obj|\.drc|\.gltf/,
-        loader: 'url-loader',
+        test: /\.(obj|drc|gltf)$/,
+        type: 'asset/source',
       },
       {
         test: /\.mjs$/,
         include: /node_modules/,
-        type: "javascript/auto"
+        type: 'javascript/auto' // Handle ES modules with .mjs extension
       }
     ],
   },
   plugins: [
     new HtmlWebPackPlugin({
       template: './src/index.html',
       filename: './index.html',
-      favicon: 'node_modules/@metacell/geppetto-meta-client/style/favicon.png',
+      favicon: path.resolve(__dirname, 'node_modules/@metacell/geppetto-meta-client/style/favicon.png'),
+    }),
+    new CopyPlugin({
+      patterns: [
+        { from: path.resolve(__dirname, "./src/examples/3d-canvas/models"), to: "assets" },
+        { from: path.resolve(__dirname, "./src/examples/3d-canvas/assets"), to: "assets" },
+        { from: path.resolve(__dirname, "./src/examples/list-viewer/instances-small.js"), to: "instances-small.js" },
+        { from: path.resolve(__dirname, "./src/examples/connectivity-viewer/model.js"), to: "model.js" },
+        { from: path.resolve(__dirname, "./src/examples/plot/model.js"), to: "model.js" },
+        { from: path.resolve(__dirname, "./src/examples/menu/model.json"), to: "model.json" },
+        { from: path.resolve(__dirname, "./src/examples/vr-canvas/auditory_cortex.json"), to: "auditory_cortex.json" },
+      ],
+    }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
     }),
-    new CopyPlugin(
-      {
-        patterns: [
-          { from: path.resolve(__dirname, "./src/examples/3d-canvas/models"), to: "assets" },
-          { from: path.resolve(__dirname, "./src/examples/3d-canvas/assets"), to: "assets" },
-          { from: path.resolve(__dirname, "./src/examples/list-viewer/instances-small.js"), to: "instances-small.js" },
-          { from: path.resolve(__dirname, "./src/examples/connectivity-viewer/model.js"), to: "model.js" },
-          { from: path.resolve(__dirname, "./src/examples/plot/model.js"), to: "model.js" },
-          { from: path.resolve(__dirname, "./src/examples/menu/model.json"), to: "model.json" },
-          { from: path.resolve(__dirname, "./src/examples/vr-canvas/auditory_cortex.json"), to: "auditory_cortex.json" },
-        ]
-      },
-    ),
   ],
-});
+});