handle heavy ions

src/ThreeEditor/components/Select/ParticleSelect.tsx

@@ -1,27 +1,52 @@
+import { Box, Typography } from '@mui/material';
 import { SyntheticEvent } from 'react';
 
 import { Particle } from '../../../types/Particle';
 import { AutoCompleteSelect } from '../../../util/genericComponents/AutoCompleteSelect';
 
 export interface ParticleSelectProps {
-	onChange?: (event: SyntheticEvent<Element, Event>, newValue: number) => void;
+	onChange?: (event: SyntheticEvent<Element, Event>, newValue: string) => void;
 	particles: readonly Particle[];
-	value?: number;
+	value?: string;
 }
 
 export function ParticleSelect(props: ParticleSelectProps) {
 	const getOptionLabel = ({ id, name }: Particle) => {
-		return `[${id}] ${name}`;
+		return `${name}`;
+	};
+
+	// Custom render for dropdown options
+	const renderOption = (liProps: any, particle: Particle) => {
+		const isMostAbundant = particle.isMostAbundant || false;
+		// const abundanceText = particle.abundance ? ` (${particle.abundance.toFixed(2)}%)` : '';
+
+		return (
+			<Box
+				component='li'
+				{...liProps}>
+				<Typography
+					variant='body2'
+					sx={{
+						fontWeight: isMostAbundant ? 'bold' : 'normal',
+						width: '100%'
+					}}>
+					{particle.name}
+					{/* {abundanceText} */}
+					{isMostAbundant && ' ★'}
+				</Typography>
+			</Box>
+		);
 	};
 
 	return (
 		<AutoCompleteSelect
 			onChange={(event, newValue) => {
-				if (newValue !== null) props.onChange?.call(null, event, newValue.id);
+				if (newValue !== null) props.onChange?.call(null, event, newValue.name);
 			}}
-			value={props.particles.find(p => p.id === props.value)}
+			value={props.particles.find(p => p.name === props.value)}
 			options={props.particles}
 			getOptionLabel={option => getOptionLabel(option)}
+			renderOption={renderOption}
 		/>
 	);
 }

src/ThreeEditor/components/Sidebar/properties/category/BeamConfiguration.tsx

@@ -157,6 +157,8 @@ function BeamConfigurationFields(props: { editor: YaptideEditor; object: Beam })
 	const { object, editor } = props;
 	const { state: watchedObject } = useSmartWatchEditorState(editor, object, true);
 
+	// const elementOptions = HEAVY_ION_LIST.map(ion => ion.name);
+
 	// energyUnit should be held in react state so the change re-renders the component
 	// watchedObject.energyUnit is kept in sync in updateEnergyInputs()
 	const [energyUnit, setEnergyUnit] = useState<EnergyUnit>(watchedObject.energyUnit);
@@ -250,9 +252,9 @@ function BeamConfigurationFields(props: { editor: YaptideEditor; object: Beam })
 			<PropertyField label='Particle type'>
 				<ParticleSelect
 					particles={supportedParticles}
-					value={watchedObject.particleData.id}
+					value={watchedObject.particleData.name}
 					onChange={(_, v) => {
-						const newParticleData = supportedParticles.find(p => p.id === v);
+						const newParticleData = supportedParticles.find(p => p.name === v);
 
 						if (!newParticleData) {
 							return;
@@ -271,7 +273,7 @@ function BeamConfigurationFields(props: { editor: YaptideEditor; object: Beam })
 				/>
 			</PropertyField>
 
-			{watchedObject.particleData.id === 25 && (
+			{/* {watchedObject.particleData.id >= 25 && (
 				<>
 					<NumberPropertyField
 						label='charge (Z)'
@@ -283,7 +285,7 @@ function BeamConfigurationFields(props: { editor: YaptideEditor; object: Beam })
 						}
 					/>
 					<NumberPropertyField
-						label='nucleons (A)'
+						label='nucleons (A)' 
 						precision={0}
 						step={1}
 						value={watchedObject.particleData.a ?? 12}
@@ -292,6 +294,102 @@ function BeamConfigurationFields(props: { editor: YaptideEditor; object: Beam })
 						}
 					/>
 				</>
+			)} */}
+			{watchedObject.particleData.id >= 25 && ( // select-lists should be moved to select directory
+				<>
+					{/* <PropertyField label="Element">
+					<ParticleSelect
+						particles={HEAVY_ION_LIST}
+						value={watchedObject.particleData.z ?? 6} 
+						onChange={(_, newZ) => {
+							const ion = HEAVY_ION_LIST.find(i => i.z === newZ);
+							if (ion) {
+								setValueCommand({ 
+									...watchedObject.particleData, 
+									a: ion.a, 
+									z: ion.z 
+								}, 'particleData');
+							}
+						}}
+					/>
+				</PropertyField> */}
+
+					{/* <SelectPropertyField
+						label='Element'
+						value={watchedObject.particleData.name}
+						options={elementOptions}
+						onChange={newName => {
+							const ion = HEAVY_ION_LIST.find(i => i.name === newName);
+
+							if (ion) {
+								setValueCommand(
+									{
+										...watchedObject.particleData,
+										id: 25,
+										name: ion.name,
+										a: ion.a,
+										z: ion.z
+									},
+									'particleData'
+								);
+							}
+						}}
+					/>
+
+					<SelectPropertyField
+						label='Isotope'
+						value={watchedObject.particleData.name + '-' + watchedObject.particleData.a}
+						options={
+							ISOTOPES[watchedObject.particleData.name]?.map(
+								iso => watchedObject.particleData.name + '-' + iso.a.toString()
+							) || []
+						}
+						onChange={newA => {
+							const ion = ISOTOPES[watchedObject.particleData.name];
+
+							if (ion) {
+								setValueCommand(
+									{
+										...watchedObject.particleData,
+										a: newA
+									},
+									'particleData'
+								);
+							}
+						}}
+					/> */}
+					{/* <PropertyField>
+						<label>
+							<span style={{ marginLeft: '128px' }}>
+								Z = {watchedObject.particleData.z}
+							</span>
+							<span style={{ marginLeft: '32px' }}>
+								A = {watchedObject.particleData.a}
+							</span>
+						</label>
+					</PropertyField> */}
+
+					<PropertyField label='A'>
+						<div
+							style={{
+								padding: '8px',
+								color: 'gray',
+								borderBottom: '1px solid #444'
+							}}>
+							{watchedObject.particleData.a}
+						</div>
+					</PropertyField>
+					<PropertyField label='Z'>
+						<div
+							style={{
+								padding: '8px',
+								color: 'gray',
+								borderBottom: '1px solid #444'
+							}}>
+							{watchedObject.particleData.z}
+						</div>
+					</PropertyField>
+				</>
 			)}
 
 			<NumberPropertyField

src/ThreeEditor/components/Sidebar/properties/category/GeantScoringFilterConfiguration.tsx

@@ -66,8 +66,7 @@ export function GeantScoringFilterConfiguration(props: {
 								value={watchedObject.data?.particleTypes ?? []}
 								renderValue={(particleTypes, _) =>
 									particleTypes.map(t => (
-										<Typography
-											sx={{ px: '2px' }}>{`[${t.id}] ${t.name}`}</Typography>
+										<Typography sx={{ px: '2px' }}>{`${t.name}`}</Typography>
 									))
 								}
 								getOptionLabel={t => `[${t.id}] ${t.name}`}

src/ThreeEditor/components/Sidebar/properties/category/ParticleFilterConfiguration.tsx

@@ -31,13 +31,13 @@ export function ParticleFilterConfiguration(props: { editor: YaptideEditor; obje
 					<ParticleSelect
 						// Ignore the Heavy ions type
 						particles={COMMON_PARTICLE_TYPES.filter(p => p.id !== 25)}
-						value={watchedObject.particleData.id}
+						value={watchedObject.particleData.name}
 						onChange={(_, v) =>
 							setValueCommand(
 								{
 									...watchedObject.particleData,
 									id: v,
-									name: COMMON_PARTICLE_TYPES.find(p => p.id === v)?.name
+									name: COMMON_PARTICLE_TYPES.find(p => p.name === v)?.name
 								},
 								'particleData'
 							)