change size of hits in local phoenix event display

[davzuliani]

I have managed to create an event-display locally. Now, I would like to play with physics objects, particularly creating new classes to handle physics collection.

But first, I would like to play with already existing physics collections, particularly with hits. I'm loading a edm4hep.json event data file, using the import option, but I would like to change the size of the points. How to do so?

Also, let's say that I want to include some modification in the phoenix loader, how should I do to re-build the applications?

Apologies in advance for the naive questions and thanks for your help!

[EdwardMoyse]

Hi - I'm not sure I completely understand your question. What do you mean by you "created an event-display locally"? Did you check out phoenix and want to modify it? If so, maybe this guide will help: https://github.com/HSF/phoenix/blob/main/guides/developers/event-data-loader.md

If you have build a new angular app which uses phoenix, and you want to use a locally modified version of phoenix, then you can modify your package.json to point to the local version e.g.

    "phoenix-event-display": "../path/to/phoenix",

instead of the release version number.

[davzuliani]

I managed to create an Angular app using this guide: https://github.com/HSF/phoenix/blob/main/guides/developers/set-up-phoenix.md.

If I understood correctly, I'm simply checking out phoenix by doing npm install phoenix-event-display. So does this mean that I have to build a local modified version and point to that one?

[EdwardMoyse]

Yes, exactly. Check out phoenix, build it locally, then point your angular app to that phoenix app.

On Thu, 29 Aug 2024 at 15:01, davzuliani @.***> wrote:

I managed to create an Angular app using this guide: https://github.com/HSF/phoenix/blob/main/guides/developers/set-up-phoenix.md .

If I understood correctly, I'm simply checking out phoenix by doing npm install phoenix-event-display. So does this mean that I have to build a local modified version and point to that one?

— Reply to this email directly, view it on GitHub https://github.com/HSF/phoenix/issues/677#issuecomment-2317595666, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABTTQSJP632YX22TT755UZTZT4LSJAVCNFSM6AAAAABNKBSDNSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJXGU4TKNRWGY . You are receiving this because you commented.Message ID: @.***>

[davzuliani]

Ok, I might need a few details here (just to be sure that I' m doing things right).

1. I checked out out Phoenix
2. I changed the hits size in the edm4hep-json-loader.ts file and then I installed phoenix by doing

yarn install

3. Then, inside my app I changed package.json by putting

"phoenix-event-display": "/home/dav.zuliani/Desktop/software/phoenix/phoenix"

Here I have a question: does it have to point to phoenix folder, or to a specific folder/file? 4. I run my app by doing npm start

So far, I get some errors like

✘ [ERROR] TS2307: Cannot find module 'phoenix-event-display' or its corresponding type declarations. [plugin angular-compiler]

    src/app/main-display/main-display.component.ts:3:91:
      3 │ ...w, ClippingSetting, PhoenixMenuNode } from 'phoenix-event-display';
         ╵                                               ~~~~~~~~~~~~~~~~~~~~~~~

when launching the app.

[davzuliani]

A small update: I changed the path to point to (sounded more reasonable to me)

"phoenix-event-display": "/home/dav.zuliani/Desktop/software/phoenix/phoenix/packages/phoenix-event-display",

Now, when launching npm start is complaining about

Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
✘ [ERROR] Could not resolve "jszip"

    node_modules/phoenix-ui-components/dist/fesm2022/phoenix-ui-components.mjs:40:18:
      40 │ import JSZip from 'jszip';
         ╵                   ~~~~~~~

  You can mark the path "jszip" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.

[EdwardMoyse]

Hmm. Let me ping @9inpachi here - he is the expert.

[9inpachi]

Hey @davzuliani, have you built the local phoenix-event-display that you have? As you mentioned in your last comment, it indeed needs to be the full path to the workspace package of phoenix-event-display (/home/dav.zuliani/Desktop/software/phoenix/phoenix/packages/phoenix-event-display in your case).

You need to build Phoenix at that path as it doesn't automatically happen.

cd /home/dav.zuliani/Desktop/software/phoenix/phoenix/packages/phoenix-event-display
npm start
# or fully build the package but it won't support hot-reloading.
npm build

And once you have done that, you can start your Angular app and it should work. Make sure you do an npm install after updating the phoenix-event-display to use the local path to make sure that the lock file is updated to use the local version and not the one from node_modules.

[davzuliani]

Hi @9inpachi, and thanks for the explanation. So, this is what I did:

1. I rebuilt Phoenix in /home/dav.zuliani/Desktop/software/phoenix/phoenix/packages/phoenix-event-display by doing npm start (apparently npm build is not working)
2. I went to my angular app and changed the path in package.json

  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "phoenix-event-display": "/home/dav.zuliani/Desktop/software/phoenix/phoenix/packages/phoenix-event-display",
    "phoenix-ui-components": "^2.16.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },

3. I do npm install inside my angular app
4. I do npm start to launch the app

Unfortunately, I get the same error as before. Am I missing something?

[9inpachi]

@davzuliani I tried it on a brand new application and it's working perfectly fine. Make sure you are on the main branch and do yarn workspace phoenix-event-display tsc:build in the phoenix repo to properly build the phoenix-event-display package.

I generated the sample application with this guide we have: https://github.com/HSF/phoenix/blob/main/guides/developers/set-up-phoenix.md

If it still doesn't work for you, please share a reproducable example on codesandbox so I can test it.

[EdwardMoyse]

Cannot reproduce.