feature show the complete/full Chart of the Nuclides

[Luisav1]

The BaN simulation builds up on the concept of nuclides and the decay they undergo throughout screen 1 and 2. Screen 2 is where the Chart of the Nuclides is introduced and the goal is to eventually show a complete version of the Chart of the Nuclides on Screen 3. A version of this chart already exists here. My supervisor Jason and another student built this chart using the Three.js library.

We wanted to see what our options are on creating this third screen on BaN or if it is even possible. So far we thought of the following options:

1. Don't build a third screen and just add an info. button that links to the existing chart. This is the easiest option.
2. Embed the existing chart to a third screen in BaN, such as maybe using an iframe, since the code for it is already there. We'd need to change the color and a few other things on the existing chart to more seamlessly blend in with the other screens and so that it follows PhET design standards.
3. Turn the existing code on the chart into scenery code. This option seems like it'd require the most effort.
4. Rebuild the complete chart from scratch.

Licensing is not an issue here since we are closely working with Jason and we'd like to see BaN show the complete chart, through these options or any other options too.

@jonathanolson When you have some time, your input here would be nice on how feasible some of this options are or if you have any other ideas on having a screen that features the complete chart. Thanks!

[marlitas]

I brought this to dev meeting today, and there weren't many concerns about dropping the code into the third screen (we've worked with Three.js code in Molecule Shapes), there were bigger concerns about creating external dependencies through links, as well as compatibility with the PhET ecosystem in general ( accessibility, dynamic languages, PhET-iO), as well as how we would handle any bugs that may come up through QA testing.

Here is the conversation:

• We would like to embed a Three.js example in a screen.
• JB: We have done this before in molecule-shapes.
• SR: We have used three.js but not embedding a 3rd party web app
• MK: We should consider offline use and making a dependency on an outside source.
• MS: It may be possible to bundle the code into the sim instead of hosting an iframe.
• JB: Generally we have a policy that everything is standalone. That is partly a requirement for our apps.
• JG: If translation, accessibility for phet-io is a requirement, Three.js may not support those things.
• JB: Should consider licensing as well.
• SR: We need written permission to use any of this code. It is not an open source project.
• MK: It seems very possible that we can embed this thing offline from a quick test.

Overall the consensus was that if we want to embed it it's very possible, but there's a lot of questions that come up with that decision. The possibility of porting was also discussed, however the recommendation was to only port 2D functionality. Porting the 3D functionality would probably be too big of a lift for this.

[marlitas]

I'm going to un-assign @jonathanolson for now, since there were a lot of answers and questions that came up from dev meeting that should be discussed with @ariel-phet and @Luisav1 first, before bringing in JO.

[zepumph]

I just wanted to experiment lightly with what it would look like to use an iframe to "host" the third screen without building it with our code. My guess is that we could detect offline and swap things out for a "go to this link for a cool app" sort of message.

It is rough, but it was working without the fullscreen style. Not sure if we should pursue it more.

```diff Subject: [PATCH] add a console log, https://github.com/phetsims/phet-io/issues/1944 --- Index: js/build-a-nucleus-main.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/build-a-nucleus-main.ts b/js/build-a-nucleus-main.ts --- a/js/build-a-nucleus-main.ts (revision 7342a7f88a8a4183e364a0c1dbbfa02c432428e1) +++ b/js/build-a-nucleus-main.ts (date 1687887509599) @@ -14,6 +14,15 @@ import BANQueryParameters from './common/BANQueryParameters.js'; import AtomIdentifier from '../../shred/js/AtomIdentifier.js'; import BANConstants from './common/BANConstants.js'; +import ScreenView from '../../joist/js/ScreenView.js'; +import Screen from '../../joist/js/Screen.js'; +import { Color, DOM, FlowBox } from '../../scenery/js/imports.js'; +import Property from '../../axon/js/Property.js'; +import IconFactory from './decay/view/IconFactory.js'; +import DecayType from './common/view/DecayType.js'; +import ScreenIcon from '../../joist/js/ScreenIcon.js'; +import Tandem from '../../tandem/js/Tandem.js'; +import Bounds2 from '../../dot/js/Bounds2.js'; const buildANucleusTitleStringProperty = BuildANucleusStrings[ 'build-a-nucleus' ].titleStringProperty; @@ -50,9 +59,55 @@ BANQueryParameters.neutrons = BANConstants.DEFAULT_INITIAL_NEUTRON_COUNT; } + class ExternalScreenView extends ScreenView { + + public constructor() { + super( {} ); + const ifram = document.createElement( 'iframe' ); + ifram.src = 'https://energyeducation.ca/simulations/nuclear/nuclidechart.html'; + ifram.style.width = '100%'; + ifram.style.height = '100%'; + const y = new DOM( ifram, { + // preventTransform: true + } ); + this.myIframe = y; + // this.myIframe.width = this.layoutBounds.width; + // this.myIframe.height = this.layoutBounds.height; + this.addChild( y ); + } + + public override layout( viewBounds: Bounds2, options ): void { + super.layout( viewBounds, options ); + // this.myIframe.width = this.layoutBounds.width; + // this.myIframe.height = this.layoutBounds.height; + } + } + + class X extends Screen { + public constructor() { + + + const iconNode = new FlowBox( { children: [ IconFactory.createDecayIcon( DecayType.BETA_PLUS_DECAY )! ], margin: 3 } ); + + super( + () => { {return {};}}, + () => new ExternalScreenView(), { + name: new Property( 'External thing' ), + tandem: Tandem.OPT_OUT, + backgroundColorProperty: new Property( Color.BLACK ), + homeScreenIcon: new ScreenIcon( iconNode, { + maxIconWidthProportion: 1, + maxIconHeightProportion: 1 + } ) + } + ); + } + } + const sim = new Sim( buildANucleusTitleStringProperty, [ new DecayScreen(), - new ChartIntroScreen() + new ChartIntroScreen(), + new X() ], simOptions ); sim.start(); } ); \ No newline at end of file

[zepumph]

From design meeting today, from a partnership/licensing reasons, we don't want to load the link in an iframe. Instead we should include the link in an info dialog on screen 2.

1. Add button only on the partial chart (not zoomed in), to the right and slightly above the x axis
2. Add a dialog titled, "Full Nuclide Chart"
3. Test is something like "A full, interactive chart of the nuclides and their decays is available from Energy Education Project at University of Calgary, see https://energyeducation.ca/simulations/nuclear/nuclidechart.html". (Clear the language with Jason).
4. Support ?allowLinks query parameter. (just text not a link)
5. Can we have a screenshot of the chart to add to the dialog? This would need to include a caption for the image license (needs to be creative commons/public domain).

@Luisav1 can you please work on the screenshot portion of this. I think either of us could work on the dialog/button portion.

[Luisav1]

From design meeting 7/21 we decided to place the button beside the 'Magic Numbers' checkbox to the right of it or below it, if there's space.

[zepumph]

@Luisav1 to confirm the image license, @zepumph to review the code, and us to confirm that we like it in next design meeting.

[zepumph]

Questions from the review:

• [ ] ~Do we want to make a phet redirect to the chart, in case the external link changes? phet.colorado.edu/links/full-nuclide-chart. Right now it is hard coded to https://energyeducation.ca/simulations/nuclear/nuclidechart.html in the sim directly.~
• [x] "full chart here" doesn't seem like what we want hyperlinked. Perhaps just "here" would be more typical? No strong preference.
• [x] I think it would be straightforward to pull the dialog logic into its own class, perhaps called FullChartDialog. The ChartIntroScreenView is >400 lines, so I feel like any way to pull modularity out of a file that size is a win.

• Add a dialog titled, "Full Nuclide Chart"

• [x] This was not done.
• [x] Should a title be added to the AvailableDecays dialog - in Design meeting 7/27 decided not to
• [x] The max value for a color component is 255, please change this: https://github.com/phetsims/build-a-nucleus/blob/22ad309ced2a8d130af44edf4535c959f8b73d50/js/common/BANColors.ts#L156

@Luisav1 and I talked yesterday and she came up with:

• [x] what license should the image be? ask Jason

[zepumph]

• [x] Instead of the i info button to open the dialog. Let's make a button called "Full Chart", styled like the tweaker buttons for adding nuclides.

[zepumph]

• [x] We also liked increasing the lineWrap for both this and the available decays info dialog to something a bit wider. Almost 600 but we are trying to get the english sentence on just 2 lines.
• [x] Get rid of "here" in the link text.