diff --git a/asset-manifest.json b/asset-manifest.json index b8f7db6..2f7ab03 100644 --- a/asset-manifest.json +++ b/asset-manifest.json @@ -1,15 +1,15 @@ { "files": { "main.css": "/topola-viewer/static/css/main.0545fa1c.chunk.css", - "main.js": "/topola-viewer/static/js/main.d5740996.chunk.js", - "main.js.map": "/topola-viewer/static/js/main.d5740996.chunk.js.map", + "main.js": "/topola-viewer/static/js/main.352a0788.chunk.js", + "main.js.map": "/topola-viewer/static/js/main.352a0788.chunk.js.map", "runtime~main.js": "/topola-viewer/static/js/runtime~main.95e962fa.js", "runtime~main.js.map": "/topola-viewer/static/js/runtime~main.95e962fa.js.map", "static/css/2.bda320df.chunk.css": "/topola-viewer/static/css/2.bda320df.chunk.css", "static/js/2.999b7d4c.chunk.js": "/topola-viewer/static/js/2.999b7d4c.chunk.js", "static/js/2.999b7d4c.chunk.js.map": "/topola-viewer/static/js/2.999b7d4c.chunk.js.map", "index.html": "/topola-viewer/index.html", - "precache-manifest.cd1b9f767aceab861cc6218641a609ce.js": "/topola-viewer/precache-manifest.cd1b9f767aceab861cc6218641a609ce.js", + "precache-manifest.e357abd035737ff00f082692b9b825f0.js": "/topola-viewer/precache-manifest.e357abd035737ff00f082692b9b825f0.js", "service-worker.js": "/topola-viewer/service-worker.js", "static/css/2.bda320df.chunk.css.map": "/topola-viewer/static/css/2.bda320df.chunk.css.map", "static/css/main.0545fa1c.chunk.css.map": "/topola-viewer/static/css/main.0545fa1c.chunk.css.map", diff --git a/index.html b/index.html index 7f75874..f3b70a1 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Topola Genealogy Viewer
\ No newline at end of file +Topola Genealogy Viewer
\ No newline at end of file diff --git a/precache-manifest.cd1b9f767aceab861cc6218641a609ce.js b/precache-manifest.e357abd035737ff00f082692b9b825f0.js similarity index 92% rename from precache-manifest.cd1b9f767aceab861cc6218641a609ce.js rename to precache-manifest.e357abd035737ff00f082692b9b825f0.js index 9e271f9..b4c504b 100644 --- a/precache-manifest.cd1b9f767aceab861cc6218641a609ce.js +++ b/precache-manifest.e357abd035737ff00f082692b9b825f0.js @@ -1,6 +1,6 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ { - "revision": "a225164cf8110b96fa0af26baf043579", + "revision": "082afcc9b6f7d277e4231a8460f4f9d2", "url": "/topola-viewer/index.html" }, { @@ -8,7 +8,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ "url": "/topola-viewer/static/css/2.bda320df.chunk.css" }, { - "revision": "c976f5001ccb541fee83", + "revision": "b8f7745a362f130bc739", "url": "/topola-viewer/static/css/main.0545fa1c.chunk.css" }, { @@ -16,8 +16,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ "url": "/topola-viewer/static/js/2.999b7d4c.chunk.js" }, { - "revision": "c976f5001ccb541fee83", - "url": "/topola-viewer/static/js/main.d5740996.chunk.js" + "revision": "b8f7745a362f130bc739", + "url": "/topola-viewer/static/js/main.352a0788.chunk.js" }, { "revision": "f20ab92a042545955e37", diff --git a/service-worker.js b/service-worker.js index 4209827..457e2dc 100644 --- a/service-worker.js +++ b/service-worker.js @@ -14,7 +14,7 @@ importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); importScripts( - "/topola-viewer/precache-manifest.cd1b9f767aceab861cc6218641a609ce.js" + "/topola-viewer/precache-manifest.e357abd035737ff00f082692b9b825f0.js" ); self.addEventListener('message', (event) => { diff --git a/static/js/main.352a0788.chunk.js b/static/js/main.352a0788.chunk.js new file mode 100644 index 0000000..136f024 --- /dev/null +++ b/static/js/main.352a0788.chunk.js @@ -0,0 +1,2 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{250:function(e){e.exports={"menu.load_from_url":"Otw\xf3rz URL","menu.load_from_file":"Otw\xf3rz plik","menu.print":"Drukuj","menu.download":"Pobierz","menu.pdf_file":"Plik PDF","menu.png_file":"Plik PNG","menu.svg_file":"Plik SVG","menu.view":"Widok","menu.hourglass":"Wykres klepsydrowy","menu.relatives":"Wszyscy krewni","menu.fancy":"Ozdobne drzewo (eksperymentalne)","menu.github":"\u0179r\xf3d\u0142a na GitHub","menu.powered_by":"Topola Genealogy","menu.search.placeholder":"Szukaj osoby","menu.search.no_results":"Brak wynik\xf3w","intro.title":"Topola Genealogy","intro.description":"Topola Genealogy pozwala przegl\u0105da\u0107 drzewo genealogiczne w interaktywny spos\xf3b.","intro.instructions":"Kliknij OTW\xd3RZ URL lub OTW\xd3RZ PLIK, aby za\u0142adowa\u0107 plik GEDCOM. Wi\u0119kszo\u015b\u0107 program\xf3w genealogicznych posiada funkcj\u0119 eksportu do pliku GEDCOM.","intro.examples":"Poni\u017cej jest kilka przyk\u0142ad\xf3w znalezionych w Internecie:","intro.from":"\u017ar\xf3d\u0142o:","intro.privacy":"Prywatno\u015b\u0107","intro.privacy_note":'U\u017cywaj\u0105c funkcji "Otw\xf3rz plik", Twoje dane nie s\u0105 nigdzie wysy\u0142ane i pozostaj\u0105 na Twoim komputerze. U\u017cywaj\u0105c funkcji "Otw\xf3rz URL", dane z podanego adresu przesy\u0142ane s\u0105 przez us\u0142ug\u0119 {link} w celu umo\u017cliwienia za\u0142adowania danych z innej domeny (CORS).',"load_from_url.title":"Otw\xf3rz z adresu URL","load_from_url.comment":"Dane z podanego adresu URL zostan\u0105 za\u0142adowane poprzez us\u0142ug\u0119 {link} w celu unikni\u0119cia problem\xf3w z CORS.","load_from_url.cancel":"Anuluj","load_from_url.load":"Otw\xf3rz","gedcom.BAPM":"Chrzest","gedcom.BIRT":"Narodziny","gedcom.BURI":"Pogrzeb","gedcom.CHR":"Chrzest","gedcom.DEAT":"\u015amier\u0107","gedcom.EMAIL":"E-mail","gedcom.OCCU":"Zaw\xf3d","gedcom.TITL":"Tytu\u0142","gedcom.WWW":"Strona WWW","date.abt":"oko\u0142o","date.cal":"wyliczone","date.est":"oszacowane","date.between":"mi\u0119dzy {from} a {to}","date.after":"po {from}","date.before":"przed {to}","error.error":"B\u0142\u0105d","error.failed_pdf":"Nie uda\u0142o si\u0119 utworzy\u0107 pliku PDF. Spr\xf3buj jeszcze raz z mniejszym diagramem lub pobierz plik SVG.","error.failed_png":"Nie uda\u0142o si\u0119 utworzy\u0107 pliku PNG. Spr\xf3buj jeszcze raz z mniejszym diagramem lub pobierz plik SVG.","error.failed_to_load_file":"B\u0142\u0105d wczytywania pliku"}},251:function(e,t){},294:function(e,t,n){e.exports=n(525)},306:function(e,t){},312:function(e,t){},522:function(e,t,n){},525:function(e,t,n){"use strict";n.r(t);var a=n(76),r=n(248),o=n(249),i=n(0),s=n(63),l=n(250),c=n(15),u=n(16),d=n.n(u),f=n(24),m=n(29),p=n(30),h=n(40),g=n(37),v=n(39),w=n(32);function y(e,t){window.gtag("event",e,t)}var E,b=n(18),k=n(253),O=n.n(k),x=n(164),j=n(33);function M(){var e=b.select("#chart").node().parentElement;e.scrollLeft=-b.event.transform.x,e.scrollTop=-b.event.transform.y}function R(){var e=b.select("#chart").node().parentElement,t=e.scrollLeft+e.clientWidth/2,n=e.scrollTop+e.clientHeight/2;b.select(e).call(b.zoom().translateTo,t,n)}function C(e){var t=new FileReader;return t.readAsDataURL(e),new Promise(function(e,n){t.onload=function(t){return e(t.target.result)}})}function _(e){return S.apply(this,arguments)}function S(){return(S=Object(f.a)(d.a.mark(function e(t){var n,a,r,o;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(n=t.href.baseVal){e.next=3;break}return e.abrupt("return");case 3:return e.prev=3,e.next=6,fetch(n);case 6:return a=e.sent,e.next=9,a.blob();case 9:return r=e.sent,e.next=12,C(r);case 12:o=e.sent,t.href.baseVal=o,e.next=19;break;case 16:e.prev=16,e.t0=e.catch(3),console.warn("Failed to load image:",e.t0);case 19:case"end":return e.stop()}},e,null,[[3,16]])}))).apply(this,arguments)}function z(e){return D.apply(this,arguments)}function D(){return(D=Object(f.a)(d.a.mark(function e(t){var n;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return n=Array.from(t.getElementsByTagName("image")),e.next=3,Promise.all(n.map(_));case 3:case"end":return e.stop()}},e)}))).apply(this,arguments)}function T(e){var t=new Image;return t.src=URL.createObjectURL(e),new Promise(function(e,n){t.addEventListener("load",function(){return e(t)})})}function P(e){var t=document.createElement("canvas");t.width=2*e.width,t.height=2*e.height;var n=t.getContext("2d"),a=n.fillStyle;return n.fillStyle="white",n.fillRect(0,0,t.width,t.height),n.fillStyle=a,n.drawImage(e,0,0,t.width,t.height),t}function N(e,t){return new Promise(function(n,a){e.toBlob(function(e){e?n(e):a()},t)})}!function(e){e[e.Hourglass=0]="Hourglass",e[e.Relatives=1]="Relatives",e[e.Fancy=2]="Fancy"}(E||(E={}));var I=function(e){function t(){var e,n;Object(m.a)(this,t);for(var a=arguments.length,r=new Array(a),o=0;o0&&void 0!==arguments[0]?arguments[0]:{initialRender:!1};t.initialRender&&(b.select("#chart").node().innerHTML="",this.chart=Object(j.createChart)({json:this.props.data,chartType:this.getChartType(),renderer:this.getRendererType(),svgSelector:"#chart",indiCallback:function(t){return e.props.onSelection(t)},animate:!0,updateSvgSize:!1,locale:this.context.intl.locale}));var n=this.chart.render({startIndi:this.props.selection.id,baseGeneration:this.props.selection.generation}),a=b.select("#chart"),r=a.node().parentElement;b.select(r).on("scroll",R).call(b.zoom().scaleExtent([1,1]).translateExtent([[0,0],n.size]).on("zoom",M));var o,i,s=r.clientWidth/2-n.origin[0],l=r.clientHeight/2-n.origin[1],c=b.max([0,(r.clientWidth-n.size[0])/2]),u=b.max([0,(r.clientHeight-n.size[1])/2]),d=a.transition().delay(200).duration(500);(t.initialRender?a:d).attr("transform","translate(".concat(c,", ").concat(u,")")).attr("width",n.size[0]).attr("height",n.size[1]),t.initialRender?(r.scrollLeft=-s,r.scrollTop=-l):d.tween("scrollLeft",(i=-s,function(){var e=b.interpolateNumber(r.scrollLeft,i);return function(t){r.scrollLeft=e(t)}})).tween("scrollTop",(o=-l,function(){var e=b.interpolateNumber(r.scrollTop,o);return function(t){r.scrollTop=e(t)}}))}},{key:"componentDidMount",value:function(){this.renderChart({initialRender:!0})}},{key:"componentDidUpdate",value:function(e){var t=this.props.data!==e.data||this.props.chartType!==e.chartType;this.renderChart({initialRender:t})}},{key:"render",value:function(){return i.createElement("div",{id:"svgContainer"},i.createElement("svg",{id:"chart"}))}},{key:"getSvgContents",value:function(){var e=document.getElementById("chart").cloneNode(!0);return e.removeAttribute("transform"),(new XMLSerializer).serializeToString(e)}},{key:"getSvgContentsWithInlinedImages",value:function(){var e=Object(f.a)(d.a.mark(function e(){var t;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return(t=document.getElementById("chart").cloneNode(!0)).removeAttribute("transform"),e.next=4,z(t);case 4:return e.abrupt("return",(new XMLSerializer).serializeToString(t));case 5:case"end":return e.stop()}},e)}));return function(){return e.apply(this,arguments)}}()},{key:"print",value:function(){var e=this,t=document.createElement("iframe");t.style.position="absolute",t.style.top="-1000px",t.style.left="-1000px",t.onload=function(){t.contentDocument.open(),t.contentDocument.write(e.getSvgContents()),t.contentDocument.close(),setTimeout(function(){t.contentWindow.focus(),t.contentWindow.print(),t.parentNode.removeChild(t)},500)},document.body.appendChild(t)}},{key:"downloadSvg",value:function(){var e=Object(f.a)(d.a.mark(function e(){var t,n;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,this.getSvgContentsWithInlinedImages();case 2:t=e.sent,n=new Blob([t],{type:"image/svg+xml"}),Object(x.saveAs)(n,"topola.svg");case 5:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()},{key:"drawOnCanvas",value:function(){var e=Object(f.a)(d.a.mark(function e(){var t,n;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,this.getSvgContentsWithInlinedImages();case 2:return t=e.sent,n=new Blob([t],{type:"image/svg+xml"}),e.t0=P,e.next=7,T(n);case 7:return e.t1=e.sent,e.next=10,(0,e.t0)(e.t1);case 10:return e.abrupt("return",e.sent);case 11:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()},{key:"downloadPng",value:function(){var e=Object(f.a)(d.a.mark(function e(){var t,n;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,this.drawOnCanvas();case 2:return t=e.sent,e.next=5,N(t,"image/png");case 5:n=e.sent,Object(x.saveAs)(n,"topola.png");case 7:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()},{key:"downloadPdf",value:function(){var e=Object(f.a)(d.a.mark(function e(){var t,n;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,this.drawOnCanvas();case 2:t=e.sent,(n=new O.a({orientation:t.width>t.height?"l":"p",unit:"pt",format:[t.width,t.height]})).addImage(t,"PNG",0,0,t.width,t.height,"NONE"),n.save("topola.pdf");case 6:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()}]),t}(i.PureComponent);I.contextTypes={intl:c.d};var L=n(255),A=n.n(L),U=n(256),F=n.n(U),W=new Map([["abt","about"],["cal","calculated"],["est","estimated"]]);function H(e,t){var n=void 0!==e.day,a=void 0!==e.month,r=void 0!==e.year;if(!n&&!a&&!r)return e.text||"";var o=new Date(r?e.year:0,a?e.month-1:0,n?e.day:1),i=e.qualifier&&e.qualifier.toLowerCase(),s={day:n?"numeric":void 0,month:a?"long":void 0,year:r?"numeric":void 0};return[i&&t.formatMessage({id:"date.".concat(i),defaultMessage:W.get(i)||i}),new Intl.DateTimeFormat(t.locale,s).format(o)].join(" ")}function G(e,t){var n=Object(j.getDate)(e);return n?n.date?H(n.date,t):n.dateRange?function(e,t){var n=e.from,a=e.to,r=n&&H(n,t),o=a&&H(a,t);return r&&o?t.formatMessage({id:"date.between",defaultMessage:"between {from} and {to}"},{from:r,to:o}):r?t.formatMessage({id:"date.after",defaultMessage:"after {from}"},{from:r}):o?t.formatMessage({id:"date.before",defaultMessage:"before {to}"},{to:o}):""}(n.dateRange,t):"":""}var B=["BIRT","BAPM","CHR","DEAT","BURI"],V=["NAME","SEX","FAMC","FAMS","NOTE"],J=new Map([["BAPM","Baptism"],["BIRT","Birth"],["BURI","Burial"],["CHR","Christening"],["DEAT","Death"],["EMAIL","E-mail"],["OCCU","Occupation"],["TITL","Title"],["WWW","WWW"]]);function Y(e){return i.createElement(c.a,{id:"gedcom.".concat(e),defaultMessage:J.get(e)||e})}function q(e){return i.createElement(i.Fragment,null,e.map(function(e,t){return i.createElement("div",{key:t},i.createElement(F.a,{properties:{target:"_blank"}},e),i.createElement("br",null))}))}function K(e){var t=[e.data];return e.tree.forEach(function(e){if("CONC"===e.tag&&e.data){var n=t.length-1;t[n]+=e.data}else"CONT"===e.tag&&e.data&&t.push(e.data)}),t}function X(e){return q(K(e).map(function(e,t){return i.createElement("i",{key:t},e)}))}function Z(e){return i.createElement("h2",{className:"ui header"},e.data.split("/").filter(function(e){return!!e}).map(function(e,t){return i.createElement("div",{key:t},e,i.createElement("br",null))}))}function $(e,t,n){return A()(t,function(t){return e.filter(function(e){return e.tag===t}).map(function(e){return n(e)})}).filter(function(e){return null!==e}).map(function(e,t){return i.createElement("div",{className:"ui segment",key:t},e)})}function Q(e){return e.tree.length>0||e.data&&!e.data.startsWith("@")}function ee(e){return e.filter(function(e){return!V.includes(e.tag)&&!B.includes(e.tag)}).filter(Q).map(function(e){return function(e){var t=[];return e.data&&t.push.apply(t,Object(a.a)(K(e))),e.tree.filter(function(e){return"NOTE"===e.tag}).forEach(function(e){return K(e).forEach(function(e){return t.push(i.createElement("i",null,e))})}),t.length?i.createElement(i.Fragment,null,i.createElement("div",{className:"ui sub header"},Y(e.tag)),i.createElement("span",null,q(t))):null}(e)}).filter(function(e){return null!==e}).map(function(e,t){return i.createElement("div",{className:"ui segment",key:t},e)})}var te=function(e){function t(){return Object(m.a)(this,t),Object(h.a)(this,Object(g.a)(t).apply(this,arguments))}return Object(v.a)(t,e),Object(p.a)(t,[{key:"render",value:function(){var e=this,t=this.props.gedcom.indis[this.props.indi].tree,n=t.filter(Q);return i.createElement("div",{className:"ui segments",id:"details"},$(t,["NAME"],Z),$(t,B,function(t){return function(e,t){var n=[],r=e.tree.find(function(e){return"DATE"===e.tag});r&&r.data&&n.push(G(r.data,t));var o=e.tree.find(function(e){return"PLAC"===e.tag});return o&&o.data&&n.push.apply(n,Object(a.a)(K(o))),e.tree.filter(function(e){return"NOTE"===e.tag}).forEach(function(e){return K(e).forEach(function(e){return n.push(i.createElement("i",null,e))})}),n.length?i.createElement(i.Fragment,null,i.createElement("div",{className:"ui sub header"},Y(e.tag)),i.createElement("span",null,q(n))):null}(t,e.context.intl)}),ee(n),$(n,["NOTE"],X))}}]),t}(i.Component);te.contextTypes={intl:c.d};var ne=n(160);function ae(e){return e.substring(1,e.length-1)}function re(e){var t=e.find(function(e){return"HEAD"===e.tag}),n={},a={};return e.forEach(function(e){"INDI"===e.tag?n[ae(e.pointer)]=e:"FAM"===e.tag&&(a[ae(e.pointer)]=e)}),{head:t,indis:n,fams:a}}function oe(e){var t=function(e){var t=new Map;return e.indis.forEach(function(e){t[e.id]=e}),function(e,n){var a,r,o=(a=e)<(r=n)?-1:a>r?1:0,i=t[e],s=t[n],l=i&&i.birth,c=s&&s.birth,u=l&&(l.date||l.dateRange&&l.dateRange.from),d=c&&(c.date||c.dateRange&&c.dateRange.from);return u&&u.year&&d&&d.year?u.year!==d.year?u.year-d.year:u.month&&d.month?u.month!==d.month?u.month-d.month:u.day&&d.day&&u.day!==d.day?u.month-d.month:o:o:o}}(e),n=e.fams.map(function(e){return function(e,t){if(!e.children)return e;var n=e.children.sort(t);return Object.assign({},e,{children:n})}(e,t)});return Object.assign({},e,{fams:n})}function ie(e,t){var n=e.indis.map(function(e){return function(e,t){if(e.imageUrl){var n=e.imageUrl.match(/[^\/\\]*$/)[0];if(t.has(n)){var a=Object.assign({},e);return a.imageUrl=t.get(n),a}}if(!e.imageUrl||e.imageUrl.startsWith("http"))return e;var r=Object.assign({},e);return delete r.imageUrl,r}(e,t)});return Object.assign({},e,{indis:n})}function se(e){var t=e&&e.tree&&e.tree.find(function(e){return"SOUR"===e.tag}),n=t&&t.tree&&t.tree.find(function(e){return"NAME"===e.tag});return n&&n.data||null}function le(e,t,n){return{id:t||e.indis[0].id,generation:n||0}}function ce(e,t,n){var a=function(e,t){var n=Object(ne.parse)(e),a=Object(j.gedcomEntriesToJson)(n);if(!a||!a.indis||!a.indis.length||!a.fams||!a.fams.length)throw new Error("Failed to read GEDCOM file");return{chartData:ie(oe(a),t),gedcom:re(n)}}(e,n||new Map),r=JSON.stringify(a);try{sessionStorage.setItem(t,r)}catch(o){console.warn("Failed to store data in session storage: "+o)}return a}function ue(e,t){return de.apply(this,arguments)}function de(){return(de=Object(f.a)(d.a.mark(function e(t,n){var a,r,o,i;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(e.prev=0,!(a=sessionStorage.getItem(t))){e.next=4;break}return e.abrupt("return",JSON.parse(a));case 4:e.next=9;break;case 6:e.prev=6,e.t0=e.catch(0),console.warn("Failed to load data from session storage: "+e.t0);case 9:return r=n?"https://cors-anywhere.herokuapp.com/"+t:t,e.next=12,window.fetch(r);case 12:if(200===(o=e.sent).status){e.next=15;break}throw new Error(o.statusText);case 15:return e.next=17,o.text();case 17:return i=e.sent,e.abrupt("return",ce(i,t));case 19:case"end":return e.stop()}},e,null,[[0,6]])}))).apply(this,arguments)}function fe(e,t,n){return me.apply(this,arguments)}function me(){return(me=Object(f.a)(d.a.mark(function e(t,n,a){var r;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(e.prev=0,!(r=sessionStorage.getItem(t))){e.next=4;break}return e.abrupt("return",JSON.parse(r));case 4:e.next=9;break;case 6:e.prev=6,e.t0=e.catch(0),console.warn("Failed to load data from session storage: "+e.t0);case 9:if(n){e.next=11;break}throw new Error("Error loading data. Please upload your file again.");case 11:return e.abrupt("return",ce(n,t,a));case 12:case"end":return e.stop()}},e,null,[[0,6]])}))).apply(this,arguments)}var pe=n(540),he=n(533);function ge(e){return i.createElement(he.a,{to:{pathname:"/view",search:w.stringify({url:e.url})}},e.text)}function ve(){return i.createElement(pe.a,{className:"intro"},i.createElement(pe.a.Content,null,i.createElement(pe.a.Header,null,i.createElement(c.a,{id:"intro.title",defaultMessage:"Topola Genealogy Viewer"}))),i.createElement(pe.a.Content,null,i.createElement("p",null,i.createElement(c.a,{id:"intro.description",defaultMessage:"Topola Genealogy is a genealogy tree viewer that lets you browse the structure of the family."})),i.createElement("p",null,i.createElement(c.a,{id:"intro.instructions",defaultMessage:"Use the LOAD FROM URL or LOAD FROM FILE buttons above to load a GEDCOM file. You can export a GEDCOM file from most of the existing genealogy programs and web sites."})),i.createElement("p",null,i.createElement(c.a,{id:"intro.examples",defaultMessage:"Here are some examples from the web that you can view:"})),i.createElement("ul",null,i.createElement("li",null,i.createElement(ge,{url:"http://genpol.com/module-Downloads-prep_hand_out-lid-32.html",text:"Karol Wojty\u0142a"})," ","(",i.createElement(c.a,{id:"intro.from",defaultMessage:"from"})," ",i.createElement("a",{href:"http://genpol.com/module-Downloads-display-lid-32.html"},"GENPOL"),")"),i.createElement("li",null,i.createElement(ge,{url:"https://webtreeprint.com/tp_downloader.php?path=famous_gedcoms/shakespeare.ged",text:"Shakespeare"})," ","(",i.createElement(c.a,{id:"intro.from",defaultMessage:"from"})," ",i.createElement("a",{href:"https://webtreeprint.com/tp_famous_gedcoms.php"},"webtreeprint.com"),")"),i.createElement("li",null,i.createElement(ge,{url:"http://genealogyoflife.com/tng/gedcom/HarryPotter.ged",text:"Harry Potter"})," ","(",i.createElement(c.a,{id:"intro.from",defaultMessage:"from"})," ",i.createElement("a",{href:"http://famousfamilytrees.blogspot.com/"},"Famous Family Trees"),")")),i.createElement("p",null,i.createElement("b",null,i.createElement(c.a,{id:"intro.privacy",defaultMessage:"Privacy"})),":",i.createElement(c.a,{id:"intro.privacy_note",defaultMessage:'When using the "load from file" option, this site does not send your data anywhere and files loaded from disk do not leave your computer. When using "load from URL", data is passed through the {link} service to deal with an issue with cross-site file loading in the browser (CORS).',values:{link:i.createElement("a",{href:"https://cors-anywhere.herokuapp.com/"},"cors-anywhere")}}))))}var we=n(541),ye=n(548),Ee=n(550),be=n(536),ke=n(547),Oe=n(549),xe=n(544),je=n(261),Me=n.n(je),Re=n(165),Ce=n.n(Re),_e=n(262),Se=n.n(_e),ze=n(263),De=n.n(ze);function Te(e,t){return e.score!==t.score?e.score-t.score:Se()(e.ref,t.ref)}var Pe=function(){function e(t){Object(m.a)(this,e),this.gedcom=t,this.index=void 0,this.index=De()(function(){for(var e in this.ref("id"),this.field("id"),this.field("name"),this.field("normalizedName"),t.indis){var n=t.indis[e].tree.filter(function(e){return"NAME"===e.tag}).map(function(e){return e.data}).join(" ");this.add({id:e,name:n,normalizedName:(a=n,a.toLocaleLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/\u0142/g,"l"))})}var a})}return Object(p.a)(e,[{key:"search",value:function(e){var t=this,n=e.split(" ").filter(function(e){return!!e}).map(function(e){return"+".concat(e,"*")}).join(" ");return this.index.search(n).sort(Te).slice(0,8).map(function(e){return{id:e.ref,indi:t.gedcom.indis[e.ref]}})}}]),e}();function Ne(e){var t=e.indi.tree.find(function(e){return"NAME"===e.tag}),n=t&&t.data.split("/").filter(function(e){return!!e}).join(" ");return e.id.length>8?n:i.createElement(i.Fragment,null,n," ",i.createElement("i",null,"(",e.id,")"))}function Ie(e,t,n){var a=e.tree.find(function(e){return e.tag===t}),r=a&&a.tree.find(function(e){return"DATE"===e.tag});return r&&G(r.data,n)||""}function Le(e,t){var n=Ie(e,"BIRT",t),a=Ie(e,"DEAT",t);return a?"".concat(n," \u2013 ").concat(a):n}var Ae=n(538),Ue=n(546),Fe=n(64),We=n(537),He=n(535),Ge=n(527),Be=n(543),Ve=n(539),Je=n(542);function Ye(e){return new Promise(function(t,n){var a=new FileReader;a.onload=function(e){t(e.target.result)},a.readAsText(e)})}function qe(e){var t=e.toLowerCase();return t.endsWith(".jpg")||t.endsWith(".png")}var Ke,Xe=function(e){function t(){var e,n;Object(m.a)(this,t);for(var a=arguments.length,r=new Array(a),o=0;o {\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n return new Promise((resolve, reject) => {\n reader.onload = (e) => resolve((e.target as FileReader).result as string);\n });\n}\n\nasync function inlineImage(image: SVGImageElement) {\n const href = image.href.baseVal;\n if (!href) {\n return;\n }\n try {\n const response = await fetch(href);\n const blob = await response.blob();\n const dataUrl = await loadAsDataUrl(blob);\n image.href.baseVal = dataUrl;\n } catch (e) {\n console.warn('Failed to load image:', e);\n }\n}\n\n/**\n * Fetches all images in the SVG and replaces them with inlined images as data\n * URLs. Images are replaced in place. The replacement is done, the returned\n * promise is resolved.\n */\nasync function inlineImages(svg: Element): Promise {\n const images = Array.from(svg.getElementsByTagName('image'));\n await Promise.all(images.map(inlineImage));\n}\n\n/** Loads a blob into an image object. */\nfunction loadImage(blob: Blob): Promise {\n const image = new Image();\n image.src = URL.createObjectURL(blob);\n return new Promise((resolve, reject) => {\n image.addEventListener('load', () => resolve(image));\n });\n}\n\n/** Draw image on a new canvas and return the canvas. */\nfunction drawOnCanvas(image: HTMLImageElement) {\n const canvas = document.createElement('canvas');\n // Scale image for better quality.\n canvas.width = image.width * 2;\n canvas.height = image.height * 2;\n\n const ctx = canvas.getContext('2d')!;\n const oldFill = ctx.fillStyle;\n ctx.fillStyle = 'white';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = oldFill;\n\n ctx.drawImage(image, 0, 0, canvas.width, canvas.height);\n return canvas;\n}\n\nfunction canvasToBlob(canvas: HTMLCanvasElement, type: string) {\n return new Promise((resolve, reject) => {\n canvas.toBlob((blob) => {\n if (blob) {\n resolve(blob);\n } else {\n reject();\n }\n }, type);\n });\n}\n\n/** Supported chart types. */\nexport enum ChartType {\n Hourglass,\n Relatives,\n Fancy,\n}\n\nexport interface ChartProps {\n data: JsonGedcomData;\n selection: IndiInfo;\n chartType: ChartType;\n onSelection: (indiInfo: IndiInfo) => void;\n}\n\n/** Component showing the genealogy chart and handling transition animations. */\nexport class Chart extends React.PureComponent {\n private chart?: ChartHandle;\n\n private getChartType() {\n switch (this.props.chartType) {\n case ChartType.Hourglass:\n return HourglassChart;\n case ChartType.Relatives:\n return RelativesChart;\n case ChartType.Fancy:\n return FancyChart;\n default:\n // Fall back to hourglass chart.\n return HourglassChart;\n }\n }\n\n private getRendererType() {\n switch (this.props.chartType) {\n case ChartType.Fancy:\n return CircleRenderer;\n default:\n // Use DetailedRenderer by default.\n return DetailedRenderer;\n }\n }\n\n /**\n * Renders the chart or performs a transition animation to a new state.\n * If indiInfo is not given, it means that it is the initial render and no\n * animation is performed.\n */\n private renderChart(args: {initialRender: boolean} = {initialRender: false}) {\n if (args.initialRender) {\n (d3.select('#chart').node() as HTMLElement).innerHTML = '';\n this.chart = createChart({\n json: this.props.data,\n chartType: this.getChartType(),\n renderer: this.getRendererType(),\n svgSelector: '#chart',\n indiCallback: (info) => this.props.onSelection(info),\n animate: true,\n updateSvgSize: false,\n locale: this.context.intl.locale,\n });\n }\n const chartInfo = this.chart!.render({\n startIndi: this.props.selection.id,\n baseGeneration: this.props.selection.generation,\n });\n const svg = d3.select('#chart');\n const parent = (svg.node() as HTMLElement).parentElement as Element;\n\n d3.select(parent)\n .on('scroll', scrolled)\n .call(\n d3\n .zoom()\n .scaleExtent([1, 1])\n .translateExtent([[0, 0], chartInfo.size])\n .on('zoom', zoomed),\n );\n\n const scrollTopTween = (scrollTop: number) => {\n return () => {\n const i = d3.interpolateNumber(parent.scrollTop, scrollTop);\n return (t: number) => {\n parent.scrollTop = i(t);\n };\n };\n };\n const scrollLeftTween = (scrollLeft: number) => {\n return () => {\n const i = d3.interpolateNumber(parent.scrollLeft, scrollLeft);\n return (t: number) => {\n parent.scrollLeft = i(t);\n };\n };\n };\n\n const dx = parent.clientWidth / 2 - chartInfo.origin[0];\n const dy = parent.clientHeight / 2 - chartInfo.origin[1];\n const offsetX = d3.max([0, (parent.clientWidth - chartInfo.size[0]) / 2]);\n const offsetY = d3.max([0, (parent.clientHeight - chartInfo.size[1]) / 2]);\n const svgTransition = svg\n .transition()\n .delay(200)\n .duration(500);\n const transition = args.initialRender ? svg : svgTransition;\n transition\n .attr('transform', `translate(${offsetX}, ${offsetY})`)\n .attr('width', chartInfo.size[0])\n .attr('height', chartInfo.size[1]);\n if (args.initialRender) {\n parent.scrollLeft = -dx;\n parent.scrollTop = -dy;\n } else {\n svgTransition\n .tween('scrollLeft', scrollLeftTween(-dx))\n .tween('scrollTop', scrollTopTween(-dy));\n }\n }\n\n componentDidMount() {\n this.renderChart({initialRender: true});\n }\n\n componentDidUpdate(prevProps: ChartProps) {\n const initialRender =\n this.props.data !== prevProps.data ||\n this.props.chartType !== prevProps.chartType;\n this.renderChart({initialRender});\n }\n\n /** Make intl appear in this.context. */\n static contextTypes = {\n intl: intlShape,\n };\n\n render() {\n return (\n
\n \n
\n );\n }\n\n private getSvgContents() {\n const svg = document.getElementById('chart')!.cloneNode(true) as Element;\n svg.removeAttribute('transform');\n return new XMLSerializer().serializeToString(svg);\n }\n\n private async getSvgContentsWithInlinedImages() {\n const svg = document.getElementById('chart')!.cloneNode(true) as Element;\n svg.removeAttribute('transform');\n await inlineImages(svg);\n return new XMLSerializer().serializeToString(svg);\n }\n\n /** Shows the print dialog to print the currently displayed chart. */\n print() {\n const printWindow = document.createElement('iframe');\n printWindow.style.position = 'absolute';\n printWindow.style.top = '-1000px';\n printWindow.style.left = '-1000px';\n printWindow.onload = () => {\n printWindow.contentDocument!.open();\n printWindow.contentDocument!.write(this.getSvgContents());\n printWindow.contentDocument!.close();\n // Doesn't work on Firefox without the setTimeout.\n setTimeout(() => {\n printWindow.contentWindow!.focus();\n printWindow.contentWindow!.print();\n printWindow.parentNode!.removeChild(printWindow);\n }, 500);\n };\n document.body.appendChild(printWindow);\n }\n\n async downloadSvg() {\n const contents = await this.getSvgContentsWithInlinedImages();\n const blob = new Blob([contents], {type: 'image/svg+xml'});\n saveAs(blob, 'topola.svg');\n }\n\n private async drawOnCanvas(): Promise {\n const contents = await this.getSvgContentsWithInlinedImages();\n const blob = new Blob([contents], {type: 'image/svg+xml'});\n return await drawOnCanvas(await loadImage(blob));\n }\n\n async downloadPng() {\n const canvas = await this.drawOnCanvas();\n const blob = await canvasToBlob(canvas, 'image/png');\n saveAs(blob, 'topola.png');\n }\n\n async downloadPdf() {\n const canvas = await this.drawOnCanvas();\n const doc = new jsPDF({\n orientation: canvas.width > canvas.height ? 'l' : 'p',\n unit: 'pt',\n format: [canvas.width, canvas.height],\n });\n doc.addImage(canvas, 'PNG', 0, 0, canvas.width, canvas.height, 'NONE');\n doc.save('topola.pdf');\n }\n}\n","import {Date as TopolaDate, DateRange, getDate} from 'topola';\nimport {InjectedIntl} from 'react-intl';\n\nconst DATE_QUALIFIERS = new Map([\n ['abt', 'about'],\n ['cal', 'calculated'],\n ['est', 'estimated'],\n]);\n\nfunction formatDate(date: TopolaDate, intl: InjectedIntl) {\n const hasDay = date.day !== undefined;\n const hasMonth = date.month !== undefined;\n const hasYear = date.year !== undefined;\n if (!hasDay && !hasMonth && !hasYear) {\n return date.text || '';\n }\n const dateObject = new Date(\n hasYear ? date.year! : 0,\n hasMonth ? date.month! - 1 : 0,\n hasDay ? date.day! : 1,\n );\n\n const qualifier = date.qualifier && date.qualifier.toLowerCase();\n const translatedQualifier =\n qualifier &&\n intl.formatMessage({\n id: `date.${qualifier}`,\n defaultMessage: DATE_QUALIFIERS.get(qualifier) || qualifier,\n });\n\n const formatOptions = {\n day: hasDay ? 'numeric' : undefined,\n month: hasMonth ? 'long' : undefined,\n year: hasYear ? 'numeric' : undefined,\n };\n const translatedDate = new Intl.DateTimeFormat(\n intl.locale,\n formatOptions,\n ).format(dateObject);\n\n return [translatedQualifier, translatedDate].join(' ');\n}\n\nfunction formatDateRage(dateRange: DateRange, intl: InjectedIntl) {\n const fromDate = dateRange.from;\n const toDate = dateRange.to;\n const translatedFromDate = fromDate && formatDate(fromDate, intl);\n const translatedToDate = toDate && formatDate(toDate, intl);\n if (translatedFromDate && translatedToDate) {\n return intl.formatMessage(\n {\n id: 'date.between',\n defaultMessage: 'between {from} and {to}',\n },\n {from: translatedFromDate, to: translatedToDate},\n );\n }\n if (translatedFromDate) {\n return intl.formatMessage(\n {\n id: 'date.after',\n defaultMessage: 'after {from}',\n },\n {from: translatedFromDate},\n );\n }\n if (translatedToDate) {\n return intl.formatMessage(\n {\n id: 'date.before',\n defaultMessage: 'before {to}',\n },\n {to: translatedToDate},\n );\n }\n return '';\n}\n\n/** Formats a date given in GEDCOM format. */\nexport function translateDate(gedcomDate: string, intl: InjectedIntl) {\n const dateOrRange = getDate(gedcomDate);\n if (!dateOrRange) {\n return '';\n }\n if (dateOrRange.date) {\n return formatDate(dateOrRange.date, intl);\n }\n if (dateOrRange.dateRange) {\n return formatDateRage(dateOrRange.dateRange, intl);\n }\n return '';\n}\n","import * as React from 'react';\nimport flatMap from 'array.prototype.flatmap';\nimport Linkify from 'react-linkify';\nimport {FormattedMessage, InjectedIntl} from 'react-intl';\nimport {GedcomData} from './gedcom_util';\nimport {GedcomEntry} from 'parse-gedcom';\nimport {intlShape} from 'react-intl';\nimport {translateDate} from './date_util';\n\ninterface Props {\n gedcom: GedcomData;\n indi: string;\n}\n\nconst EVENT_TAGS = ['BIRT', 'BAPM', 'CHR', 'DEAT', 'BURI'];\nconst EXCLUDED_TAGS = ['NAME', 'SEX', 'FAMC', 'FAMS', 'NOTE'];\nconst TAG_DESCRIPTIONS = new Map([\n ['BAPM', 'Baptism'],\n ['BIRT', 'Birth'],\n ['BURI', 'Burial'],\n ['CHR', 'Christening'],\n ['DEAT', 'Death'],\n ['EMAIL', 'E-mail'],\n ['OCCU', 'Occupation'],\n ['TITL', 'Title'],\n ['WWW', 'WWW'],\n]);\n\nfunction translateTag(tag: string) {\n return (\n \n );\n}\n\nfunction joinLines(lines: (JSX.Element | string)[]) {\n return (\n <>\n {lines.map((line, index) => (\n
\n {line}\n
\n
\n ))}\n \n );\n}\n\n/**\n * Returns the data for the given GEDCOM entry as an array of lines. Supports\n * continuations with CONT and CONC.\n */\nfunction getData(entry: GedcomEntry) {\n const result = [entry.data];\n entry.tree.forEach((subentry) => {\n if (subentry.tag === 'CONC' && subentry.data) {\n const last = result.length - 1;\n result[last] += subentry.data;\n } else if (subentry.tag === 'CONT' && subentry.data) {\n result.push(subentry.data);\n }\n });\n return result;\n}\n\nfunction eventDetails(entry: GedcomEntry, intl: InjectedIntl) {\n const lines = [];\n const date = entry.tree.find((subentry) => subentry.tag === 'DATE');\n if (date && date.data) {\n lines.push(translateDate(date.data, intl));\n }\n const place = entry.tree.find((subentry) => subentry.tag === 'PLAC');\n if (place && place.data) {\n lines.push(...getData(place));\n }\n entry.tree\n .filter((subentry) => subentry.tag === 'NOTE')\n .forEach((note) =>\n getData(note).forEach((line) => lines.push({line})),\n );\n if (!lines.length) {\n return null;\n }\n return (\n <>\n
{translateTag(entry.tag)}
\n {joinLines(lines)}\n \n );\n}\n\nfunction dataDetails(entry: GedcomEntry) {\n const lines = [];\n if (entry.data) {\n lines.push(...getData(entry));\n }\n entry.tree\n .filter((subentry) => subentry.tag === 'NOTE')\n .forEach((note) =>\n getData(note).forEach((line) => lines.push({line})),\n );\n if (!lines.length) {\n return null;\n }\n return (\n <>\n
{translateTag(entry.tag)}
\n {joinLines(lines)}\n \n );\n}\n\nfunction noteDetails(entry: GedcomEntry) {\n return joinLines(\n getData(entry).map((line, index) => {line}),\n );\n}\n\nfunction nameDetails(entry: GedcomEntry) {\n return (\n

\n {entry.data\n .split('/')\n .filter((name) => !!name)\n .map((name, index) => (\n
\n {name}\n
\n
\n ))}\n

\n );\n}\n\nfunction getDetails(\n entries: GedcomEntry[],\n tags: string[],\n detailsFunction: (entry: GedcomEntry) => JSX.Element | null,\n): JSX.Element[] {\n return flatMap(tags, (tag) =>\n entries\n .filter((entry) => entry.tag === tag)\n .map((entry) => detailsFunction(entry)),\n )\n .filter((element) => element !== null)\n .map((element, index) => (\n
\n {element}\n
\n ));\n}\n\n/**\n * Returns true if there is displayable information in this entry.\n * Returns false if there is no data in this entry or this is only a reference\n * to another entry.\n */\nfunction hasData(entry: GedcomEntry) {\n return entry.tree.length > 0 || (entry.data && !entry.data.startsWith('@'));\n}\n\nfunction getOtherDetails(entries: GedcomEntry[]) {\n return entries\n .filter(\n (entry) =>\n !EXCLUDED_TAGS.includes(entry.tag) && !EVENT_TAGS.includes(entry.tag),\n )\n .filter(hasData)\n .map((entry) => dataDetails(entry))\n .filter((element) => element !== null)\n .map((element, index) => (\n
\n {element}\n
\n ));\n}\n\nexport class Details extends React.Component {\n /** Make intl appear in this.context. */\n static contextTypes = {\n intl: intlShape,\n };\n\n render() {\n const entries = this.props.gedcom.indis[this.props.indi].tree;\n const entriesWithData = entries.filter(hasData);\n\n return (\n
\n {getDetails(entries, ['NAME'], nameDetails)}\n {getDetails(entries, EVENT_TAGS, (entry) =>\n eventDetails(entry, this.context.intl as InjectedIntl),\n )}\n {getOtherDetails(entriesWithData)}\n {getDetails(entriesWithData, ['NOTE'], noteDetails)}\n
\n );\n }\n}\n","import {JsonFam, JsonGedcomData, JsonIndi, gedcomEntriesToJson} from 'topola';\nimport {GedcomEntry, parse as parseGedcom} from 'parse-gedcom';\n\nexport interface GedcomData {\n head: GedcomEntry;\n indis: {[key: string]: GedcomEntry};\n fams: {[key: string]: GedcomEntry};\n}\n\nexport interface TopolaData {\n chartData: JsonGedcomData;\n gedcom: GedcomData;\n}\n\n/**\n * Returns the identifier extracted from a pointer string.\n * E.g. '@I123@' -> 'I123'\n */\nfunction pointerToId(pointer: string): string {\n return pointer.substring(1, pointer.length - 1);\n}\n\nfunction prepareGedcom(entries: GedcomEntry[]): GedcomData {\n const head = entries.find((entry) => entry.tag === 'HEAD')!;\n const indis: {[key: string]: GedcomEntry} = {};\n const fams: {[key: string]: GedcomEntry} = {};\n entries.forEach((entry) => {\n if (entry.tag === 'INDI') {\n indis[pointerToId(entry.pointer)] = entry;\n } else if (entry.tag === 'FAM') {\n fams[pointerToId(entry.pointer)] = entry;\n }\n });\n return {head, indis, fams};\n}\n\nfunction strcmp(a: string, b: string) {\n if (a < b) {\n return -1;\n }\n if (a > b) {\n return 1;\n }\n return 0;\n}\n\n/** Birth date comparator for individuals. */\nfunction birthDatesComparator(gedcom: JsonGedcomData) {\n const idToIndiMap = new Map();\n gedcom.indis.forEach((indi) => {\n idToIndiMap[indi.id] = indi;\n });\n\n return (indiId1: string, indiId2: string) => {\n const idComparison = strcmp(indiId1, indiId2);\n const indi1: JsonIndi = idToIndiMap[indiId1];\n const indi2: JsonIndi = idToIndiMap[indiId2];\n const birth1 = indi1 && indi1.birth;\n const birth2 = indi2 && indi2.birth;\n const date1 =\n birth1 && (birth1.date || (birth1.dateRange && birth1.dateRange.from));\n const date2 =\n birth2 && (birth2.date || (birth2.dateRange && birth2.dateRange.from));\n if (!date1 || !date1.year || !date2 || !date2.year) {\n return idComparison;\n }\n if (date1.year !== date2.year) {\n return date1.year - date2.year;\n }\n if (!date1.month || !date2.month) {\n return idComparison;\n }\n if (date1.month !== date2.month) {\n return date1.month - date2.month;\n }\n if (date1.day && date2.day && date1.day !== date2.day) {\n return date1.month - date2.month;\n }\n return idComparison;\n };\n}\n\n/**\n * Sorts children by birth date in the given family.\n * Does not modify the input objects.\n */\nfunction sortFamilyChildren(\n fam: JsonFam,\n comparator: (id1: string, id2: string) => number,\n): JsonFam {\n if (!fam.children) {\n return fam;\n }\n const newChildren = fam.children.sort(comparator);\n return Object.assign({}, fam, {children: newChildren});\n}\n\n/**\n * Sorts children by birth date.\n * Does not modify the input object.\n */\nfunction sortChildren(gedcom: JsonGedcomData): JsonGedcomData {\n const comparator = birthDatesComparator(gedcom);\n const newFams = gedcom.fams.map((fam) => sortFamilyChildren(fam, comparator));\n return Object.assign({}, gedcom, {fams: newFams});\n}\n\n/**\n * Removes images that are not HTTP links.\n * Does not modify the input object.\n */\nfunction filterImage(indi: JsonIndi, images: Map): JsonIndi {\n if (indi.imageUrl) {\n const fileName = indi.imageUrl.match(/[^/\\\\]*$/)![0];\n if (images.has(fileName)) {\n const newIndi = Object.assign({}, indi);\n newIndi.imageUrl = images.get(fileName);\n return newIndi;\n }\n }\n if (!indi.imageUrl || indi.imageUrl.startsWith('http')) {\n return indi;\n }\n const newIndi = Object.assign({}, indi);\n delete newIndi.imageUrl;\n return newIndi;\n}\n\n/**\n * Removes images that are not HTTP links.\n * Does not modify the input object.\n */\nfunction filterImages(\n gedcom: JsonGedcomData,\n images: Map,\n): JsonGedcomData {\n const newIndis = gedcom.indis.map((indi) => filterImage(indi, images));\n return Object.assign({}, gedcom, {indis: newIndis});\n}\n\n/**\n * Converts GEDCOM file into JSON data performing additional transformations:\n * - sort children by birth date\n * - remove images that are not HTTP links and aren't mapped in `images`.\n *\n * @param images Map from file name to image URL. This is used to pass in\n * uploaded images.\n */\nexport function convertGedcom(\n gedcom: string,\n images: Map,\n): TopolaData {\n const entries = parseGedcom(gedcom);\n const json = gedcomEntriesToJson(entries);\n if (\n !json ||\n !json.indis ||\n !json.indis.length ||\n !json.fams ||\n !json.fams.length\n ) {\n throw new Error('Failed to read GEDCOM file');\n }\n\n return {\n chartData: filterImages(sortChildren(json), images),\n gedcom: prepareGedcom(entries),\n };\n}\n\nexport function getSoftware(head: GedcomEntry): string | null {\n const sour =\n head && head.tree && head.tree.find((entry) => entry.tag === 'SOUR');\n const name =\n sour && sour.tree && sour.tree.find((entry) => entry.tag === 'NAME');\n return (name && name.data) || null;\n}\n","import {convertGedcom, TopolaData} from './gedcom_util';\nimport {IndiInfo, JsonGedcomData} from 'topola';\n\n/**\n * Returns a valid IndiInfo object, either with the given indi and generation\n * or with an individual taken from the data and generation 0.\n */\nexport function getSelection(\n data: JsonGedcomData,\n indi?: string,\n generation?: number,\n): IndiInfo {\n return {\n id: indi || data.indis[0].id,\n generation: generation || 0,\n };\n}\n\nfunction prepareData(\n gedcom: string,\n cacheId: string,\n images?: Map,\n): TopolaData {\n const data = convertGedcom(gedcom, images || new Map());\n const serializedData = JSON.stringify(data);\n try {\n sessionStorage.setItem(cacheId, serializedData);\n } catch (e) {\n console.warn('Failed to store data in session storage: ' + e);\n }\n return data;\n}\n\n/** Fetches data from the given URL. Uses cors-anywhere if handleCors is true. */\nexport async function loadFromUrl(\n url: string,\n handleCors: boolean,\n): Promise {\n try {\n const cachedData = sessionStorage.getItem(url);\n if (cachedData) {\n return JSON.parse(cachedData);\n }\n } catch (e) {\n console.warn('Failed to load data from session storage: ' + e);\n }\n const urlToFetch = handleCors\n ? 'https://cors-anywhere.herokuapp.com/' + url\n : url;\n\n const response = await window.fetch(urlToFetch);\n if (response.status !== 200) {\n throw new Error(response.statusText);\n }\n const gedcom = await response.text();\n return prepareData(gedcom, url);\n}\n\n/** Loads data from the given GEDCOM file contents. */\nexport async function loadGedcom(\n hash: string,\n gedcom?: string,\n images?: Map,\n): Promise {\n try {\n const cachedData = sessionStorage.getItem(hash);\n if (cachedData) {\n return JSON.parse(cachedData);\n }\n } catch (e) {\n console.warn('Failed to load data from session storage: ' + e);\n }\n if (!gedcom) {\n throw new Error('Error loading data. Please upload your file again.');\n }\n return prepareData(gedcom, hash, images);\n}\n","import * as queryString from 'query-string';\nimport * as React from 'react';\nimport {Card} from 'semantic-ui-react';\nimport {FormattedMessage} from 'react-intl';\nimport {Link} from 'react-router-dom';\n\n/** Link that loads a GEDCOM file from URL. */\nfunction GedcomLink(props: {url: string; text: string}) {\n return (\n \n {props.text}\n \n );\n}\n\n/** The intro page. */\nexport function Intro() {\n return (\n \n \n \n \n \n \n \n

\n \n

\n

\n \n

\n

\n \n

\n \n

\n \n \n \n :\n cors-anywhere\n ),\n }}\n />\n

\n \n \n );\n}\n","import naturalSort from 'javascript-natural-sort';\nimport lunr from 'lunr';\nimport {GedcomData} from './gedcom_util';\nimport {GedcomEntry} from 'parse-gedcom';\n\nconst MAX_RESULTS = 8;\n\nexport interface SearchResult {\n id: string;\n indi: GedcomEntry;\n}\n\nexport interface SearchIndex {\n search(input: string): SearchResult[];\n}\n\n/** Removes accents from letters, e.g. ó->o, ę->e. */\nfunction normalize(input: string) {\n return input\n .toLocaleLowerCase()\n .normalize('NFD')\n .replace(/[\\u0300-\\u036f]/g, '')\n .replace(/\\u0142/g, 'l'); // Special case: ł is not affected by NFD.\n}\n\n/** Comparator to sort by score first, then by id. */\nfunction compare(a: lunr.Index.Result, b: lunr.Index.Result) {\n if (a.score !== b.score) {\n return a.score - b.score;\n }\n return naturalSort(a.ref, b.ref);\n}\n\nclass LunrSearchIndex implements SearchIndex {\n private index: lunr.Index;\n\n public constructor(private gedcom: GedcomData) {\n this.index = lunr(function() {\n this.ref('id');\n this.field('id');\n this.field('name');\n this.field('normalizedName');\n\n for (let id in gedcom.indis) {\n const name = gedcom.indis[id].tree\n .filter((entry) => entry.tag === 'NAME')\n .map((entry) => entry.data)\n .join(' ');\n this.add({id, name, normalizedName: normalize(name)});\n }\n });\n }\n\n public search(input: string) {\n const query = input\n .split(' ')\n .filter((s) => !!s)\n .map((s) => `+${s}*`)\n .join(' ');\n const results = this.index.search(query);\n return results\n .sort(compare)\n .slice(0, MAX_RESULTS)\n .map((result) => ({id: result.ref, indi: this.gedcom.indis[result.ref]}));\n }\n}\n\n/** Builds a search index from data. */\nexport function buildSearchIndex(gedcom: GedcomData): SearchIndex {\n return new LunrSearchIndex(gedcom);\n}\n","import * as React from 'react';\nimport {GedcomEntry} from 'parse-gedcom';\nimport {InjectedIntl} from 'react-intl';\nimport {SearchResult} from './search_index';\nimport {translateDate} from './date_util';\n\nfunction getNameLine(result: SearchResult) {\n const nameTag = result.indi.tree.find((entry) => entry.tag === 'NAME');\n const name =\n nameTag &&\n nameTag.data\n .split('/')\n .filter((s) => !!s)\n .join(' ');\n if (result.id.length > 8) {\n return name;\n }\n return (\n <>\n {name} ({result.id})\n \n );\n}\n\nfunction getDate(indi: GedcomEntry, tag: string, intl: InjectedIntl) {\n const eventEntry = indi.tree.find((entry) => entry.tag === tag);\n const dateEntry =\n eventEntry && eventEntry.tree.find((entry) => entry.tag === 'DATE');\n return (dateEntry && translateDate(dateEntry.data, intl)) || '';\n}\n\nfunction getDescriptionLine(indi: GedcomEntry, intl: InjectedIntl) {\n const birthDate = getDate(indi, 'BIRT', intl);\n const deathDate = getDate(indi, 'DEAT', intl);\n if (!deathDate) {\n return birthDate;\n }\n return `${birthDate} – ${deathDate}`;\n}\n\n/** Produces an object that is displayed in the Semantic UI Search results. */\nexport function displaySearchResult(result: SearchResult, intl: InjectedIntl) {\n return {\n id: result.id,\n key: result.id,\n title: getNameLine(result),\n description: getDescriptionLine(result.indi, intl),\n };\n}\n","import * as queryString from 'query-string';\nimport * as React from 'react';\nimport debounce from 'debounce';\nimport md5 from 'md5';\nimport {analyticsEvent} from './analytics';\nimport {buildSearchIndex, SearchIndex, SearchResult} from './search_index';\nimport {displaySearchResult} from './search_util';\nimport {FormattedMessage, intlShape} from 'react-intl';\nimport {GedcomData} from './gedcom_util';\nimport {IndiInfo} from 'topola';\nimport {Link} from 'react-router-dom';\nimport {RouteComponentProps} from 'react-router-dom';\nimport {\n Header,\n Button,\n Icon,\n Menu,\n Modal,\n Input,\n Form,\n Dropdown,\n Search,\n SearchProps,\n} from 'semantic-ui-react';\n\n/** Menus and dialogs state. */\ninterface State {\n loadUrlDialogOpen: boolean;\n url?: string;\n searchResults: SearchResult[];\n}\n\ninterface EventHandlers {\n onSelection: (indiInfo: IndiInfo) => void;\n onPrint: () => void;\n onDownloadPdf: () => void;\n onDownloadPng: () => void;\n onDownloadSvg: () => void;\n}\n\ninterface Props {\n showingChart: boolean;\n gedcom?: GedcomData;\n standalone: boolean;\n eventHandlers: EventHandlers;\n}\n\nfunction loadFileAsText(file: File): Promise {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = (evt: ProgressEvent) => {\n resolve((evt.target as FileReader).result as string);\n };\n reader.readAsText(file);\n });\n}\n\nfunction isImageFileName(fileName: string) {\n const lower = fileName.toLowerCase();\n return lower.endsWith('.jpg') || lower.endsWith('.png');\n}\n\nexport class TopBar extends React.Component<\n RouteComponentProps & Props,\n State\n> {\n state: State = {\n loadUrlDialogOpen: false,\n searchResults: [],\n };\n inputRef?: Input;\n searchRef?: {setValue(value: string): void};\n searchIndex?: SearchIndex;\n\n /** Handles the \"Upload file\" button. */\n async handleUpload(event: React.SyntheticEvent) {\n const files = (event.target as HTMLInputElement).files;\n if (!files || !files.length) {\n return;\n }\n const filesArray = Array.from(files);\n (event.target as HTMLInputElement).value = ''; // Reset the file input.\n analyticsEvent('upload_files_selected', {\n event_value: files.length,\n });\n\n const gedcomFile =\n filesArray.length === 1\n ? filesArray[0]\n : filesArray.find((file) => file.name.toLowerCase().endsWith('.ged')) ||\n filesArray[0];\n\n // Convert uploaded images to object URLs.\n const images = filesArray\n .filter(\n (file) => file.name !== gedcomFile.name && isImageFileName(file.name),\n )\n .map((file) => ({\n name: file.name,\n url: URL.createObjectURL(file),\n }));\n const imageMap = new Map(\n images.map((entry) => [entry.name, entry.url] as [string, string]),\n );\n\n const data = await loadFileAsText(gedcomFile);\n const imageFileNames = images\n .map((image) => image.name)\n .sort()\n .join('|');\n // Hash GEDCOM contents with uploaded image file names.\n const hash = md5(md5(data) + imageFileNames);\n\n // Use history.replace() when reuploading the same file and history.push() when loading\n // a new file.\n const search = queryString.parse(this.props.location.search);\n const historyPush =\n search.file === hash\n ? this.props.history.replace\n : this.props.history.push;\n\n historyPush({\n pathname: '/view',\n search: queryString.stringify({file: hash}),\n state: {data, images: imageMap},\n });\n }\n\n /** Opens the \"Load from URL\" dialog. */\n handleLoadFromUrl() {\n this.setState(\n Object.assign({}, this.state, {loadUrlDialogOpen: true}),\n () => this.inputRef!.focus(),\n );\n }\n\n /** Cancels the \"Load from URL\" dialog. */\n handleClose() {\n this.setState(Object.assign({}, this.state, {loadUrlDialogOpen: false}));\n }\n\n /** Upload button clicked in the \"Load from URL\" dialog. */\n handleLoad() {\n this.setState(\n Object.assign({}, this.state, {\n loadUrlDialogOpen: false,\n }),\n );\n if (this.state.url) {\n analyticsEvent('url_selected');\n this.props.history.push({\n pathname: '/view',\n search: queryString.stringify({url: this.state.url}),\n });\n }\n }\n\n /** Called when the URL input is typed into. */\n handleUrlChange(event: React.SyntheticEvent) {\n this.setState(\n Object.assign({}, this.state, {\n url: (event.target as HTMLInputElement).value,\n }),\n );\n }\n\n /** On search input change. */\n handleSearch(input: string | undefined) {\n if (!input) {\n return;\n }\n const results = this.searchIndex!.search(input).map((result) =>\n displaySearchResult(result, this.context.intl),\n );\n this.setState(Object.assign({}, this.state, {searchResults: results}));\n }\n\n /** On search result selected. */\n handleResultSelect(id: string) {\n analyticsEvent('search_result_selected');\n this.props.eventHandlers.onSelection({id, generation: 0});\n this.searchRef!.setValue('');\n }\n\n initializeSearchIndex() {\n if (this.props.gedcom) {\n this.searchIndex = buildSearchIndex(this.props.gedcom);\n }\n }\n\n changeView(view: string) {\n const location = this.props.location;\n const search = queryString.parse(location.search);\n if (search.view !== view) {\n search.view = view;\n location.search = queryString.stringify(search);\n this.props.history.push(location);\n }\n }\n\n componentDidMount() {\n this.initializeSearchIndex();\n }\n\n componentDidUpdate(prevProps: Props) {\n if (prevProps.gedcom !== this.props.gedcom) {\n this.initializeSearchIndex();\n }\n }\n\n /** Make intl appear in this.context. */\n static contextTypes = {\n intl: intlShape,\n };\n\n render() {\n const loadFromUrlModal = (\n this.handleClose()}\n centered={false}\n >\n
\n \n txt}\n />\n
\n \n
this.handleLoad()}>\n this.handleUrlChange(e)}\n ref={(ref) => (this.inputRef = ref!)}\n />\n

\n \n cors-anywhere.herokuapp.com\n \n ),\n }}\n />\n

\n \n
\n \n \n \n \n \n );\n\n const chartMenus = this.props.showingChart ? (\n <>\n this.props.eventHandlers.onPrint()}>\n \n \n \n\n \n \n \n \n }\n className=\"item\"\n >\n \n this.props.eventHandlers.onDownloadPdf()}\n >\n \n \n this.props.eventHandlers.onDownloadPng()}\n >\n \n \n this.props.eventHandlers.onDownloadSvg()}\n >\n \n \n \n \n\n \n \n \n \n }\n className=\"item\"\n >\n \n this.changeView('hourglass')}>\n \n \n \n this.changeView('relatives')}>\n \n \n \n this.changeView('fancy')}>\n \n \n \n \n \n\n , data: SearchProps) =>\n this.handleSearch(data.value),\n 200,\n )}\n onResultSelect={(_, data) => this.handleResultSelect(data.result.id)}\n results={this.state.searchResults}\n noResultsMessage={this.context.intl.formatMessage({\n id: 'menu.search.no_results',\n defaultMessage: 'No results found',\n })}\n placeholder={this.context.intl.formatMessage({\n id: 'menu.search.placeholder',\n defaultMessage: 'Search for people',\n })}\n selectFirstResult={true}\n ref={(ref) =>\n (this.searchRef = (ref as unknown) as {\n setValue(value: string): void;\n })\n }\n />\n \n ) : null;\n\n const fileMenus = this.props.standalone ? (\n <>\n \n \n Topola Genealogy\n \n \n this.handleLoadFromUrl()}>\n \n \n \n this.handleUpload(e)}\n />\n \n \n ) : null;\n\n const sourceLink = this.props.standalone ? (\n <>\n \n \n \n \n ) : (\n <>\n \n \n \n \n );\n\n return (\n \n {fileMenus}\n {chartMenus}\n {sourceLink}\n {loadFromUrlModal}\n \n );\n }\n}\n","import * as queryString from 'query-string';\nimport * as React from 'react';\nimport {analyticsEvent} from './analytics';\nimport {Chart, ChartType} from './chart';\nimport {Details} from './details';\nimport {FormattedMessage} from 'react-intl';\nimport {getSelection, loadFromUrl, loadGedcom} from './load_data';\nimport {getSoftware, TopolaData} from './gedcom_util';\nimport {IndiInfo} from 'topola';\nimport {intlShape} from 'react-intl';\nimport {Intro} from './intro';\nimport {Loader, Message, Portal, Responsive} from 'semantic-ui-react';\nimport {Redirect, Route, RouteComponentProps, Switch} from 'react-router-dom';\nimport {TopBar} from './top_bar';\n\n/** Shows an error message in the middle of the screen. */\nfunction ErrorMessage(props: {message?: string}) {\n return (\n \n \n \n \n

{props.message}

\n \n );\n}\n\ninterface ErrorPopupProps {\n message?: string;\n open: boolean;\n onDismiss: () => void;\n}\n\n/**\n * Shows a dismissable error message in the bottom left corner of the screen.\n */\nfunction ErrorPopup(props: ErrorPopupProps) {\n return (\n \n \n \n \n \n

{props.message}

\n \n \n );\n}\n\n/**\n * Message types used in embedded mode.\n * When the parent is ready to receive messages, it sends PARENT_READY.\n * When the child (this app) is ready to receive messages, it sends READY.\n * When the child receives PARENT_READY, it sends READY.\n * When the parent receives READY, it sends data in a GEDCOM message.\n */\nenum EmbeddedMessageType {\n GEDCOM = 'gedcom',\n READY = 'ready',\n PARENT_READY = 'parent_ready',\n}\n\n/** Message sent to parent or received from parent in embedded mode. */\ninterface EmbeddedMessage {\n message: EmbeddedMessageType;\n}\n\ninterface GedcomMessage extends EmbeddedMessage {\n message: EmbeddedMessageType.GEDCOM;\n gedcom?: string;\n}\n\ninterface State {\n /** Loaded data. */\n data?: TopolaData;\n /** Selected individual. */\n selection?: IndiInfo;\n /** Hash of the GEDCOM contents. */\n hash?: string;\n /** Error to display. */\n error?: string;\n /** True if data is currently being loaded. */\n loading: boolean;\n /** URL of the data that is loaded or is being loaded. */\n url?: string;\n /** Whether the side panel is shown. */\n showSidePanel?: boolean;\n /** Whether the app is in embedded mode, i.e. embedded in an iframe. */\n embedded: boolean;\n /** Whether the app is in standalone mode, i.e. showing 'open file' menus. */\n standalone: boolean;\n /** Type of displayed chart. */\n chartType: ChartType;\n /** Whether to show the error popup. */\n showErrorPopup: boolean;\n}\n\nexport class App extends React.Component {\n state: State = {\n loading: false,\n embedded: false,\n standalone: true,\n chartType: ChartType.Hourglass,\n showErrorPopup: false,\n };\n chartRef: Chart | null = null;\n\n /** Make intl appear in this.context. */\n static contextTypes = {\n intl: intlShape,\n };\n\n private isNewData(\n hash: string | undefined,\n url: string | undefined,\n gedcom: string | undefined,\n ): boolean {\n return (\n !!(hash && hash !== this.state.hash) ||\n !!(url && this.state.url !== url) ||\n (!!gedcom && !this.state.loading && !this.state.data)\n );\n }\n\n /** Sets the state with a new individual selection and chart type. */\n private updateDisplay(selection: IndiInfo, chartType?: ChartType) {\n if (\n !this.state.selection ||\n this.state.selection.id !== selection.id ||\n this.state.selection!.generation !== selection.generation ||\n (chartType !== undefined && chartType !== this.state.chartType)\n ) {\n this.setState(\n Object.assign({}, this.state, {\n selection,\n chartType: chartType !== undefined ? chartType : this.state.chartType,\n }),\n );\n }\n }\n\n /** Sets error message after data load failure. */\n private setError(error: string) {\n this.setState(\n Object.assign({}, this.state, {\n error: error,\n loading: false,\n }),\n );\n }\n\n private async onMessage(message: EmbeddedMessage) {\n if (message.message === EmbeddedMessageType.PARENT_READY) {\n // Parent didn't receive the first 'ready' message, so we need to send it again.\n window.parent.postMessage({message: EmbeddedMessageType.READY}, '*');\n } else if (message.message === EmbeddedMessageType.GEDCOM) {\n const gedcom = (message as GedcomMessage).gedcom;\n if (!gedcom) {\n return;\n }\n try {\n const data = await loadGedcom('', gedcom);\n const software = getSoftware(data.gedcom.head);\n analyticsEvent('embedded_file_loaded', {\n event_label: software,\n });\n // Set state with data.\n this.setState(\n Object.assign({}, this.state, {\n data,\n selection: getSelection(data.chartData),\n error: undefined,\n loading: false,\n }),\n );\n } catch (error) {\n analyticsEvent('embedded_file_error');\n this.setError(error.message);\n }\n }\n }\n\n componentDidMount() {\n this.componentDidUpdate();\n }\n\n async componentDidUpdate() {\n if (this.props.location.pathname !== '/view') {\n return;\n }\n\n const search = queryString.parse(this.props.location.search);\n const getParam = (name: string) => {\n const value = search[name];\n return typeof value === 'string' ? value : undefined;\n };\n\n const showSidePanel = getParam('sidePanel') !== 'false'; // True by default.\n const embedded = getParam('embedded') === 'true'; // False by default.\n\n if (embedded && !this.state.embedded) {\n this.setState(\n Object.assign({}, this.state, {\n embedded: true,\n standalone: false,\n showSidePanel,\n }),\n );\n // Notify the parent window that we are ready.\n window.parent.postMessage('ready', '*');\n window.addEventListener('message', (data) => this.onMessage(data.data));\n }\n if (embedded) {\n // If the app is embedded, do not run the normal loading code.\n return;\n }\n\n const url = getParam('url');\n const indi = getParam('indi');\n const parsedGen = Number(getParam('gen'));\n const generation = !isNaN(parsedGen) ? parsedGen : undefined;\n const hash = getParam('file');\n const handleCors = getParam('handleCors') !== 'false'; // True by default.\n const standalone = getParam('standalone') !== 'false'; // True by default.\n const view = getParam('view');\n\n const chartTypes = new Map([\n ['relatives', ChartType.Relatives],\n ['fancy', ChartType.Fancy],\n ]);\n // Hourglass is the default view.\n const chartType = chartTypes.get(view) || ChartType.Hourglass;\n\n const gedcom = this.props.location.state && this.props.location.state.data;\n const images =\n this.props.location.state && this.props.location.state.images;\n\n if (!url && !hash) {\n this.props.history.replace({pathname: '/'});\n } else if (this.isNewData(hash, url, gedcom)) {\n try {\n // Set loading state.\n this.setState(\n Object.assign({}, this.state, {\n data: undefined,\n selection: undefined,\n hash,\n error: undefined,\n loading: true,\n url,\n standalone,\n chartType,\n }),\n );\n const data = hash\n ? await loadGedcom(hash, gedcom, images)\n : await loadFromUrl(url!, handleCors);\n\n const software = getSoftware(data.gedcom.head);\n analyticsEvent(hash ? 'upload_file_loaded' : 'url_file_loaded', {\n event_label: software,\n event_value: (images && images.size) || 0,\n });\n\n // Set state with data.\n this.setState(\n Object.assign({}, this.state, {\n data,\n hash,\n selection: getSelection(data.chartData, indi, generation),\n error: undefined,\n loading: false,\n url,\n showSidePanel,\n standalone,\n chartType,\n }),\n );\n } catch (error) {\n analyticsEvent(hash ? 'upload_file_error' : 'url_file_error');\n this.setError(error.message);\n }\n } else if (this.state.data && this.state.selection) {\n // Update selection if it has changed in the URL.\n const selection = getSelection(\n this.state.data.chartData,\n indi,\n generation,\n );\n this.updateDisplay(selection, chartType);\n }\n }\n\n /**\n * Called when the user clicks an individual box in the chart.\n * Updates the browser URL.\n */\n private onSelection = (selection: IndiInfo) => {\n analyticsEvent('selection_changed');\n if (this.state.embedded) {\n // In embedded mode the URL doesn't change.\n this.updateDisplay(selection);\n return;\n }\n const location = this.props.location;\n const search = queryString.parse(location.search);\n search.indi = selection.id;\n search.gen = String(selection.generation);\n location.search = queryString.stringify(search);\n this.props.history.push(location);\n };\n\n private onPrint = () => {\n analyticsEvent('print');\n this.chartRef && this.chartRef.print();\n };\n\n private showErrorPopup(message: string) {\n this.setState(\n Object.assign({}, this.state, {\n showErrorPopup: true,\n error: message,\n }),\n );\n }\n\n private onDownloadPdf = async () => {\n analyticsEvent('download_pdf');\n try {\n this.chartRef && (await this.chartRef.downloadPdf());\n } catch (e) {\n this.showErrorPopup(\n this.context.intl.formatMessage({\n id: 'error.failed_pdf',\n defaultMessage:\n 'Failed to generate PDF file.' +\n ' Please try with a smaller diagram or download an SVG file.',\n }),\n );\n }\n };\n\n private onDownloadPng = async () => {\n analyticsEvent('download_png');\n try {\n this.chartRef && (await this.chartRef.downloadPng());\n } catch (e) {\n this.showErrorPopup(\n this.context.intl.formatMessage({\n id: 'error.failed_png',\n defaultMessage:\n 'Failed to generate PNG file.' +\n ' Please try with a smaller diagram or download an SVG file.',\n }),\n );\n }\n };\n\n private onDownloadSvg = () => {\n analyticsEvent('download_svg');\n this.chartRef && this.chartRef.downloadSvg();\n };\n\n onDismissErrorPopup = () => {\n this.setState(\n Object.assign({}, this.state, {\n showErrorPopup: false,\n }),\n );\n };\n\n private renderMainArea = () => {\n if (this.state.data && this.state.selection) {\n return (\n
\n \n (this.chartRef = ref)}\n />\n {this.state.showSidePanel ? (\n \n \n \n ) : null}\n
\n );\n }\n if (this.state.error) {\n return ;\n }\n return ;\n };\n\n render() {\n return (\n <>\n (\n \n )}\n />\n \n \n \n \n \n \n );\n }\n}\n","import * as locale_en from 'react-intl/locale-data/en';\nimport * as locale_pl from 'react-intl/locale-data/pl';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport messages_pl from './translations/pl.json';\nimport {addLocaleData} from 'react-intl';\nimport {App} from './app';\nimport {detect} from 'detect-browser';\nimport {HashRouter as Router, Route} from 'react-router-dom';\nimport {IntlProvider} from 'react-intl';\nimport './index.css';\nimport 'semantic-ui-css/semantic.min.css';\nimport 'canvas-toBlob';\n\naddLocaleData([...locale_en, ...locale_pl]);\n\nconst messages = {\n pl: messages_pl,\n};\nconst language = navigator.language && navigator.language.split(/[-_]/)[0];\n\nconst browser = detect();\n\nif (browser && browser.name === 'ie') {\n ReactDOM.render(\n

\n Topola Genealogy Viewer does not support Internet Explorer. Please try a\n different browser.\n

,\n document.querySelector('#root'),\n );\n} else {\n ReactDOM.render(\n \n \n \n \n ,\n document.querySelector('#root'),\n );\n}\n"],"sourceRoot":""} \ No newline at end of file diff --git a/static/js/main.d5740996.chunk.js b/static/js/main.d5740996.chunk.js deleted file mode 100644 index 9234874..0000000 --- a/static/js/main.d5740996.chunk.js +++ /dev/null @@ -1,2 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{250:function(e){e.exports={"menu.load_from_url":"Otw\xf3rz URL","menu.load_from_file":"Otw\xf3rz plik","menu.print":"Drukuj","menu.download":"Pobierz","menu.pdf_file":"Plik PDF","menu.png_file":"Plik PNG","menu.svg_file":"Plik SVG","menu.view":"Widok","menu.hourglass":"Wykres klepsydrowy","menu.relatives":"Wszyscy krewni","menu.fancy":"Ozdobne drzewo (eksperymentalne)","menu.github":"\u0179r\xf3d\u0142a na GitHub","menu.powered_by":"Topola Genealogy","menu.search.placeholder":"Szukaj osoby","menu.search.no_results":"Brak wynik\xf3w","intro.title":"Topola Genealogy","intro.description":"Topola Genealogy pozwala przegl\u0105da\u0107 drzewo genealogiczne w interaktywny spos\xf3b.","intro.instructions":"Kliknij OTW\xd3RZ URL lub OTW\xd3RZ PLIK, aby za\u0142adowa\u0107 plik GEDCOM. Wi\u0119kszo\u015b\u0107 program\xf3w genealogicznych posiada funkcj\u0119 eksportu do pliku GEDCOM.","intro.examples":"Poni\u017cej jest kilka przyk\u0142ad\xf3w znalezionych w Internecie:","intro.from":"\u017ar\xf3d\u0142o:","intro.privacy":"Prywatno\u015b\u0107","intro.privacy_note":'U\u017cywaj\u0105c funkcji "Otw\xf3rz plik", Twoje dane nie s\u0105 nigdzie wysy\u0142ane i pozostaj\u0105 na Twoim komputerze. U\u017cywaj\u0105c funkcji "Otw\xf3rz URL", dane z podanego adresu przesy\u0142ane s\u0105 przez us\u0142ug\u0119 {link} w celu umo\u017cliwienia za\u0142adowania danych z innej domeny (CORS).',"load_from_url.title":"Otw\xf3rz z adresu URL","load_from_url.comment":"Dane z podanego adresu URL zostan\u0105 za\u0142adowane poprzez us\u0142ug\u0119 {link} w celu unikni\u0119cia problem\xf3w z CORS.","load_from_url.cancel":"Anuluj","load_from_url.load":"Otw\xf3rz","gedcom.BAPM":"Chrzest","gedcom.BIRT":"Narodziny","gedcom.BURI":"Pogrzeb","gedcom.CHR":"Chrzest","gedcom.DEAT":"\u015amier\u0107","gedcom.EMAIL":"E-mail","gedcom.OCCU":"Zaw\xf3d","gedcom.TITL":"Tytu\u0142","gedcom.WWW":"Strona WWW","date.abt":"oko\u0142o","date.cal":"wyliczone","date.est":"oszacowane","date.between":"mi\u0119dzy {from} a {to}","date.after":"po {from}","date.before":"przed {to}","error.error":"B\u0142\u0105d","error.failed_pdf":"Nie uda\u0142o si\u0119 utworzy\u0107 pliku PDF. Spr\xf3buj jeszcze raz z mniejszym diagramem lub pobierz plik SVG.","error.failed_png":"Nie uda\u0142o si\u0119 utworzy\u0107 pliku PNG. Spr\xf3buj jeszcze raz z mniejszym diagramem lub pobierz plik SVG.","error.failed_to_load_file":"B\u0142\u0105d wczytywania pliku"}},251:function(e,t){},294:function(e,t,n){e.exports=n(525)},306:function(e,t){},312:function(e,t){},522:function(e,t,n){},525:function(e,t,n){"use strict";n.r(t);var a=n(76),r=n(248),o=n(249),i=n(0),s=n(63),l=n(250),c=n(15),u=n(16),d=n.n(u),f=n(24),m=n(29),p=n(30),h=n(40),g=n(37),v=n(39),w=n(32);function y(e,t){window.gtag("event",e,t)}var E,b=n(18),k=n(253),O=n.n(k),x=n(164),j=n(33);function R(){var e=b.select("#chart").node().parentElement;e.scrollLeft=-b.event.transform.x,e.scrollTop=-b.event.transform.y}function M(){var e=b.select("#chart").node().parentElement,t=e.scrollLeft+e.clientWidth/2,n=e.scrollTop+e.clientHeight/2;b.select(e).call(b.zoom().translateTo,t,n)}function C(e){var t=new FileReader;return t.readAsDataURL(e),new Promise(function(e,n){t.onload=function(t){return e(t.target.result)}})}function S(e){return _.apply(this,arguments)}function _(){return(_=Object(f.a)(d.a.mark(function e(t){var n,a,r,o;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(n=t.href.baseVal){e.next=3;break}return e.abrupt("return");case 3:return e.prev=3,e.next=6,fetch(n);case 6:return a=e.sent,e.next=9,a.blob();case 9:return r=e.sent,e.next=12,C(r);case 12:o=e.sent,t.href.baseVal=o,e.next=19;break;case 16:e.prev=16,e.t0=e.catch(3),console.warn("Failed to load image:",e.t0);case 19:case"end":return e.stop()}},e,null,[[3,16]])}))).apply(this,arguments)}function z(e){return D.apply(this,arguments)}function D(){return(D=Object(f.a)(d.a.mark(function e(t){var n;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return n=Array.from(t.getElementsByTagName("image")),e.next=3,Promise.all(n.map(S));case 3:case"end":return e.stop()}},e)}))).apply(this,arguments)}function T(e){var t=new Image;return t.src=URL.createObjectURL(e),new Promise(function(e,n){t.addEventListener("load",function(){return e(t)})})}function P(e){var t=document.createElement("canvas");t.width=2*e.width,t.height=2*e.height;var n=t.getContext("2d"),a=n.fillStyle;return n.fillStyle="white",n.fillRect(0,0,t.width,t.height),n.fillStyle=a,n.drawImage(e,0,0,t.width,t.height),t}function N(e,t){return new Promise(function(n,a){e.toBlob(function(e){e?n(e):a()},t)})}!function(e){e[e.Hourglass=0]="Hourglass",e[e.Relatives=1]="Relatives",e[e.Fancy=2]="Fancy"}(E||(E={}));var I=function(e){function t(){var e,n;Object(m.a)(this,t);for(var a=arguments.length,r=new Array(a),o=0;o0&&void 0!==arguments[0]?arguments[0]:{initialRender:!1};t.initialRender&&(b.select("#chart").node().innerHTML="",this.chart=Object(j.createChart)({json:this.props.data,chartType:this.getChartType(),renderer:this.getRendererType(),svgSelector:"#chart",indiCallback:function(t){return e.props.onSelection(t)},animate:!0,updateSvgSize:!1,locale:this.context.intl.locale}));var n=this.chart.render({startIndi:this.props.selection.id,baseGeneration:this.props.selection.generation}),a=b.select("#chart"),r=a.node().parentElement;b.select(r).on("scroll",M).call(b.zoom().scaleExtent([1,1]).translateExtent([[0,0],n.size]).on("zoom",R));var o,i,s=r.clientWidth/2-n.origin[0],l=r.clientHeight/2-n.origin[1],c=b.max([0,(r.clientWidth-n.size[0])/2]),u=b.max([0,(r.clientHeight-n.size[1])/2]),d=a.transition().delay(200).duration(500);(t.initialRender?a:d).attr("transform","translate(".concat(c,", ").concat(u,")")).attr("width",n.size[0]).attr("height",n.size[1]),t.initialRender?(r.scrollLeft=-s,r.scrollTop=-l):d.tween("scrollLeft",(i=-s,function(){var e=b.interpolateNumber(r.scrollLeft,i);return function(t){r.scrollLeft=e(t)}})).tween("scrollTop",(o=-l,function(){var e=b.interpolateNumber(r.scrollTop,o);return function(t){r.scrollTop=e(t)}}))}},{key:"componentDidMount",value:function(){this.renderChart({initialRender:!0})}},{key:"componentDidUpdate",value:function(e){var t=this.props.data!==e.data||this.props.chartType!==e.chartType;this.renderChart({initialRender:t})}},{key:"render",value:function(){return i.createElement("div",{id:"svgContainer"},i.createElement("svg",{id:"chart"}))}},{key:"getSvgContents",value:function(){var e=document.getElementById("chart").cloneNode(!0);return e.removeAttribute("transform"),(new XMLSerializer).serializeToString(e)}},{key:"getSvgContentsWithInlinedImages",value:function(){var e=Object(f.a)(d.a.mark(function e(){var t;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return(t=document.getElementById("chart").cloneNode(!0)).removeAttribute("transform"),e.next=4,z(t);case 4:return e.abrupt("return",(new XMLSerializer).serializeToString(t));case 5:case"end":return e.stop()}},e)}));return function(){return e.apply(this,arguments)}}()},{key:"print",value:function(){var e=this,t=document.createElement("iframe");t.style.position="absolute",t.style.top="-1000px",t.style.left="-1000px",t.onload=function(){t.contentDocument.open(),t.contentDocument.write(e.getSvgContents()),t.contentDocument.close(),setTimeout(function(){t.contentWindow.focus(),t.contentWindow.print(),t.parentNode.removeChild(t)},500)},document.body.appendChild(t)}},{key:"downloadSvg",value:function(){var e=Object(f.a)(d.a.mark(function e(){var t,n;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,this.getSvgContentsWithInlinedImages();case 2:t=e.sent,n=new Blob([t],{type:"image/svg+xml"}),Object(x.saveAs)(n,"topola.svg");case 5:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()},{key:"drawOnCanvas",value:function(){var e=Object(f.a)(d.a.mark(function e(){var t,n;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,this.getSvgContentsWithInlinedImages();case 2:return t=e.sent,n=new Blob([t],{type:"image/svg+xml"}),e.t0=P,e.next=7,T(n);case 7:return e.t1=e.sent,e.next=10,(0,e.t0)(e.t1);case 10:return e.abrupt("return",e.sent);case 11:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()},{key:"downloadPng",value:function(){var e=Object(f.a)(d.a.mark(function e(){var t,n;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,this.drawOnCanvas();case 2:return t=e.sent,e.next=5,N(t,"image/png");case 5:n=e.sent,Object(x.saveAs)(n,"topola.png");case 7:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()},{key:"downloadPdf",value:function(){var e=Object(f.a)(d.a.mark(function e(){var t,n;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,this.drawOnCanvas();case 2:t=e.sent,(n=new O.a({orientation:t.width>t.height?"l":"p",unit:"pt",format:[t.width,t.height]})).addImage(t,"PNG",0,0,t.width,t.height,"NONE"),n.save("topola.pdf");case 6:case"end":return e.stop()}},e,this)}));return function(){return e.apply(this,arguments)}}()}]),t}(i.PureComponent);I.contextTypes={intl:c.d};var L=n(255),U=n.n(L),A=n(256),F=n.n(A),W=new Map([["abt","about"],["cal","calculated"],["est","estimated"]]);function H(e,t){var n=void 0!==e.day,a=void 0!==e.month,r=void 0!==e.year;if(!n&&!a&&!r)return e.text||"";var o=new Date(r?e.year:0,a?e.month-1:0,n?e.day:1),i=e.qualifier&&e.qualifier.toLowerCase(),s={day:n?"numeric":void 0,month:a?"long":void 0,year:r?"numeric":void 0};return[i&&t.formatMessage({id:"date.".concat(i),defaultMessage:W.get(i)||i}),new Intl.DateTimeFormat(t.locale,s).format(o)].join(" ")}function G(e,t){var n=Object(j.getDate)(e);return n?n.date?H(n.date,t):n.dateRange?function(e,t){var n=e.from,a=e.to,r=n&&H(n,t),o=a&&H(a,t);return r&&o?t.formatMessage({id:"date.between",defaultMessage:"between {from} and {to}"},{from:r,to:o}):r?t.formatMessage({id:"date.after",defaultMessage:"after {from}"},{from:r}):o?t.formatMessage({id:"date.before",defaultMessage:"before {to}"},{to:o}):""}(n.dateRange,t):"":""}var B=["BIRT","BAPM","CHR","DEAT","BURI"],V=["NAME","SEX","FAMC","FAMS","SOUR","NOTE"],J=new Map([["BAPM","Baptism"],["BIRT","Birth"],["BURI","Burial"],["CHR","Christening"],["DEAT","Death"],["EMAIL","E-mail"],["OCCU","Occupation"],["TITL","Title"],["WWW","WWW"]]);function Y(e){return i.createElement(c.a,{id:"gedcom.".concat(e),defaultMessage:J.get(e)||e})}function q(e){return i.createElement(i.Fragment,null,e.map(function(e,t){return i.createElement("div",{key:t},i.createElement(F.a,{properties:{target:"_blank"}},e),i.createElement("br",null))}))}function K(e){var t=[e.data];return e.tree.forEach(function(e){if("CONC"===e.tag&&e.data){var n=t.length-1;t[n]+=e.data}else"CONT"===e.tag&&e.data&&t.push(e.data)}),t}function X(e){return q(K(e).map(function(e,t){return i.createElement("i",{key:t},e)}))}function Z(e){return i.createElement("h2",{className:"ui header"},e.data.split("/").filter(function(e){return!!e}).map(function(e,t){return i.createElement("div",{key:t},e,i.createElement("br",null))}))}function $(e,t,n){return U()(t,function(t){return e.filter(function(e){return e.tag===t}).map(function(e){return n(e)})}).filter(function(e){return null!==e}).map(function(e,t){return i.createElement("div",{className:"ui segment",key:t},e)})}function Q(e){return e.filter(function(e){return!V.includes(e.tag)&&!B.includes(e.tag)}).map(function(e){return function(e){var t=[];return e.data&&t.push.apply(t,Object(a.a)(K(e))),e.tree.filter(function(e){return"NOTE"===e.tag}).forEach(function(e){return K(e).forEach(function(e){return t.push(i.createElement("i",null,e))})}),t.length?i.createElement(i.Fragment,null,i.createElement("div",{className:"ui sub header"},Y(e.tag)),i.createElement("span",null,q(t))):null}(e)}).filter(function(e){return null!==e}).map(function(e,t){return i.createElement("div",{className:"ui segment",key:t},e)})}var ee=function(e){function t(){return Object(m.a)(this,t),Object(h.a)(this,Object(g.a)(t).apply(this,arguments))}return Object(v.a)(t,e),Object(p.a)(t,[{key:"render",value:function(){var e=this,t=this.props.gedcom.indis[this.props.indi].tree;return i.createElement("div",{className:"ui segments",id:"details"},$(t,["NAME"],Z),$(t,B,function(t){return function(e,t){var n=[],r=e.tree.find(function(e){return"DATE"===e.tag});r&&r.data&&n.push(G(r.data,t));var o=e.tree.find(function(e){return"PLAC"===e.tag});return o&&o.data&&n.push.apply(n,Object(a.a)(K(o))),e.tree.filter(function(e){return"NOTE"===e.tag}).forEach(function(e){return K(e).forEach(function(e){return n.push(i.createElement("i",null,e))})}),n.length?i.createElement(i.Fragment,null,i.createElement("div",{className:"ui sub header"},Y(e.tag)),i.createElement("span",null,q(n))):null}(t,e.context.intl)}),Q(t),$(t,["NOTE"],X))}}]),t}(i.Component);ee.contextTypes={intl:c.d};var te=n(160);function ne(e){return e.substring(1,e.length-1)}function ae(e){var t=e.find(function(e){return"HEAD"===e.tag}),n={},a={};return e.forEach(function(e){"INDI"===e.tag?n[ne(e.pointer)]=e:"FAM"===e.tag&&(a[ne(e.pointer)]=e)}),{head:t,indis:n,fams:a}}function re(e){var t=function(e){var t=new Map;return e.indis.forEach(function(e){t[e.id]=e}),function(e,n){var a,r,o=(a=e)<(r=n)?-1:a>r?1:0,i=t[e],s=t[n],l=i&&i.birth,c=s&&s.birth,u=l&&(l.date||l.dateRange&&l.dateRange.from),d=c&&(c.date||c.dateRange&&c.dateRange.from);return u&&u.year&&d&&d.year?u.year!==d.year?u.year-d.year:u.month&&d.month?u.month!==d.month?u.month-d.month:u.day&&d.day&&u.day!==d.day?u.month-d.month:o:o:o}}(e),n=e.fams.map(function(e){return function(e,t){if(!e.children)return e;var n=e.children.sort(t);return Object.assign({},e,{children:n})}(e,t)});return Object.assign({},e,{fams:n})}function oe(e,t){var n=e.indis.map(function(e){return function(e,t){if(e.imageUrl){var n=e.imageUrl.match(/[^\/\\]*$/)[0];if(t.has(n)){var a=Object.assign({},e);return a.imageUrl=t.get(n),a}}if(!e.imageUrl||e.imageUrl.startsWith("http"))return e;var r=Object.assign({},e);return delete r.imageUrl,r}(e,t)});return Object.assign({},e,{indis:n})}function ie(e){var t=e&&e.tree&&e.tree.find(function(e){return"SOUR"===e.tag}),n=t&&t.tree&&t.tree.find(function(e){return"NAME"===e.tag});return n&&n.data||null}function se(e,t,n){return{id:t||e.indis[0].id,generation:n||0}}function le(e,t,n){var a=function(e,t){var n=Object(te.parse)(e),a=Object(j.gedcomEntriesToJson)(n);if(!a||!a.indis||!a.indis.length||!a.fams||!a.fams.length)throw new Error("Failed to read GEDCOM file");return{chartData:oe(re(a),t),gedcom:ae(n)}}(e,n||new Map),r=JSON.stringify(a);try{sessionStorage.setItem(t,r)}catch(o){console.warn("Failed to store data in session storage: "+o)}return a}function ce(e,t){return ue.apply(this,arguments)}function ue(){return(ue=Object(f.a)(d.a.mark(function e(t,n){var a,r,o,i;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(e.prev=0,!(a=sessionStorage.getItem(t))){e.next=4;break}return e.abrupt("return",JSON.parse(a));case 4:e.next=9;break;case 6:e.prev=6,e.t0=e.catch(0),console.warn("Failed to load data from session storage: "+e.t0);case 9:return r=n?"https://cors-anywhere.herokuapp.com/"+t:t,e.next=12,window.fetch(r);case 12:if(200===(o=e.sent).status){e.next=15;break}throw new Error(o.statusText);case 15:return e.next=17,o.text();case 17:return i=e.sent,e.abrupt("return",le(i,t));case 19:case"end":return e.stop()}},e,null,[[0,6]])}))).apply(this,arguments)}function de(e,t,n){return fe.apply(this,arguments)}function fe(){return(fe=Object(f.a)(d.a.mark(function e(t,n,a){var r;return d.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(e.prev=0,!(r=sessionStorage.getItem(t))){e.next=4;break}return e.abrupt("return",JSON.parse(r));case 4:e.next=9;break;case 6:e.prev=6,e.t0=e.catch(0),console.warn("Failed to load data from session storage: "+e.t0);case 9:if(n){e.next=11;break}throw new Error("Error loading data. Please upload your file again.");case 11:return e.abrupt("return",le(n,t,a));case 12:case"end":return e.stop()}},e,null,[[0,6]])}))).apply(this,arguments)}var me=n(540),pe=n(533);function he(e){return i.createElement(pe.a,{to:{pathname:"/view",search:w.stringify({url:e.url})}},e.text)}function ge(){return i.createElement(me.a,{className:"intro"},i.createElement(me.a.Content,null,i.createElement(me.a.Header,null,i.createElement(c.a,{id:"intro.title",defaultMessage:"Topola Genealogy Viewer"}))),i.createElement(me.a.Content,null,i.createElement("p",null,i.createElement(c.a,{id:"intro.description",defaultMessage:"Topola Genealogy is a genealogy tree viewer that lets you browse the structure of the family."})),i.createElement("p",null,i.createElement(c.a,{id:"intro.instructions",defaultMessage:"Use the LOAD FROM URL or LOAD FROM FILE buttons above to load a GEDCOM file. You can export a GEDCOM file from most of the existing genealogy programs and web sites."})),i.createElement("p",null,i.createElement(c.a,{id:"intro.examples",defaultMessage:"Here are some examples from the web that you can view:"})),i.createElement("ul",null,i.createElement("li",null,i.createElement(he,{url:"http://genpol.com/module-Downloads-prep_hand_out-lid-32.html",text:"Karol Wojty\u0142a"})," ","(",i.createElement(c.a,{id:"intro.from",defaultMessage:"from"})," ",i.createElement("a",{href:"http://genpol.com/module-Downloads-display-lid-32.html"},"GENPOL"),")"),i.createElement("li",null,i.createElement(he,{url:"https://webtreeprint.com/tp_downloader.php?path=famous_gedcoms/shakespeare.ged",text:"Shakespeare"})," ","(",i.createElement(c.a,{id:"intro.from",defaultMessage:"from"})," ",i.createElement("a",{href:"https://webtreeprint.com/tp_famous_gedcoms.php"},"webtreeprint.com"),")"),i.createElement("li",null,i.createElement(he,{url:"http://genealogyoflife.com/tng/gedcom/HarryPotter.ged",text:"Harry Potter"})," ","(",i.createElement(c.a,{id:"intro.from",defaultMessage:"from"})," ",i.createElement("a",{href:"http://famousfamilytrees.blogspot.com/"},"Famous Family Trees"),")")),i.createElement("p",null,i.createElement("b",null,i.createElement(c.a,{id:"intro.privacy",defaultMessage:"Privacy"})),":",i.createElement(c.a,{id:"intro.privacy_note",defaultMessage:'When using the "load from file" option, this site does not send your data anywhere and files loaded from disk do not leave your computer. When using "load from URL", data is passed through the {link} service to deal with an issue with cross-site file loading in the browser (CORS).',values:{link:i.createElement("a",{href:"https://cors-anywhere.herokuapp.com/"},"cors-anywhere")}}))))}var ve=n(541),we=n(548),ye=n(550),Ee=n(536),be=n(547),ke=n(549),Oe=n(544),xe=n(261),je=n.n(xe),Re=n(165),Me=n.n(Re),Ce=n(262),Se=n.n(Ce),_e=n(263),ze=n.n(_e);function De(e,t){return e.score!==t.score?e.score-t.score:Se()(e.ref,t.ref)}var Te=function(){function e(t){Object(m.a)(this,e),this.gedcom=t,this.index=void 0,this.index=ze()(function(){for(var e in this.ref("id"),this.field("id"),this.field("name"),this.field("normalizedName"),t.indis){var n=t.indis[e].tree.filter(function(e){return"NAME"===e.tag}).map(function(e){return e.data}).join(" ");this.add({id:e,name:n,normalizedName:(a=n,a.toLocaleLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/\u0142/g,"l"))})}var a})}return Object(p.a)(e,[{key:"search",value:function(e){var t=this,n=e.split(" ").filter(function(e){return!!e}).map(function(e){return"+".concat(e,"*")}).join(" ");return this.index.search(n).sort(De).slice(0,8).map(function(e){return{id:e.ref,indi:t.gedcom.indis[e.ref]}})}}]),e}();function Pe(e){var t=e.indi.tree.find(function(e){return"NAME"===e.tag}),n=t&&t.data.split("/").filter(function(e){return!!e}).join(" ");return e.id.length>8?n:i.createElement(i.Fragment,null,n," ",i.createElement("i",null,"(",e.id,")"))}function Ne(e,t,n){var a=e.tree.find(function(e){return e.tag===t}),r=a&&a.tree.find(function(e){return"DATE"===e.tag});return r&&G(r.data,n)||""}function Ie(e,t){var n=Ne(e,"BIRT",t),a=Ne(e,"DEAT",t);return a?"".concat(n," \u2013 ").concat(a):n}var Le=n(538),Ue=n(546),Ae=n(64),Fe=n(537),We=n(535),He=n(527),Ge=n(543),Be=n(539),Ve=n(542);function Je(e){return new Promise(function(t,n){var a=new FileReader;a.onload=function(e){t(e.target.result)},a.readAsText(e)})}function Ye(e){var t=e.toLowerCase();return t.endsWith(".jpg")||t.endsWith(".png")}var qe,Ke=function(e){function t(){var e,n;Object(m.a)(this,t);for(var a=arguments.length,r=new Array(a),o=0;o {\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n return new Promise((resolve, reject) => {\n reader.onload = (e) => resolve((e.target as FileReader).result as string);\n });\n}\n\nasync function inlineImage(image: SVGImageElement) {\n const href = image.href.baseVal;\n if (!href) {\n return;\n }\n try {\n const response = await fetch(href);\n const blob = await response.blob();\n const dataUrl = await loadAsDataUrl(blob);\n image.href.baseVal = dataUrl;\n } catch (e) {\n console.warn('Failed to load image:', e);\n }\n}\n\n/**\n * Fetches all images in the SVG and replaces them with inlined images as data\n * URLs. Images are replaced in place. The replacement is done, the returned\n * promise is resolved.\n */\nasync function inlineImages(svg: Element): Promise {\n const images = Array.from(svg.getElementsByTagName('image'));\n await Promise.all(images.map(inlineImage));\n}\n\n/** Loads a blob into an image object. */\nfunction loadImage(blob: Blob): Promise {\n const image = new Image();\n image.src = URL.createObjectURL(blob);\n return new Promise((resolve, reject) => {\n image.addEventListener('load', () => resolve(image));\n });\n}\n\n/** Draw image on a new canvas and return the canvas. */\nfunction drawOnCanvas(image: HTMLImageElement) {\n const canvas = document.createElement('canvas');\n // Scale image for better quality.\n canvas.width = image.width * 2;\n canvas.height = image.height * 2;\n\n const ctx = canvas.getContext('2d')!;\n const oldFill = ctx.fillStyle;\n ctx.fillStyle = 'white';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = oldFill;\n\n ctx.drawImage(image, 0, 0, canvas.width, canvas.height);\n return canvas;\n}\n\nfunction canvasToBlob(canvas: HTMLCanvasElement, type: string) {\n return new Promise((resolve, reject) => {\n canvas.toBlob((blob) => {\n if (blob) {\n resolve(blob);\n } else {\n reject();\n }\n }, type);\n });\n}\n\n/** Supported chart types. */\nexport enum ChartType {\n Hourglass,\n Relatives,\n Fancy,\n}\n\nexport interface ChartProps {\n data: JsonGedcomData;\n selection: IndiInfo;\n chartType: ChartType;\n onSelection: (indiInfo: IndiInfo) => void;\n}\n\n/** Component showing the genealogy chart and handling transition animations. */\nexport class Chart extends React.PureComponent {\n private chart?: ChartHandle;\n\n private getChartType() {\n switch (this.props.chartType) {\n case ChartType.Hourglass:\n return HourglassChart;\n case ChartType.Relatives:\n return RelativesChart;\n case ChartType.Fancy:\n return FancyChart;\n default:\n // Fall back to hourglass chart.\n return HourglassChart;\n }\n }\n\n private getRendererType() {\n switch (this.props.chartType) {\n case ChartType.Fancy:\n return CircleRenderer;\n default:\n // Use DetailedRenderer by default.\n return DetailedRenderer;\n }\n }\n\n /**\n * Renders the chart or performs a transition animation to a new state.\n * If indiInfo is not given, it means that it is the initial render and no\n * animation is performed.\n */\n private renderChart(args: {initialRender: boolean} = {initialRender: false}) {\n if (args.initialRender) {\n (d3.select('#chart').node() as HTMLElement).innerHTML = '';\n this.chart = createChart({\n json: this.props.data,\n chartType: this.getChartType(),\n renderer: this.getRendererType(),\n svgSelector: '#chart',\n indiCallback: (info) => this.props.onSelection(info),\n animate: true,\n updateSvgSize: false,\n locale: this.context.intl.locale,\n });\n }\n const chartInfo = this.chart!.render({\n startIndi: this.props.selection.id,\n baseGeneration: this.props.selection.generation,\n });\n const svg = d3.select('#chart');\n const parent = (svg.node() as HTMLElement).parentElement as Element;\n\n d3.select(parent)\n .on('scroll', scrolled)\n .call(\n d3\n .zoom()\n .scaleExtent([1, 1])\n .translateExtent([[0, 0], chartInfo.size])\n .on('zoom', zoomed),\n );\n\n const scrollTopTween = (scrollTop: number) => {\n return () => {\n const i = d3.interpolateNumber(parent.scrollTop, scrollTop);\n return (t: number) => {\n parent.scrollTop = i(t);\n };\n };\n };\n const scrollLeftTween = (scrollLeft: number) => {\n return () => {\n const i = d3.interpolateNumber(parent.scrollLeft, scrollLeft);\n return (t: number) => {\n parent.scrollLeft = i(t);\n };\n };\n };\n\n const dx = parent.clientWidth / 2 - chartInfo.origin[0];\n const dy = parent.clientHeight / 2 - chartInfo.origin[1];\n const offsetX = d3.max([0, (parent.clientWidth - chartInfo.size[0]) / 2]);\n const offsetY = d3.max([0, (parent.clientHeight - chartInfo.size[1]) / 2]);\n const svgTransition = svg\n .transition()\n .delay(200)\n .duration(500);\n const transition = args.initialRender ? svg : svgTransition;\n transition\n .attr('transform', `translate(${offsetX}, ${offsetY})`)\n .attr('width', chartInfo.size[0])\n .attr('height', chartInfo.size[1]);\n if (args.initialRender) {\n parent.scrollLeft = -dx;\n parent.scrollTop = -dy;\n } else {\n svgTransition\n .tween('scrollLeft', scrollLeftTween(-dx))\n .tween('scrollTop', scrollTopTween(-dy));\n }\n }\n\n componentDidMount() {\n this.renderChart({initialRender: true});\n }\n\n componentDidUpdate(prevProps: ChartProps) {\n const initialRender =\n this.props.data !== prevProps.data ||\n this.props.chartType !== prevProps.chartType;\n this.renderChart({initialRender});\n }\n\n /** Make intl appear in this.context. */\n static contextTypes = {\n intl: intlShape,\n };\n\n render() {\n return (\n
\n \n
\n );\n }\n\n private getSvgContents() {\n const svg = document.getElementById('chart')!.cloneNode(true) as Element;\n svg.removeAttribute('transform');\n return new XMLSerializer().serializeToString(svg);\n }\n\n private async getSvgContentsWithInlinedImages() {\n const svg = document.getElementById('chart')!.cloneNode(true) as Element;\n svg.removeAttribute('transform');\n await inlineImages(svg);\n return new XMLSerializer().serializeToString(svg);\n }\n\n /** Shows the print dialog to print the currently displayed chart. */\n print() {\n const printWindow = document.createElement('iframe');\n printWindow.style.position = 'absolute';\n printWindow.style.top = '-1000px';\n printWindow.style.left = '-1000px';\n printWindow.onload = () => {\n printWindow.contentDocument!.open();\n printWindow.contentDocument!.write(this.getSvgContents());\n printWindow.contentDocument!.close();\n // Doesn't work on Firefox without the setTimeout.\n setTimeout(() => {\n printWindow.contentWindow!.focus();\n printWindow.contentWindow!.print();\n printWindow.parentNode!.removeChild(printWindow);\n }, 500);\n };\n document.body.appendChild(printWindow);\n }\n\n async downloadSvg() {\n const contents = await this.getSvgContentsWithInlinedImages();\n const blob = new Blob([contents], {type: 'image/svg+xml'});\n saveAs(blob, 'topola.svg');\n }\n\n private async drawOnCanvas(): Promise {\n const contents = await this.getSvgContentsWithInlinedImages();\n const blob = new Blob([contents], {type: 'image/svg+xml'});\n return await drawOnCanvas(await loadImage(blob));\n }\n\n async downloadPng() {\n const canvas = await this.drawOnCanvas();\n const blob = await canvasToBlob(canvas, 'image/png');\n saveAs(blob, 'topola.png');\n }\n\n async downloadPdf() {\n const canvas = await this.drawOnCanvas();\n const doc = new jsPDF({\n orientation: canvas.width > canvas.height ? 'l' : 'p',\n unit: 'pt',\n format: [canvas.width, canvas.height],\n });\n doc.addImage(canvas, 'PNG', 0, 0, canvas.width, canvas.height, 'NONE');\n doc.save('topola.pdf');\n }\n}\n","import {Date as TopolaDate, DateRange, getDate} from 'topola';\nimport {InjectedIntl} from 'react-intl';\n\nconst DATE_QUALIFIERS = new Map([\n ['abt', 'about'],\n ['cal', 'calculated'],\n ['est', 'estimated'],\n]);\n\nfunction formatDate(date: TopolaDate, intl: InjectedIntl) {\n const hasDay = date.day !== undefined;\n const hasMonth = date.month !== undefined;\n const hasYear = date.year !== undefined;\n if (!hasDay && !hasMonth && !hasYear) {\n return date.text || '';\n }\n const dateObject = new Date(\n hasYear ? date.year! : 0,\n hasMonth ? date.month! - 1 : 0,\n hasDay ? date.day! : 1,\n );\n\n const qualifier = date.qualifier && date.qualifier.toLowerCase();\n const translatedQualifier =\n qualifier &&\n intl.formatMessage({\n id: `date.${qualifier}`,\n defaultMessage: DATE_QUALIFIERS.get(qualifier) || qualifier,\n });\n\n const formatOptions = {\n day: hasDay ? 'numeric' : undefined,\n month: hasMonth ? 'long' : undefined,\n year: hasYear ? 'numeric' : undefined,\n };\n const translatedDate = new Intl.DateTimeFormat(\n intl.locale,\n formatOptions,\n ).format(dateObject);\n\n return [translatedQualifier, translatedDate].join(' ');\n}\n\nfunction formatDateRage(dateRange: DateRange, intl: InjectedIntl) {\n const fromDate = dateRange.from;\n const toDate = dateRange.to;\n const translatedFromDate = fromDate && formatDate(fromDate, intl);\n const translatedToDate = toDate && formatDate(toDate, intl);\n if (translatedFromDate && translatedToDate) {\n return intl.formatMessage(\n {\n id: 'date.between',\n defaultMessage: 'between {from} and {to}',\n },\n {from: translatedFromDate, to: translatedToDate},\n );\n }\n if (translatedFromDate) {\n return intl.formatMessage(\n {\n id: 'date.after',\n defaultMessage: 'after {from}',\n },\n {from: translatedFromDate},\n );\n }\n if (translatedToDate) {\n return intl.formatMessage(\n {\n id: 'date.before',\n defaultMessage: 'before {to}',\n },\n {to: translatedToDate},\n );\n }\n return '';\n}\n\n/** Formats a date given in GEDCOM format. */\nexport function translateDate(gedcomDate: string, intl: InjectedIntl) {\n const dateOrRange = getDate(gedcomDate);\n if (!dateOrRange) {\n return '';\n }\n if (dateOrRange.date) {\n return formatDate(dateOrRange.date, intl);\n }\n if (dateOrRange.dateRange) {\n return formatDateRage(dateOrRange.dateRange, intl);\n }\n return '';\n}\n","import * as React from 'react';\nimport flatMap from 'array.prototype.flatmap';\nimport Linkify from 'react-linkify';\nimport {FormattedMessage, InjectedIntl} from 'react-intl';\nimport {GedcomData} from './gedcom_util';\nimport {GedcomEntry} from 'parse-gedcom';\nimport {intlShape} from 'react-intl';\nimport {translateDate} from './date_util';\n\ninterface Props {\n gedcom: GedcomData;\n indi: string;\n}\n\nconst EVENT_TAGS = ['BIRT', 'BAPM', 'CHR', 'DEAT', 'BURI'];\nconst EXCLUDED_TAGS = ['NAME', 'SEX', 'FAMC', 'FAMS', 'SOUR', 'NOTE'];\nconst TAG_DESCRIPTIONS = new Map([\n ['BAPM', 'Baptism'],\n ['BIRT', 'Birth'],\n ['BURI', 'Burial'],\n ['CHR', 'Christening'],\n ['DEAT', 'Death'],\n ['EMAIL', 'E-mail'],\n ['OCCU', 'Occupation'],\n ['TITL', 'Title'],\n ['WWW', 'WWW'],\n]);\n\nfunction translateTag(tag: string) {\n return (\n \n );\n}\n\nfunction joinLines(lines: (JSX.Element | string)[]) {\n return (\n <>\n {lines.map((line, index) => (\n
\n {line}\n
\n
\n ))}\n \n );\n}\n\n/**\n * Returns the data for the given GEDCOM entry as an array of lines. Supports\n * continuations with CONT and CONC.\n */\nfunction getData(entry: GedcomEntry) {\n const result = [entry.data];\n entry.tree.forEach((subentry) => {\n if (subentry.tag === 'CONC' && subentry.data) {\n const last = result.length - 1;\n result[last] += subentry.data;\n } else if (subentry.tag === 'CONT' && subentry.data) {\n result.push(subentry.data);\n }\n });\n return result;\n}\n\nfunction eventDetails(entry: GedcomEntry, intl: InjectedIntl) {\n const lines = [];\n const date = entry.tree.find((subentry) => subentry.tag === 'DATE');\n if (date && date.data) {\n lines.push(translateDate(date.data, intl));\n }\n const place = entry.tree.find((subentry) => subentry.tag === 'PLAC');\n if (place && place.data) {\n lines.push(...getData(place));\n }\n entry.tree\n .filter((subentry) => subentry.tag === 'NOTE')\n .forEach((note) =>\n getData(note).forEach((line) => lines.push({line})),\n );\n if (!lines.length) {\n return null;\n }\n return (\n <>\n
{translateTag(entry.tag)}
\n {joinLines(lines)}\n \n );\n}\n\nfunction dataDetails(entry: GedcomEntry) {\n const lines = [];\n if (entry.data) {\n lines.push(...getData(entry));\n }\n entry.tree\n .filter((subentry) => subentry.tag === 'NOTE')\n .forEach((note) =>\n getData(note).forEach((line) => lines.push({line})),\n );\n if (!lines.length) {\n return null;\n }\n return (\n <>\n
{translateTag(entry.tag)}
\n {joinLines(lines)}\n \n );\n}\n\nfunction noteDetails(entry: GedcomEntry) {\n return joinLines(\n getData(entry).map((line, index) => {line}),\n );\n}\n\nfunction nameDetails(entry: GedcomEntry) {\n return (\n

\n {entry.data\n .split('/')\n .filter((name) => !!name)\n .map((name, index) => (\n
\n {name}\n
\n
\n ))}\n

\n );\n}\n\nfunction getDetails(\n entries: GedcomEntry[],\n tags: string[],\n detailsFunction: (entry: GedcomEntry) => JSX.Element | null,\n): JSX.Element[] {\n return flatMap(tags, (tag) =>\n entries\n .filter((entry) => entry.tag === tag)\n .map((entry) => detailsFunction(entry)),\n )\n .filter((element) => element !== null)\n .map((element, index) => (\n
\n {element}\n
\n ));\n}\n\nfunction getOtherDetails(entries: GedcomEntry[]) {\n return entries\n .filter(\n (entry) =>\n !EXCLUDED_TAGS.includes(entry.tag) && !EVENT_TAGS.includes(entry.tag),\n )\n .map((entry) => dataDetails(entry))\n .filter((element) => element !== null)\n .map((element, index) => (\n
\n {element}\n
\n ));\n}\n\nexport class Details extends React.Component {\n /** Make intl appear in this.context. */\n static contextTypes = {\n intl: intlShape,\n };\n\n render() {\n const entries = this.props.gedcom.indis[this.props.indi].tree;\n\n return (\n
\n {getDetails(entries, ['NAME'], nameDetails)}\n {getDetails(entries, EVENT_TAGS, (entry) =>\n eventDetails(entry, this.context.intl as InjectedIntl),\n )}\n {getOtherDetails(entries)}\n {getDetails(entries, ['NOTE'], noteDetails)}\n
\n );\n }\n}\n","import {JsonFam, JsonGedcomData, JsonIndi, gedcomEntriesToJson} from 'topola';\nimport {GedcomEntry, parse as parseGedcom} from 'parse-gedcom';\n\nexport interface GedcomData {\n head: GedcomEntry;\n indis: {[key: string]: GedcomEntry};\n fams: {[key: string]: GedcomEntry};\n}\n\nexport interface TopolaData {\n chartData: JsonGedcomData;\n gedcom: GedcomData;\n}\n\n/**\n * Returns the identifier extracted from a pointer string.\n * E.g. '@I123@' -> 'I123'\n */\nfunction pointerToId(pointer: string): string {\n return pointer.substring(1, pointer.length - 1);\n}\n\nfunction prepareGedcom(entries: GedcomEntry[]): GedcomData {\n const head = entries.find((entry) => entry.tag === 'HEAD')!;\n const indis: {[key: string]: GedcomEntry} = {};\n const fams: {[key: string]: GedcomEntry} = {};\n entries.forEach((entry) => {\n if (entry.tag === 'INDI') {\n indis[pointerToId(entry.pointer)] = entry;\n } else if (entry.tag === 'FAM') {\n fams[pointerToId(entry.pointer)] = entry;\n }\n });\n return {head, indis, fams};\n}\n\nfunction strcmp(a: string, b: string) {\n if (a < b) {\n return -1;\n }\n if (a > b) {\n return 1;\n }\n return 0;\n}\n\n/** Birth date comparator for individuals. */\nfunction birthDatesComparator(gedcom: JsonGedcomData) {\n const idToIndiMap = new Map();\n gedcom.indis.forEach((indi) => {\n idToIndiMap[indi.id] = indi;\n });\n\n return (indiId1: string, indiId2: string) => {\n const idComparison = strcmp(indiId1, indiId2);\n const indi1: JsonIndi = idToIndiMap[indiId1];\n const indi2: JsonIndi = idToIndiMap[indiId2];\n const birth1 = indi1 && indi1.birth;\n const birth2 = indi2 && indi2.birth;\n const date1 =\n birth1 && (birth1.date || (birth1.dateRange && birth1.dateRange.from));\n const date2 =\n birth2 && (birth2.date || (birth2.dateRange && birth2.dateRange.from));\n if (!date1 || !date1.year || !date2 || !date2.year) {\n return idComparison;\n }\n if (date1.year !== date2.year) {\n return date1.year - date2.year;\n }\n if (!date1.month || !date2.month) {\n return idComparison;\n }\n if (date1.month !== date2.month) {\n return date1.month - date2.month;\n }\n if (date1.day && date2.day && date1.day !== date2.day) {\n return date1.month - date2.month;\n }\n return idComparison;\n };\n}\n\n/**\n * Sorts children by birth date in the given family.\n * Does not modify the input objects.\n */\nfunction sortFamilyChildren(\n fam: JsonFam,\n comparator: (id1: string, id2: string) => number,\n): JsonFam {\n if (!fam.children) {\n return fam;\n }\n const newChildren = fam.children.sort(comparator);\n return Object.assign({}, fam, {children: newChildren});\n}\n\n/**\n * Sorts children by birth date.\n * Does not modify the input object.\n */\nfunction sortChildren(gedcom: JsonGedcomData): JsonGedcomData {\n const comparator = birthDatesComparator(gedcom);\n const newFams = gedcom.fams.map((fam) => sortFamilyChildren(fam, comparator));\n return Object.assign({}, gedcom, {fams: newFams});\n}\n\n/**\n * Removes images that are not HTTP links.\n * Does not modify the input object.\n */\nfunction filterImage(indi: JsonIndi, images: Map): JsonIndi {\n if (indi.imageUrl) {\n const fileName = indi.imageUrl.match(/[^/\\\\]*$/)![0];\n if (images.has(fileName)) {\n const newIndi = Object.assign({}, indi);\n newIndi.imageUrl = images.get(fileName);\n return newIndi;\n }\n }\n if (!indi.imageUrl || indi.imageUrl.startsWith('http')) {\n return indi;\n }\n const newIndi = Object.assign({}, indi);\n delete newIndi.imageUrl;\n return newIndi;\n}\n\n/**\n * Removes images that are not HTTP links.\n * Does not modify the input object.\n */\nfunction filterImages(\n gedcom: JsonGedcomData,\n images: Map,\n): JsonGedcomData {\n const newIndis = gedcom.indis.map((indi) => filterImage(indi, images));\n return Object.assign({}, gedcom, {indis: newIndis});\n}\n\n/**\n * Converts GEDCOM file into JSON data performing additional transformations:\n * - sort children by birth date\n * - remove images that are not HTTP links and aren't mapped in `images`.\n *\n * @param images Map from file name to image URL. This is used to pass in\n * uploaded images.\n */\nexport function convertGedcom(\n gedcom: string,\n images: Map,\n): TopolaData {\n const entries = parseGedcom(gedcom);\n const json = gedcomEntriesToJson(entries);\n if (\n !json ||\n !json.indis ||\n !json.indis.length ||\n !json.fams ||\n !json.fams.length\n ) {\n throw new Error('Failed to read GEDCOM file');\n }\n\n return {\n chartData: filterImages(sortChildren(json), images),\n gedcom: prepareGedcom(entries),\n };\n}\n\nexport function getSoftware(head: GedcomEntry): string | null {\n const sour =\n head && head.tree && head.tree.find((entry) => entry.tag === 'SOUR');\n const name =\n sour && sour.tree && sour.tree.find((entry) => entry.tag === 'NAME');\n return (name && name.data) || null;\n}\n","import {convertGedcom, TopolaData} from './gedcom_util';\nimport {IndiInfo, JsonGedcomData} from 'topola';\n\n/**\n * Returns a valid IndiInfo object, either with the given indi and generation\n * or with an individual taken from the data and generation 0.\n */\nexport function getSelection(\n data: JsonGedcomData,\n indi?: string,\n generation?: number,\n): IndiInfo {\n return {\n id: indi || data.indis[0].id,\n generation: generation || 0,\n };\n}\n\nfunction prepareData(\n gedcom: string,\n cacheId: string,\n images?: Map,\n): TopolaData {\n const data = convertGedcom(gedcom, images || new Map());\n const serializedData = JSON.stringify(data);\n try {\n sessionStorage.setItem(cacheId, serializedData);\n } catch (e) {\n console.warn('Failed to store data in session storage: ' + e);\n }\n return data;\n}\n\n/** Fetches data from the given URL. Uses cors-anywhere if handleCors is true. */\nexport async function loadFromUrl(\n url: string,\n handleCors: boolean,\n): Promise {\n try {\n const cachedData = sessionStorage.getItem(url);\n if (cachedData) {\n return JSON.parse(cachedData);\n }\n } catch (e) {\n console.warn('Failed to load data from session storage: ' + e);\n }\n const urlToFetch = handleCors\n ? 'https://cors-anywhere.herokuapp.com/' + url\n : url;\n\n const response = await window.fetch(urlToFetch);\n if (response.status !== 200) {\n throw new Error(response.statusText);\n }\n const gedcom = await response.text();\n return prepareData(gedcom, url);\n}\n\n/** Loads data from the given GEDCOM file contents. */\nexport async function loadGedcom(\n hash: string,\n gedcom?: string,\n images?: Map,\n): Promise {\n try {\n const cachedData = sessionStorage.getItem(hash);\n if (cachedData) {\n return JSON.parse(cachedData);\n }\n } catch (e) {\n console.warn('Failed to load data from session storage: ' + e);\n }\n if (!gedcom) {\n throw new Error('Error loading data. Please upload your file again.');\n }\n return prepareData(gedcom, hash, images);\n}\n","import * as queryString from 'query-string';\nimport * as React from 'react';\nimport {Card} from 'semantic-ui-react';\nimport {FormattedMessage} from 'react-intl';\nimport {Link} from 'react-router-dom';\n\n/** Link that loads a GEDCOM file from URL. */\nfunction GedcomLink(props: {url: string; text: string}) {\n return (\n \n {props.text}\n \n );\n}\n\n/** The intro page. */\nexport function Intro() {\n return (\n \n \n \n \n \n \n \n

\n \n

\n

\n \n

\n

\n \n

\n \n

\n \n \n \n :\n cors-anywhere\n ),\n }}\n />\n

\n \n \n );\n}\n","import naturalSort from 'javascript-natural-sort';\nimport lunr from 'lunr';\nimport {GedcomData} from './gedcom_util';\nimport {GedcomEntry} from 'parse-gedcom';\n\nconst MAX_RESULTS = 8;\n\nexport interface SearchResult {\n id: string;\n indi: GedcomEntry;\n}\n\nexport interface SearchIndex {\n search(input: string): SearchResult[];\n}\n\n/** Removes accents from letters, e.g. ó->o, ę->e. */\nfunction normalize(input: string) {\n return input\n .toLocaleLowerCase()\n .normalize('NFD')\n .replace(/[\\u0300-\\u036f]/g, '')\n .replace(/\\u0142/g, 'l'); // Special case: ł is not affected by NFD.\n}\n\n/** Comparator to sort by score first, then by id. */\nfunction compare(a: lunr.Index.Result, b: lunr.Index.Result) {\n if (a.score !== b.score) {\n return a.score - b.score;\n }\n return naturalSort(a.ref, b.ref);\n}\n\nclass LunrSearchIndex implements SearchIndex {\n private index: lunr.Index;\n\n public constructor(private gedcom: GedcomData) {\n this.index = lunr(function() {\n this.ref('id');\n this.field('id');\n this.field('name');\n this.field('normalizedName');\n\n for (let id in gedcom.indis) {\n const name = gedcom.indis[id].tree\n .filter((entry) => entry.tag === 'NAME')\n .map((entry) => entry.data)\n .join(' ');\n this.add({id, name, normalizedName: normalize(name)});\n }\n });\n }\n\n public search(input: string) {\n const query = input\n .split(' ')\n .filter((s) => !!s)\n .map((s) => `+${s}*`)\n .join(' ');\n const results = this.index.search(query);\n return results\n .sort(compare)\n .slice(0, MAX_RESULTS)\n .map((result) => ({id: result.ref, indi: this.gedcom.indis[result.ref]}));\n }\n}\n\n/** Builds a search index from data. */\nexport function buildSearchIndex(gedcom: GedcomData): SearchIndex {\n return new LunrSearchIndex(gedcom);\n}\n","import * as React from 'react';\nimport {GedcomEntry} from 'parse-gedcom';\nimport {InjectedIntl} from 'react-intl';\nimport {SearchResult} from './search_index';\nimport {translateDate} from './date_util';\n\nfunction getNameLine(result: SearchResult) {\n const nameTag = result.indi.tree.find((entry) => entry.tag === 'NAME');\n const name =\n nameTag &&\n nameTag.data\n .split('/')\n .filter((s) => !!s)\n .join(' ');\n if (result.id.length > 8) {\n return name;\n }\n return (\n <>\n {name} ({result.id})\n \n );\n}\n\nfunction getDate(indi: GedcomEntry, tag: string, intl: InjectedIntl) {\n const eventEntry = indi.tree.find((entry) => entry.tag === tag);\n const dateEntry =\n eventEntry && eventEntry.tree.find((entry) => entry.tag === 'DATE');\n return (dateEntry && translateDate(dateEntry.data, intl)) || '';\n}\n\nfunction getDescriptionLine(indi: GedcomEntry, intl: InjectedIntl) {\n const birthDate = getDate(indi, 'BIRT', intl);\n const deathDate = getDate(indi, 'DEAT', intl);\n if (!deathDate) {\n return birthDate;\n }\n return `${birthDate} – ${deathDate}`;\n}\n\n/** Produces an object that is displayed in the Semantic UI Search results. */\nexport function displaySearchResult(result: SearchResult, intl: InjectedIntl) {\n return {\n id: result.id,\n key: result.id,\n title: getNameLine(result),\n description: getDescriptionLine(result.indi, intl),\n };\n}\n","import * as queryString from 'query-string';\nimport * as React from 'react';\nimport debounce from 'debounce';\nimport md5 from 'md5';\nimport {analyticsEvent} from './analytics';\nimport {buildSearchIndex, SearchIndex, SearchResult} from './search_index';\nimport {displaySearchResult} from './search_util';\nimport {FormattedMessage, intlShape} from 'react-intl';\nimport {GedcomData} from './gedcom_util';\nimport {IndiInfo} from 'topola';\nimport {Link} from 'react-router-dom';\nimport {RouteComponentProps} from 'react-router-dom';\nimport {\n Header,\n Button,\n Icon,\n Menu,\n Modal,\n Input,\n Form,\n Dropdown,\n Search,\n SearchProps,\n} from 'semantic-ui-react';\n\n/** Menus and dialogs state. */\ninterface State {\n loadUrlDialogOpen: boolean;\n url?: string;\n searchResults: SearchResult[];\n}\n\ninterface EventHandlers {\n onSelection: (indiInfo: IndiInfo) => void;\n onPrint: () => void;\n onDownloadPdf: () => void;\n onDownloadPng: () => void;\n onDownloadSvg: () => void;\n}\n\ninterface Props {\n showingChart: boolean;\n gedcom?: GedcomData;\n standalone: boolean;\n eventHandlers: EventHandlers;\n}\n\nfunction loadFileAsText(file: File): Promise {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = (evt: ProgressEvent) => {\n resolve((evt.target as FileReader).result as string);\n };\n reader.readAsText(file);\n });\n}\n\nfunction isImageFileName(fileName: string) {\n const lower = fileName.toLowerCase();\n return lower.endsWith('.jpg') || lower.endsWith('.png');\n}\n\nexport class TopBar extends React.Component<\n RouteComponentProps & Props,\n State\n> {\n state: State = {\n loadUrlDialogOpen: false,\n searchResults: [],\n };\n inputRef?: Input;\n searchRef?: {setValue(value: string): void};\n searchIndex?: SearchIndex;\n\n /** Handles the \"Upload file\" button. */\n async handleUpload(event: React.SyntheticEvent) {\n const files = (event.target as HTMLInputElement).files;\n if (!files || !files.length) {\n return;\n }\n const filesArray = Array.from(files);\n (event.target as HTMLInputElement).value = ''; // Reset the file input.\n analyticsEvent('upload_files_selected', {\n event_value: files.length,\n });\n\n const gedcomFile =\n files.length === 1\n ? files[0]\n : filesArray.find((file) => file.name.toLowerCase().endsWith('.ged')) ||\n files[0];\n\n // Convert uploaded images to object URLs.\n const images = filesArray\n .filter(\n (file) => file.name !== gedcomFile.name && isImageFileName(file.name),\n )\n .map((file) => ({\n name: file.name,\n url: URL.createObjectURL(file),\n }));\n const imageMap = new Map(\n images.map((entry) => [entry.name, entry.url] as [string, string]),\n );\n\n const data = await loadFileAsText(gedcomFile);\n const imageFileNames = images\n .map((image) => image.name)\n .sort()\n .join('|');\n // Hash GEDCOM contents with uploaded image file names.\n const hash = md5(md5(data) + imageFileNames);\n\n // Use history.replace() when reuploading the same file and history.push() when loading\n // a new file.\n const search = queryString.parse(this.props.location.search);\n const historyPush =\n search.file === hash\n ? this.props.history.replace\n : this.props.history.push;\n\n historyPush({\n pathname: '/view',\n search: queryString.stringify({file: hash}),\n state: {data, images: imageMap},\n });\n }\n\n /** Opens the \"Load from URL\" dialog. */\n handleLoadFromUrl() {\n this.setState(\n Object.assign({}, this.state, {loadUrlDialogOpen: true}),\n () => this.inputRef!.focus(),\n );\n }\n\n /** Cancels the \"Load from URL\" dialog. */\n handleClose() {\n this.setState(Object.assign({}, this.state, {loadUrlDialogOpen: false}));\n }\n\n /** Upload button clicked in the \"Load from URL\" dialog. */\n handleLoad() {\n this.setState(\n Object.assign({}, this.state, {\n loadUrlDialogOpen: false,\n }),\n );\n if (this.state.url) {\n analyticsEvent('url_selected');\n this.props.history.push({\n pathname: '/view',\n search: queryString.stringify({url: this.state.url}),\n });\n }\n }\n\n /** Called when the URL input is typed into. */\n handleUrlChange(event: React.SyntheticEvent) {\n this.setState(\n Object.assign({}, this.state, {\n url: (event.target as HTMLInputElement).value,\n }),\n );\n }\n\n /** On search input change. */\n handleSearch(input: string | undefined) {\n if (!input) {\n return;\n }\n const results = this.searchIndex!.search(input).map((result) =>\n displaySearchResult(result, this.context.intl),\n );\n this.setState(Object.assign({}, this.state, {searchResults: results}));\n }\n\n /** On search result selected. */\n handleResultSelect(id: string) {\n analyticsEvent('search_result_selected');\n this.props.eventHandlers.onSelection({id, generation: 0});\n this.searchRef!.setValue('');\n }\n\n initializeSearchIndex() {\n if (this.props.gedcom) {\n this.searchIndex = buildSearchIndex(this.props.gedcom);\n }\n }\n\n changeView(view: string) {\n const location = this.props.location;\n const search = queryString.parse(location.search);\n if (search.view !== view) {\n search.view = view;\n location.search = queryString.stringify(search);\n this.props.history.push(location);\n }\n }\n\n componentDidMount() {\n this.initializeSearchIndex();\n }\n\n componentDidUpdate(prevProps: Props) {\n if (prevProps.gedcom !== this.props.gedcom) {\n this.initializeSearchIndex();\n }\n }\n\n /** Make intl appear in this.context. */\n static contextTypes = {\n intl: intlShape,\n };\n\n render() {\n const loadFromUrlModal = (\n this.handleClose()}\n centered={false}\n >\n
\n \n txt}\n />\n
\n \n
this.handleLoad()}>\n this.handleUrlChange(e)}\n ref={(ref) => (this.inputRef = ref!)}\n />\n

\n \n cors-anywhere.herokuapp.com\n \n ),\n }}\n />\n

\n \n
\n \n \n \n \n \n );\n\n const chartMenus = this.props.showingChart ? (\n <>\n this.props.eventHandlers.onPrint()}>\n \n \n \n\n \n \n \n \n }\n className=\"item\"\n >\n \n this.props.eventHandlers.onDownloadPdf()}\n >\n \n \n this.props.eventHandlers.onDownloadPng()}\n >\n \n \n this.props.eventHandlers.onDownloadSvg()}\n >\n \n \n \n \n\n \n \n \n \n }\n className=\"item\"\n >\n \n this.changeView('hourglass')}>\n \n \n \n this.changeView('relatives')}>\n \n \n \n this.changeView('fancy')}>\n \n \n \n \n \n\n , data: SearchProps) =>\n this.handleSearch(data.value),\n 200,\n )}\n onResultSelect={(_, data) => this.handleResultSelect(data.result.id)}\n results={this.state.searchResults}\n noResultsMessage={this.context.intl.formatMessage({\n id: 'menu.search.no_results',\n defaultMessage: 'No results found',\n })}\n placeholder={this.context.intl.formatMessage({\n id: 'menu.search.placeholder',\n defaultMessage: 'Search for people',\n })}\n selectFirstResult={true}\n ref={(ref) =>\n (this.searchRef = (ref as unknown) as {\n setValue(value: string): void;\n })\n }\n />\n \n ) : null;\n\n const fileMenus = this.props.standalone ? (\n <>\n \n \n Topola Genealogy\n \n \n this.handleLoadFromUrl()}>\n \n \n \n this.handleUpload(e)}\n />\n \n \n ) : null;\n\n const sourceLink = this.props.standalone ? (\n <>\n \n \n \n \n ) : (\n <>\n \n \n \n \n );\n\n return (\n \n {fileMenus}\n {chartMenus}\n {sourceLink}\n {loadFromUrlModal}\n \n );\n }\n}\n","import * as queryString from 'query-string';\nimport * as React from 'react';\nimport {analyticsEvent} from './analytics';\nimport {Chart, ChartType} from './chart';\nimport {Details} from './details';\nimport {FormattedMessage} from 'react-intl';\nimport {getSelection, loadFromUrl, loadGedcom} from './load_data';\nimport {getSoftware, TopolaData} from './gedcom_util';\nimport {IndiInfo} from 'topola';\nimport {intlShape} from 'react-intl';\nimport {Intro} from './intro';\nimport {Loader, Message, Portal, Responsive} from 'semantic-ui-react';\nimport {Redirect, Route, RouteComponentProps, Switch} from 'react-router-dom';\nimport {TopBar} from './top_bar';\n\n/** Shows an error message in the middle of the screen. */\nfunction ErrorMessage(props: {message?: string}) {\n return (\n \n \n \n \n

{props.message}

\n \n );\n}\n\ninterface ErrorPopupProps {\n message?: string;\n open: boolean;\n onDismiss: () => void;\n}\n\n/**\n * Shows a dismissable error message in the bottom left corner of the screen.\n */\nfunction ErrorPopup(props: ErrorPopupProps) {\n return (\n \n \n \n \n \n

{props.message}

\n \n \n );\n}\n\n/**\n * Message types used in embedded mode.\n * When the parent is ready to receive messages, it sends PARENT_READY.\n * When the child (this app) is ready to receive messages, it sends READY.\n * When the child receives PARENT_READY, it sends READY.\n * When the parent receives READY, it sends data in a GEDCOM message.\n */\nenum EmbeddedMessageType {\n GEDCOM = 'gedcom',\n READY = 'ready',\n PARENT_READY = 'parent_ready',\n}\n\n/** Message sent to parent or received from parent in embedded mode. */\ninterface EmbeddedMessage {\n message: EmbeddedMessageType;\n}\n\ninterface GedcomMessage extends EmbeddedMessage {\n message: EmbeddedMessageType.GEDCOM;\n gedcom?: string;\n}\n\ninterface State {\n /** Loaded data. */\n data?: TopolaData;\n /** Selected individual. */\n selection?: IndiInfo;\n /** Hash of the GEDCOM contents. */\n hash?: string;\n /** Error to display. */\n error?: string;\n /** True if data is currently being loaded. */\n loading: boolean;\n /** URL of the data that is loaded or is being loaded. */\n url?: string;\n /** Whether the side panel is shown. */\n showSidePanel?: boolean;\n /** Whether the app is in embedded mode, i.e. embedded in an iframe. */\n embedded: boolean;\n /** Whether the app is in standalone mode, i.e. showing 'open file' menus. */\n standalone: boolean;\n /** Type of displayed chart. */\n chartType: ChartType;\n /** Whether to show the error popup. */\n showErrorPopup: boolean;\n}\n\nexport class App extends React.Component {\n state: State = {\n loading: false,\n embedded: false,\n standalone: true,\n chartType: ChartType.Hourglass,\n showErrorPopup: false,\n };\n chartRef: Chart | null = null;\n\n /** Make intl appear in this.context. */\n static contextTypes = {\n intl: intlShape,\n };\n\n private isNewData(\n hash: string | undefined,\n url: string | undefined,\n gedcom: string | undefined,\n ): boolean {\n return (\n !!(hash && hash !== this.state.hash) ||\n !!(url && this.state.url !== url) ||\n (!!gedcom && !this.state.loading && !this.state.data)\n );\n }\n\n /** Sets the state with a new individual selection and chart type. */\n private updateDisplay(selection: IndiInfo, chartType?: ChartType) {\n if (\n !this.state.selection ||\n this.state.selection.id !== selection.id ||\n this.state.selection!.generation !== selection.generation ||\n (chartType !== undefined && chartType !== this.state.chartType)\n ) {\n this.setState(\n Object.assign({}, this.state, {\n selection,\n chartType: chartType !== undefined ? chartType : this.state.chartType,\n }),\n );\n }\n }\n\n /** Sets error message after data load failure. */\n private setError(error: string) {\n this.setState(\n Object.assign({}, this.state, {\n error: error,\n loading: false,\n }),\n );\n }\n\n private async onMessage(message: EmbeddedMessage) {\n if (message.message === EmbeddedMessageType.PARENT_READY) {\n // Parent didn't receive the first 'ready' message, so we need to send it again.\n window.parent.postMessage({message: EmbeddedMessageType.READY}, '*');\n } else if (message.message === EmbeddedMessageType.GEDCOM) {\n const gedcom = (message as GedcomMessage).gedcom;\n if (!gedcom) {\n return;\n }\n try {\n const data = await loadGedcom('', gedcom);\n const software = getSoftware(data.gedcom.head);\n analyticsEvent('embedded_file_loaded', {\n event_label: software,\n });\n // Set state with data.\n this.setState(\n Object.assign({}, this.state, {\n data,\n selection: getSelection(data.chartData),\n error: undefined,\n loading: false,\n }),\n );\n } catch (error) {\n analyticsEvent('embedded_file_error');\n this.setError(error.message);\n }\n }\n }\n\n componentDidMount() {\n this.componentDidUpdate();\n }\n\n async componentDidUpdate() {\n if (this.props.location.pathname !== '/view') {\n return;\n }\n\n const search = queryString.parse(this.props.location.search);\n const getParam = (name: string) => {\n const value = search[name];\n return typeof value === 'string' ? value : undefined;\n };\n\n const showSidePanel = getParam('sidePanel') !== 'false'; // True by default.\n const embedded = getParam('embedded') === 'true'; // False by default.\n\n if (embedded && !this.state.embedded) {\n this.setState(\n Object.assign({}, this.state, {\n embedded: true,\n standalone: false,\n showSidePanel,\n }),\n );\n // Notify the parent window that we are ready.\n window.parent.postMessage('ready', '*');\n window.addEventListener('message', (data) => this.onMessage(data.data));\n }\n if (embedded) {\n // If the app is embedded, do not run the normal loading code.\n return;\n }\n\n const url = getParam('url');\n const indi = getParam('indi');\n const parsedGen = Number(getParam('gen'));\n const generation = !isNaN(parsedGen) ? parsedGen : undefined;\n const hash = getParam('file');\n const handleCors = getParam('handleCors') !== 'false'; // True by default.\n const standalone = getParam('standalone') !== 'false'; // True by default.\n const view = getParam('view');\n\n const chartTypes = new Map([\n ['relatives', ChartType.Relatives],\n ['fancy', ChartType.Fancy],\n ]);\n // Hourglass is the default view.\n const chartType = chartTypes.get(view) || ChartType.Hourglass;\n\n const gedcom = this.props.location.state && this.props.location.state.data;\n const images =\n this.props.location.state && this.props.location.state.images;\n\n if (!url && !hash) {\n this.props.history.replace({pathname: '/'});\n } else if (this.isNewData(hash, url, gedcom)) {\n try {\n // Set loading state.\n this.setState(\n Object.assign({}, this.state, {\n data: undefined,\n selection: undefined,\n hash,\n error: undefined,\n loading: true,\n url,\n standalone,\n chartType,\n }),\n );\n const data = hash\n ? await loadGedcom(hash, gedcom, images)\n : await loadFromUrl(url!, handleCors);\n\n const software = getSoftware(data.gedcom.head);\n analyticsEvent(hash ? 'upload_file_loaded' : 'url_file_loaded', {\n event_label: software,\n event_value: (images && images.size) || 0,\n });\n\n // Set state with data.\n this.setState(\n Object.assign({}, this.state, {\n data,\n hash,\n selection: getSelection(data.chartData, indi, generation),\n error: undefined,\n loading: false,\n url,\n showSidePanel,\n standalone,\n chartType,\n }),\n );\n } catch (error) {\n analyticsEvent(hash ? 'upload_file_error' : 'url_file_error');\n this.setError(error.message);\n }\n } else if (this.state.data && this.state.selection) {\n // Update selection if it has changed in the URL.\n const selection = getSelection(\n this.state.data.chartData,\n indi,\n generation,\n );\n this.updateDisplay(selection, chartType);\n }\n }\n\n /**\n * Called when the user clicks an individual box in the chart.\n * Updates the browser URL.\n */\n private onSelection = (selection: IndiInfo) => {\n analyticsEvent('selection_changed');\n if (this.state.embedded) {\n // In embedded mode the URL doesn't change.\n this.updateDisplay(selection);\n return;\n }\n const location = this.props.location;\n const search = queryString.parse(location.search);\n search.indi = selection.id;\n search.gen = String(selection.generation);\n location.search = queryString.stringify(search);\n this.props.history.push(location);\n };\n\n private onPrint = () => {\n analyticsEvent('print');\n this.chartRef && this.chartRef.print();\n };\n\n private showErrorPopup(message: string) {\n this.setState(\n Object.assign({}, this.state, {\n showErrorPopup: true,\n error: message,\n }),\n );\n }\n\n private onDownloadPdf = async () => {\n analyticsEvent('download_pdf');\n try {\n this.chartRef && (await this.chartRef.downloadPdf());\n } catch (e) {\n this.showErrorPopup(\n this.context.intl.formatMessage({\n id: 'error.failed_pdf',\n defaultMessage:\n 'Failed to generate PDF file.' +\n ' Please try with a smaller diagram or download an SVG file.',\n }),\n );\n }\n };\n\n private onDownloadPng = async () => {\n analyticsEvent('download_png');\n try {\n this.chartRef && (await this.chartRef.downloadPng());\n } catch (e) {\n this.showErrorPopup(\n this.context.intl.formatMessage({\n id: 'error.failed_png',\n defaultMessage:\n 'Failed to generate PNG file.' +\n ' Please try with a smaller diagram or download an SVG file.',\n }),\n );\n }\n };\n\n private onDownloadSvg = () => {\n analyticsEvent('download_svg');\n this.chartRef && this.chartRef.downloadSvg();\n };\n\n onDismissErrorPopup = () => {\n this.setState(\n Object.assign({}, this.state, {\n showErrorPopup: false,\n }),\n );\n };\n\n private renderMainArea = () => {\n if (this.state.data && this.state.selection) {\n return (\n
\n \n (this.chartRef = ref)}\n />\n {this.state.showSidePanel ? (\n \n \n \n ) : null}\n
\n );\n }\n if (this.state.error) {\n return ;\n }\n return ;\n };\n\n render() {\n return (\n <>\n (\n \n )}\n />\n \n \n \n \n \n \n );\n }\n}\n","import * as locale_en from 'react-intl/locale-data/en';\nimport * as locale_pl from 'react-intl/locale-data/pl';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport messages_pl from './translations/pl.json';\nimport {addLocaleData} from 'react-intl';\nimport {App} from './app';\nimport {detect} from 'detect-browser';\nimport {HashRouter as Router, Route} from 'react-router-dom';\nimport {IntlProvider} from 'react-intl';\nimport './index.css';\nimport 'semantic-ui-css/semantic.min.css';\nimport 'canvas-toBlob';\n\naddLocaleData([...locale_en, ...locale_pl]);\n\nconst messages = {\n pl: messages_pl,\n};\nconst language = navigator.language && navigator.language.split(/[-_]/)[0];\n\nconst browser = detect();\n\nif (browser && browser.name === 'ie') {\n ReactDOM.render(\n

\n Topola Genealogy Viewer does not support Internet Explorer. Please try a\n different browser.\n

,\n document.querySelector('#root'),\n );\n} else {\n ReactDOM.render(\n \n \n \n \n ,\n document.querySelector('#root'),\n );\n}\n"],"sourceRoot":""} \ No newline at end of file