Merge branch 'main' of github.com:HSF/phoenix into sponce_zipGLTF

HSF · Sep 3, 2024 · 6f0e98c · 6f0e98c
2 parents c181ca8 + 79ef025
commit 6f0e98c
Show file tree

Hide file tree

Showing 99 changed files with 4,666 additions and 2,030 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+npm run test:ci
 
 yarn lint-staged
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -1,15 +1,15 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "pwa-chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:4200",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "firefox",
+      "request": "launch",
+      "name": "Launch FF against localhost",
+      "url": "http://localhost:4200",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}
diff --git a/guides/developers/set-up-phoenix.md b/guides/developers/set-up-phoenix.md
@@ -10,6 +10,10 @@
 * [Setting up the event display](#setting-up-the-event-display)
   * [Create an experiment component](#create-an-experiment-component)
   * [Set up the route](#set-up-the-route)
+* [Resolving problems](#resolving-problems)
+  * [Angular version](#angular-version) 
+  * [npm error gyp ERR](#npm-error-gyp-ERR)
+  * [ng build errors](#ng-build-errors)
 
 ## Introduction
 
@@ -33,13 +37,13 @@ npm install -g @angular/cli
 Now, using the Angular CLI, create a new Angular app.
 
 ```sh
-ng new my-app --style scss --routing true
+ng new event-display-app --style scss --routing true --interactive false
 ```
 
 Make sure the newly created app works.
 
 ```sh
-cd my-app
+cd event-display-app
 ng serve --open
 ```
 
@@ -51,30 +55,10 @@ Now that you have an app set up. Install the `phoenix-ui-components` package to
 npm install phoenix-ui-components
 ```
 
-#### Import `PhoenixUIModule`
-
-After installing the package, open the `src/app/app.module.ts` file in your app and add `BrowserAnimationsModule` and `PhoenixUIModule` in your module imports.
-
-```ts
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { PhoenixUIModule } from 'phoenix-ui-components';
-
-@NgModule({
-  ...
-  imports: [
-    ...
-    BrowserAnimationsModule,
-    PhoenixUIModule,
-    ...
-  ],
-  ...
-})
-export class AppModule { }
-```
 
 #### Import required styles
 
-Since some Phoenix components use Bootstrap, you will need to add the the Bootstrap stylesheet in the `src/index.html` file of your app.
+Add the the Bootstrap stylesheet to the `src/index.html` file of your app.
 
 ```html
 <head>
@@ -84,17 +68,18 @@ Since some Phoenix components use Bootstrap, you will need to add the the Bootst
 </head>
 ```
 
-After this, go to the `src/styles.scss` file of your app and import the global Phoenix styles.
+#### Add Phoenix Theming
+
+
+Go to the `src/styles.scss` file of your app and import the global Phoenix styles.
 
 ```scss
 @import 'phoenix-ui-components/theming';
-
-...
 ```
 
 #### Set up assets
 
-And lastly, download [these assets](https://github.com/HSF/phoenix/tree/main/packages/phoenix-ng/projects/phoenix-ui-components/lib/assets) (icons and images used by the Phoenix UI components) and put them in the `src/assets` directory of your app.
+Download [these assets](https://github.com/HSF/phoenix/tree/main/packages/phoenix-ng/projects/phoenix-ui-components/lib/assets) (icons and images used by the Phoenix UI components) and put them in the `src/assets` directory of your app.
 
 With this, the app is ready and we can move onto setting up the event display in this app.
 
@@ -112,12 +97,12 @@ The next step would be to create an Angular component so that we can use the eve
 For this, navigate to the `src/app` directory of your app in the terminal and use the Angular CLI to generate a component.
 
 ```sh
-ng generate component test-experiment
+ng generate component main-display
 ```
 
-This will create a `test-experiment` folder with the component source files.
+This will create a `main-display` folder with the component source files.
 
-Now, open the `test-experiment.component.html` file and use the Phoenix UI components to set up the UI.
+Now, open the `main-display.component.html` file and use the Phoenix UI components to set up the UI.
 
 ```html
 <app-nav></app-nav>
@@ -129,7 +114,7 @@ Now, open the `test-experiment.component.html` file and use the Phoenix UI compo
 <div id="eventDisplay"></div>
 ```
 
-The `[rootNode]="phoenixMenuRoot"` specified here for the Phoenix menu will be a defined in `test-experiment.component.ts`.
+The `[rootNode]="phoenixMenuRoot"` specified here for the Phoenix menu will be a defined in `main-display.component.ts`.
 
 One can easily customize the app-ui-menu. There are 2 main ways :
   - just adding buttons at the end of it by inserting the corresponding components with the `app-ui-menu` declaration :
@@ -148,19 +133,23 @@ One can easily customize the app-ui-menu. There are 2 main ways :
   ```
   This defines a very restricted menu with only the event selector and the event cycling button
 
-Finally, open the `test-experiment.component.ts` file and initialize the Phoenix event display using the intermediate Angular `EventDisplayService`.
+Finally, open the `main-display.component.ts` file and initialize the Phoenix event display using the intermediate Angular `EventDisplayService`.
 
 ```ts
 import { Component, OnInit } from '@angular/core';
-import { EventDisplayService } from 'phoenix-ui-components';
+import {EventDisplayService, PhoenixUIModule} from 'phoenix-ui-components';
 import { Configuration, PhoenixLoader, PresetView, ClippingSetting, PhoenixMenuNode } from 'phoenix-event-display';
 
 @Component({
-  selector: 'app-test-experiment',
-  templateUrl: './test-experiment.component.html',
-  styleUrls: ['./test-experiment.component.scss']
+  selector: 'app-main-display',
+  standalone: true,
+  imports: [
+    PhoenixUIModule
+  ],
+  templateUrl: './main-display.component.html',
+  styleUrl: './main-display.component.scss'
 })
-export class TestExperimentComponent implements OnInit {
+export class MainDisplayComponent implements OnInit {
 
   /** The root Phoenix menu node. */
   phoenixMenuRoot = new PhoenixMenuNode("Phoenix Menu");
@@ -195,11 +184,16 @@ export class TestExperimentComponent implements OnInit {
     // Load detector geometry (assuming the file exists in the `src/assets` directory of the app)
     this.eventDisplay.loadGLTFGeometry('assets/detector.gltf', 'Detector');
   }
-
 }
 ```
 
-### Set up the route
+(!) It is assumed that you use your data and detector geometry instead of links provided in 
+`eventFile` and `loadGLTFGeometry` above. For testing purposes, you may take geometry and events at: 
+
+- [geometry examples](https://github.com/HSF/phoenix/tree/main/packages/phoenix-ng/projects/phoenix-app/src/assets/geometry)
+- [event examples](https://github.com/HSF/phoenix/tree/main/packages/phoenix-ng/projects/phoenix-app/src/assets/files)
+
+### Set up the router
 
 Once the experiment component is created, you will need to set up a route so it can be served through a URL.
 
@@ -210,23 +204,57 @@ Go to `src/app/app.component.html` and replace all content with this code:
 <router-outlet></router-outlet>
 ```
 
-Now, navigate to `src/app/app.module.ts` and add the routing for the experiment component we created.
+Now, navigate to `src/app/app.routes.ts` and add the routing for the experiment component we created.
 
 ```ts
-import { RouterModule } from '@angular/router';
-import { TestExperimentComponent } from './test-component/test-experiment.component';
+import { Routes } from '@angular/router';
+import {MainDisplayComponent} from "./main-display/main-display.component";
 
-@NgModule({
-  ...
-  imports: [
-    ...
-    RouterModule.forRoot([{ path: '', component: TestExperimentComponent }])
-  ],
-  ...
-})
-export class AppModule { }
+export const routes: Routes = [
+  { path: '', component: MainDisplayComponent }
+];
 ```
 
 This will serve the experiment component through the base URL `/` of the server.
 
 Finally, you can start the app with `npm start` and navigate to `http://localhost:4200` where you will see the experiment component in action.
+
+
+## Resolving problems
+
+### Angular version
+
+Phoenix event display may delay the updates of the Angular framework. Your
+application should have the same version of Angular as `phoenix-ui-components` package
+
+You may check "dependencies" section of 
+[phoenix-ui-components package.json here](https://github.com/HSF/phoenix/blob/main/packages/phoenix-ng/package.json)
+then copy the correct version to your package.json and run `npm install`. 
+
+
+### npm error gyp ERR
+
+What is happening? 
+One of the javascript dependencies may try to build some C++ code on your machine.
+For this it uses node-gyp, which in turn, uses your machine compiler and installed
+libraries. This may cause some errors. 
+
+1. On Windows, you may experience `npm error gyp ERR` 
+   while trying to run ` npm install phoenix-ui-components`. In general, you need
+   to install and make available modern python version and MS C++ redistributable.   
+   The later might be installed standalone or as a bundle of VS Community edition. 
+   [More in this SO answer](https://stackoverflow.com/questions/57879150/how-can-i-solve-error-gypgyp-errerr-find-vsfind-vs-msvs-version-not-set-from)
+
+2. On linux machines you may need libgl and gcc building tools to be installed. E.g. on ubuntu:
+   ```bash
+   sudo apt-get install -y build-essential libgl1-mesa-dev
+   ```
+
+### ng build errors
+
+The provided setup should work while one runs `ng serve` or its alias `npm start`. 
+There is another common command `ng build` or `npm run build` same as `npm run watch`. 
+The later commands my not run falling with multiple errors around `require("...")`.
+One of the options of fixing it is using custom webpack builder configuration in 
+angular.json file. You may look [here as an example](https://github.com/eic/firebird/blob/main/firebird-ng/angular.json)
+and adjust it for your project
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "packages/phoenix-ng/projects/*"
   ],
   "scripts": {
-    "postinstall": "yarn workspace phoenix-event-display prepare && husky install",
+    "postinstall": "yarn workspace phoenix-event-display prepare && husky",
     "start": "lerna run start",
     "start:ssl": "yarn workspace phoenix-ng start:ssl",
     "test:ci": "lerna run test:ci",
@@ -24,21 +24,21 @@
   },
   "devDependencies": {
     "@types/jest": "~29.5.12",
-    "@types/node": "^20.11.30",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
+    "@types/node": "^20.14.2",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "husky": "^9.0.11",
+    "eslint-plugin-prettier": "^5.2.1",
+    "husky": "^9.1.3",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "~29.7.0",
-    "lerna": "^8.1.2",
-    "lint-staged": "^15.2.2",
-    "prettier": "^3.2.5",
-    "rimraf": "^5.0.5",
+    "lerna": "^8.1.7",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.3",
+    "rimraf": "^5.0.9",
     "ts-jest-mock-import-meta": "^1.2.0",
-    "typescript": "~5.4.3"
+    "typescript": "~5.4.5"
   },
   "packageManager": "yarn@3.3.1",
   "peerDependencies": {

diff --git a/packages/phoenix-event-display/configs/jest.conf.js b/packages/phoenix-event-display/configs/jest.conf.js
@@ -5,6 +5,9 @@ module.exports = {
   rootDir: '../',
   roots: ['<rootDir>/src/tests'],
   preset: 'ts-jest/presets/js-with-ts-legacy',
+  moduleNameMapper: {
+    '^(\\.\\.?\\/.+)\\.js$': '$1',
+  },
   transform: {
     '^.+\\.m?[tj]s$': [
       'ts-jest',
@@ -32,4 +35,5 @@ module.exports = {
   verbose: true,
   collectCoverageFrom: ['<rootDir>/src/**/*.ts'],
   clearMocks: true,
+  extensionsToTreatAsEsm: ['.ts'],
 };
diff --git a/packages/phoenix-event-display/package.json b/packages/phoenix-event-display/package.json
@@ -38,26 +38,26 @@
     "eslint:fix": "yarn eslint --fix"
   },
   "dependencies": {
-    "@babel/core": "^7.24.3",
-    "@tweenjs/tween.js": "^23.1.1",
+    "@babel/core": "^7.24.7",
+    "@tweenjs/tween.js": "^23.1.2",
     "dat.gui": "^0.7.9",
     "html2canvas": "^1.4.1",
-    "jsroot": "^7.5.5",
+    "jsroot": "^7.7.2",
     "jszip": "^3.10.1",
     "stats-js": "^1.0.1",
-    "three": "^0.165.0"
+    "three": "^0.167.0"
   },
   "devDependencies": {
-    "@babel/helper-string-parser": "^7.24.1",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@compodoc/compodoc": "^1.1.23",
-    "@types/dat.gui": "^0.7.12",
-    "@types/three": "^0.165.0",
-    "esbuild-loader": "^4.1.0",
+    "@babel/helper-string-parser": "^7.24.7",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@compodoc/compodoc": "^1.1.25",
+    "@types/dat.gui": "^0.7.13",
+    "@types/three": "^0.167.1",
+    "esbuild-loader": "^4.2.2",
     "jest": "^29.7.0",
-    "ts-jest": "~29.1.2",
-    "typescript": "~5.4.3",
-    "webpack": "^5.91.0",
+    "ts-jest": "~29.2.3",
+    "typescript": "~5.4.5",
+    "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4"
   },
   "peerDependencies": {