Added fancy tree as an experimental feature

src/app.tsx

@@ -40,11 +40,7 @@ interface ErrorPopupProps {
 function ErrorPopup(props: ErrorPopupProps) {
   return (
     <Portal open={props.open} onClose={props.onDismiss}>
-      <Message
-        negative
-        className="errorPopup"
-        onDismiss={props.onDismiss}
-      >
+      <Message negative className="errorPopup" onDismiss={props.onDismiss}>
         <Message.Header>
           <FormattedMessage id="error.error" defaultMessage={'Error'} />
         </Message.Header>
@@ -230,9 +226,13 @@ export class App extends React.Component<RouteComponentProps, {}> {
     const handleCors = getParam('handleCors') !== 'false'; // True by default.
     const standalone = getParam('standalone') !== 'false'; // True by default.
     const view = getParam('view');
+
+    const chartTypes = new Map<string | undefined, ChartType>([
+      ['relatives', ChartType.Relatives],
+      ['fancy', ChartType.Fancy],
+    ]);
     // Hourglass is the default view.
-    const chartType =
-      view === 'relatives' ? ChartType.Relatives : ChartType.Hourglass;
+    const chartType = chartTypes.get(view) || ChartType.Hourglass;
 
     const gedcom = this.props.location.state && this.props.location.state.data;
     const images =

src/chart.tsx

@@ -11,6 +11,8 @@ import {
   DetailedRenderer,
   HourglassChart,
   RelativesChart,
+  FancyChart,
+  CircleRenderer,
 } from 'topola';
 
 /** Called when the view is dragged with the mouse. */
@@ -106,6 +108,7 @@ function canvasToBlob(canvas: HTMLCanvasElement, type: string) {
 export enum ChartType {
   Hourglass,
   Relatives,
+  Fancy,
 }
 
 export interface ChartProps {
@@ -125,12 +128,24 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
         return HourglassChart;
       case ChartType.Relatives:
         return RelativesChart;
+      case ChartType.Fancy:
+        return FancyChart;
       default:
         // Fall back to hourglass chart.
         return HourglassChart;
     }
   }
 
+  private getRendererType() {
+    switch (this.props.chartType) {
+      case ChartType.Fancy:
+        return CircleRenderer;
+      default:
+        // Use DetailedRenderer by default.
+        return DetailedRenderer;
+    }
+  }
+
   /**
    * Renders the chart or performs a transition animation to a new state.
    * If indiInfo is not given, it means that it is the initial render and no
@@ -142,7 +157,7 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
       this.chart = createChart({
         json: this.props.data,
         chartType: this.getChartType(),
-        renderer: DetailedRenderer,
+        renderer: this.getRendererType(),
         svgSelector: '#chart',
         indiCallback: (info) => this.props.onSelection(info),
         animate: true,

src/top_bar.tsx

@@ -326,6 +326,13 @@ export class TopBar extends React.Component<
                 defaultMessage="All relatives"
               />
             </Dropdown.Item>
+            <Dropdown.Item onClick={() => this.changeView('fancy')}>
+              <Icon name="users" />
+              <FormattedMessage
+                id="menu.fancy"
+                defaultMessage="Fancy tree (experimental)"
+              />
+            </Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
 

src/translations/pl.json

@@ -9,6 +9,7 @@
   "menu.view": "Widok",
   "menu.hourglass": "Wykres klepsydrowy",
   "menu.relatives": "Wszyscy krewni",
+  "menu.fancy": "Ozdobne drzewo (eksperymentalne)",
   "menu.github": "Źródła na GitHub",
   "menu.powered_by": "Topola Genealogy",
   "menu.search.placeholder": "Szukaj osoby",