PunnettSquare

PunnettSquare crosses two parents, genotypes of one to three genes written as pairs of a letter with the dominant allele in upper case ("Pp", "YyRr"). Both parents must have the same genes; otherwise nothing is drawn.

• Square: the first parent’s gametes run across the top and the second’s down the side, each in a circle. Every cell shows its genotype, dominant allele first, and is coloured by its phenotype from phenotype_colors. The colours are spread over the list, so with one gene the recessive phenotype takes the last colour. Text shrinks to fit the cells.
• Ratios: below the square, the genotype and phenotype ratios count up from zero as the cells fill. Phenotypes are named from traits, one (dominant, recessive) pair per gene, or written as P_ and pp without them. Each name takes its phenotype’s colour.
• Motion: from delay the square appears, the gametes split off each parent over 0.5..1.7 s, and from 1.8 s the cells fill row by row over fill_time seconds. The gamete circles of the filling cell light up.

Punnett::cross gives the same cross as data, and gametes the gametes of one genotype.

Gallery scenes: PunnettSquare (Pp × Pp, purple and white flowers) and DihybridCross (YyRr × YyRr, yellow or green and round or wrinkled seeds).

PunnettSquare 6.5 sPlayUnmuteCopy render command

DihybridCross 6.5 sPlayUnmuteCopy render command

use fframes_kit::kits::biology::{Punnett, gametes};
use fframes_kit::prelude::*;

assert_eq!(gametes("AaBb").unwrap(), ["AB", "Ab", "aB", "ab"]);
let test_cross = Punnett::cross("Pp", "pp").unwrap();
assert_eq!(test_cross.genotype_ratio(), [("Pp".to_owned(), 2), ("pp".to_owned(), 2)]);

fn seeds<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
    ui.show(PunnettSquare {
        parents: ("YyRr".into(), "YyRr".into()),
        traits: vec![("yellow".into(), "green".into()), ("round".into(), "wrinkled".into())],
        ..ui.defaults()
    })
}

API

Components are plain structs. Set the fields you need and fill the rest with ..ui.defaults(): the defaults below come from the current theme (theme. values are fields of Theme).

PunnettSquare

Field	Type	Default	Description
delay	f32	0.0	Seconds after the container’s start before the square appears.
center	(f64, f64)	(0.0, 0.0)	The middle of the square, in units of ui.space.
scale	f64	1.0	Size factor on the figure; 1.0 is its normal size.
parents	(String, String)	("Pp".into(), "Pp".into())	Genotypes of the first and second parent, e.g. ("Pp", "Pp") or ("YyRr", "YyRr"); the first runs across the top.
traits	Vec<(String, String)>	vec![("purple".into(), "white".into())]	One (dominant, recessive) pair of phenotype names per gene; empty writes P_ and pp instead.
fill_time	f32	2.4	Seconds the cells take to fill in, row by row.
ratios	bool	true	Counts up the genotype and phenotype ratios under the square when true.
phenotype_colors	Vec<Color>	—	Cell colour by phenotype, dominant first; a phenotype past the end uses muted_color.
grid_color	Color	theme.colors.muted	Colour of the square’s grid lines and gamete circle outlines.
gamete_color	Color	theme.colors.surface	Fill of the gamete circles.
highlight_color	Color	theme.colors.accent	Colour the outline of a cell flashes as it fills.
cell_style	TextStyle	cell_style	The font of the genotypes in the cells: family, size in pixels and weight.
parent_style	TextStyle	theme.typography.body	The font of the parent genotypes and gametes: family, size in pixels and weight.
ratio_style	TextStyle	theme.typography.caption	The font of the ratio lines below the square: family, size in pixels and weight.
text_color	Color	theme.colors.text	Colour of the genotypes and ratio text.
muted_color	Color	theme.colors.muted	Colour of the secondary text and of phenotypes without a colour in phenotype_colors.
enter	Option<FadeIn>	None	Fade in at the start; None for none.
exit	Option<FadeOut>	None	Fade out before the end; None for none.

Feature biology · Source