Added fancy tree as an experimental feature

This commit is contained in:
Przemek Wiech
2019-11-18 22:28:06 +01:00
parent d9bf68a4c3
commit c988f4180e
6 changed files with 60 additions and 75 deletions

94
package-lock.json generated
View File

@@ -3622,8 +3622,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@@ -3644,14 +3643,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -3666,20 +3663,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -3796,8 +3790,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@@ -3809,7 +3802,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -3824,7 +3816,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -3832,14 +3823,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -3858,7 +3847,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3939,8 +3927,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -3952,7 +3939,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -4038,8 +4024,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4075,7 +4060,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -4095,7 +4079,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -4139,14 +4122,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
@@ -7238,9 +7219,9 @@
"dev": true
},
"handlebars": {
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.1.tgz",
"integrity": "sha512-C29UoFzHe9yM61lOsIlCE5/mQVGrnIOrOq7maQl76L7tYPCgC1og0Ajt6uWnX4ZTxBPnjw+CUvawphwCfJgUnA==",
"version": "4.5.3",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz",
"integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==",
"dev": true,
"requires": {
"neo-async": "^2.6.0",
@@ -8501,8 +8482,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@@ -8523,14 +8503,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -8545,20 +8523,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -8675,8 +8650,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@@ -8688,7 +8662,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -8703,7 +8676,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -8711,14 +8683,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -8737,7 +8707,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -8818,8 +8787,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -8831,7 +8799,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -8917,8 +8884,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -8954,7 +8920,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -8974,7 +8939,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -9018,14 +8982,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
}
@@ -14596,9 +14558,9 @@
"dev": true
},
"topola": {
"version": "2.3.9",
"resolved": "https://registry.npmjs.org/topola/-/topola-2.3.9.tgz",
"integrity": "sha512-nrVs6QsyBJPpEoAwZkL2anV1G5CnFh5cxIE4uTJrXCL3curvST5OJxKDjA2RDkImzVMPrvRRZ9lDmXCQsp0QBg==",
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/topola/-/topola-2.4.0.tgz",
"integrity": "sha512-ncLg4eDFeF1UNXEcpJvrm8iMnNCtTVsDg8hWHJr83UMSfiV8EwcvklyhoKjB1uRsp/E+eSKOMJb44Acgn5BM1w==",
"requires": {
"array-flat-polyfill": "^1.0.1",
"d3": "^5.4.0",

View File

@@ -23,7 +23,7 @@
"react-router-dom": "^4.3.1",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.84.0",
"topola": "^2.3.9"
"topola": "^2.4.0"
},
"devDependencies": {
"@types/array.prototype.flatmap": "^1.2.0",

View File

@@ -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 =

View File

@@ -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,

View File

@@ -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>

View File

@@ -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",