Translate index.html into other languages

ArtPoon commented 3 years ago

[x] French - index-fr.html @ArtPoon?
[x] Chinese - index-zh.html @MomomomoLiu ?
[x] Spanish - index-es.html @horaciobam
[ ] Hindi - index-hi.html
[ ] Tamil - index-tl.html @GopiGugan

ArtPoon commented 3 years ago

I'll start working on the French, unless we can get @davidchampredon back :grin: :fr:

ArtPoon commented 3 years ago

If we change the help text, then all the language versions would have to get updated as well, so we should probably wait until the text stabilizes somewhat.

ArtPoon commented 3 years ago

Please make sure the language-specific index pages track the main page, e.g., new SVG download button.

ArtPoon commented 3 years ago

I've made a bunch of changes to index.html and JS files to facilitate localization.

First, the top of <body> in index.html contains a JSON object that maps keywords to text:

    /*
     Language translations in other files.

     Change this for every index-lang.html
     Note: cannot display HTML in title attribute, i.e., &eacute; will not render.
     i18n = internationalization
     */
    var i18n_text = {
      // time-tree legend titles
      region_legend: {
        "Africa": "Africa",  // English -> lang
        "Asia": "Asia",
        "China": "China",
        "Europe": "Europe",
        "North America": "North America",
        "Oceania": "Oceania",
        "South America": "South America"
      },
      sample_legend: "Sample size (log10)",
      coldate_legend: "Last collection date",
      diverge_legend: "Divergence (strict molecular clock)",
      total: "Total",

      // side bar data statistics
      last_update: "Last update",
      number_genomes: "Number of genomes",

      // tooltips
      tip_diffs: "Mean diffs from root",
      tip_residual: "Deviation from clock",
      tip_cases: "Number of cases",
      tip_varcount: "Number of variants",
      tip_coldates: "Collection dates"
    };

The JS files retrieve language-specific text from this object by referencing i18n_text. For example, in drawtree.js:generate_legends(), key held geographic regions, e.g., "North America", which are now mapped to translations as follows:

  for (const [key, value] of Object.entries(country_pal)) {
    let region = i18n_text.region_legend[key];
    s += `<div class="legend-item">`;
    s += `<div class="legend-swatch" style="background:${value};"></div>`;
    s += `<div class="legend-label" title="${region}">${region}</div>`;
    s += `</div>`;
  }

The point is that it would be a hassle to dig through all the different front-end files to write translations. In addition, this would require that we have multiple sets of the JS files. Hence, I'm mapping as much content as possible to index.html and the language-specific copies, e.g., index-fr.html.

ArtPoon commented 3 years ago

See user contribution #262

ArtPoon commented 3 years ago

Chinese page throws an error on load:

Uncaught TypeError: country_table.append(...).append(...).selectAll(...).data(...).enter is not a function
    at gentable (beadplot.js:1108)
    at Object.<anonymous> (covizu.js:156)
    at fire (jquery.js:3496)
    at Object.fireWith [as resolveWith] (jquery.js:3626)
    at done (jquery.js:9786)
    at XMLHttpRequest.<anonymous> (jquery.js:10047)

Might be a race condition problem, object being selected by d3 not ready when running this part of the code?

ArtPoon commented 3 years ago

Maybe wrap this in a document.ready event handler?

// load cluster data from server
req = $.getJSON("data/clusters.json", function(data) {
  clusters = data;
});

req.done(function() {
  $("#splash-button").button("enable");
  $("#splash-extra").html("");  // remove loading animation

  beaddata = parse_clusters(clusters);
  tips = map_clusters_to_tips(df, clusters);
  //spinner.stop();
  draw_clusters(tips);

  var rect = d3.selectAll("#svg-timetree > svg > rect"),
      node = rect.nodes()[rect.size()-1];

  // initial display
  // d3.select(node).dispatch("click");
  cindex = node.__data__.cluster_idx;
  d3.select(node).attr("class", "clicked");
  beadplot(node.__data__.cluster_idx);
  $("#barplot").text(null);
  gentable(node.__data__);

GopiGugan commented 3 years ago

The above error is because there are a couple of items missing from i18n_text in index-zh.html. The following need to be added:

      vedge_parent: "Parent",
      vedge_child: "Child",
      vedge_distance: "Genomic distance",
      vedge_support: "Support",
      vedge_coldate: "Collection date",

      hedge_unique_dates: "Unique collection dates",
      hedge_coldates: "Collection dates",

      sample_orig_lab: "Originating lab",
      sample_subm_lab: "Submitting lab",
      sample_authors: "Authors",

      // miscellaneous
      okay: "Okay!",
      got_it: "Got it!",
      loading: `Loading. Please Wait...`,
      loading_json: "Loading JSON data from server (~10s)...",
      zero_points: `0 of 0 points`,
      country_theaders: ["Region", "Country", "Count"],
      sample_theaders: ["Accession", "Name", "Date"],

ArtPoon commented 3 years ago

Great thanks for catching that @GopiGugan

PoonLab / covizu

Translate index.html into other languages #233