Toggle showing sex (#141)

Fixes #138

src/app.tsx

@@ -32,6 +32,7 @@ import {
   configToArgs,
   DEFALUT_CONFIG,
   Ids,
+  Sex,
 } from './config';
 import {
   getSelection,
@@ -219,14 +220,16 @@ export function App() {
     }
   }
 
-  function toggleIds(config: Config, data: TopolaData | undefined) {
+  function toggleDetails(config: Config, data: TopolaData | undefined) {
     if (data === undefined) {
       return;
     }
     let shouldHideIds = config.id === Ids.HIDE;
+    let shouldHideSex = config.sex === Sex.HIDE;
     let indiMap = idToIndiMap(data.chartData);
     indiMap.forEach((indi) => {
       indi.hideId = shouldHideIds;
+      indi.hideSex = shouldHideSex;
     });
   }
 
@@ -338,7 +341,7 @@ export function App() {
           const data = await loadData(args.sourceSpec, args.selection);
           // Set state with data.
           setData(data);
-          toggleIds(args.config, data);
+          toggleDetails(args.config, data);
           setShowSidePanel(args.showSidePanel);
           setState(AppState.SHOWING_CHART);
         } catch (error: any) {
@@ -482,7 +485,7 @@ export function App() {
                 config={config}
                 onChange={(config) => {
                   setConfig(config);
-                  toggleIds(config, data);
+                  toggleDetails(config, data);
                   updateUrl(configToArgs(config));
                 }}
               />
@@ -507,6 +510,7 @@ export function App() {
               freezeAnimation={freezeAnimation}
               colors={config.color}
               hideIds={config.id}
+              hideSex={config.sex}
             />
             {showSidePanel ? (
               <Media greaterThanOrEqual="large" className="sidePanel">

src/chart.tsx

@@ -1,4 +1,4 @@
-import {ChartColors, Ids} from './config';
+import {ChartColors, Ids, Sex} from './config';
 import {interpolateNumber} from 'd3-interpolate';
 import {IntlShape, useIntl} from 'react-intl';
 import {max, min} from 'd3-array';
@@ -258,6 +258,7 @@ export interface ChartProps {
   freezeAnimation?: boolean;
   colors?: ChartColors;
   hideIds?: Ids;
+  hideSex?: Sex;
 }
 
 class ChartWrapper {
@@ -420,7 +421,8 @@ export function Chart(props: ChartProps) {
       const initialRender =
         props.chartType !== prevProps?.chartType ||
         props.colors !== prevProps?.colors ||
-        props.hideIds !== prevProps?.hideIds;
+        props.hideIds !== prevProps?.hideIds ||
+        props.hideSex !== prevProps?.hideSex;
       const resetPosition =
         props.chartType !== prevProps?.chartType ||
         props.data !== prevProps.data ||

src/config.tsx

@@ -13,14 +13,21 @@ export enum Ids {
   SHOW,
 }
 
+export enum Sex {
+  HIDE,
+  SHOW,
+}
+
 export interface Config {
   color: ChartColors;
   id: Ids;
+  sex: Sex;
 }
 
 export const DEFALUT_CONFIG: Config = {
   color: ChartColors.COLOR_BY_GENERATION,
   id: Ids.SHOW,
+  sex: Sex.SHOW,
 };
 
 const COLOR_ARG = new Map<string, ChartColors>([
@@ -38,6 +45,13 @@ const ID_ARG = new Map<string, Ids>([
 const ID_ARG_INVERSE = new Map<Ids, string>();
 ID_ARG.forEach((v, k) => ID_ARG_INVERSE.set(v, k));
 
+const SEX_ARG = new Map<string, Sex>([
+  ['h', Sex.HIDE],
+  ['s', Sex.SHOW],
+]);
+const SEX_ARG_INVERSE = new Map<Sex, string>();
+SEX_ARG.forEach((v, k) => SEX_ARG_INVERSE.set(v, k));
+
 export function argsToConfig(args: ParsedQuery<any>): Config {
   const getParam = (name: string) => {
     const value = args[name];
@@ -47,6 +61,7 @@ export function argsToConfig(args: ParsedQuery<any>): Config {
   return {
     color: COLOR_ARG.get(getParam('c') ?? '') ?? DEFALUT_CONFIG.color,
     id: ID_ARG.get(getParam('i') ?? '') ?? DEFALUT_CONFIG.id,
+    sex: SEX_ARG.get(getParam('s') ?? '') ?? DEFALUT_CONFIG.sex,
   };
 }
 
@@ -54,6 +69,7 @@ export function configToArgs(config: Config): ParsedQuery<any> {
   return {
     c: COLOR_ARG_INVERSE.get(config.color),
     i: ID_ARG_INVERSE.get(config.id),
+    s: SEX_ARG_INVERSE.get(config.sex),
   };
 }
 
@@ -168,6 +184,49 @@ export function ConfigPanel(props: {
             </Form.Field>
           </Item.Content>
         </Item>
+        <Item>
+        <Item.Content>
+            <Header sub>
+              <FormattedMessage id="config.sex" defaultMessage="Sex" />
+            </Header>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.sex.HIDE"
+                    defaultMessage="hide"
+                  />
+                }
+                name="checkboxRadioGroup"
+                value="hide"
+                checked={props.config.sex === Sex.HIDE}
+                onClick={() =>
+                  props.onChange({...props.config, sex: Sex.HIDE})
+                }
+              />
+            </Form.Field>
+            <Form.Field className="no-margin">
+              <Checkbox
+                radio
+                label={
+                  <FormattedMessage
+                    tagName="label"
+                    id="config.sex.SHOW"
+                    defaultMessage="show"
+                  />
+                }
+                name="checkboxRadioGroup"
+                value="show"
+                checked={props.config.sex === Sex.SHOW}
+                onClick={() =>
+                  props.onChange({...props.config, sex: Sex.SHOW})
+                }
+              />
+            </Form.Field>
+          </Item.Content>
+        </Item>
       </Item.Group>
     </Form>
   );