Allow to create/reuse custom palettes + allow to hide head of arrow +…

… improve handling fields with mixed numerical/non-numerical values for some representations

CHANGES.rst

@@ -1,13 +1,21 @@
 Changes
 =======
 
-0.4.2 (2017-08-xx)
+0.5.0 (2017-08-xx)
 ------------------
 
+- Allow to create, use (and re-use) custom palette for choropleth maps.
+
+- Allow to hide/display the head of arrows.
+
+- Notable change: some old project-files may no longer be loaded correctly (the impact is really quite limited, but precisely, the overlay order of layout features could be incorrect when opening these old project-files).
+
 - Fix error with legend customization box after changing the layer name.
 
 - Re-allow to display the table of the joined dataset and improve the table layout.
 
+- Improve handling of fields containing mixed numerical and not numerical values for some representations.
+
 
 0.4.1 (2017-08-14)
 ------------------

magrit_app/__init__.py

@@ -1,3 +1,3 @@
 # -*- coding: utf-8 -*-
 
-__version__ = '0.4.1'
+__version__ = '0.5.0'

magrit_app/static/js/discretization_panel.js

@@ -96,13 +96,13 @@ const display_discretization = (layer_name, field_name, nb_class, options) => {
       });
 
     if (_app.custom_palettes) {
-      const additional_colors = Array.from(
-        _app.custom_palettes.entries()).filter(el => el[1].length === nb_class);
+      const additional_colors = Array.from(_app.custom_palettes.entries());
 
       for (let ixp = 0; ixp < additional_colors.length; ixp++) {
         sequential_color_select.append('option')
           .text(additional_colors[ixp][0])
-          .attrs({ value: `user_${additional_colors[ixp][0]}`, title: additional_colors[ixp][0], nb_colors: additional_colors[ixp][1].length });
+          .attrs({ value: `user_${additional_colors[ixp][0]}`, title: additional_colors[ixp][0], nb_colors: additional_colors[ixp][1].length })
+          .property('disabled', additional_colors[ixp][1].length !== nb_class);
       }
     }
 
@@ -173,6 +173,23 @@ const display_discretization = (layer_name, field_name, nb_class, options) => {
         .styles({ 'background-image': `url(/static/img/palettes/${name}.png)` })
         .text(name);
     });
+
+    if (_app.custom_palettes) {
+      const additional_colors = Array.from(
+        _app.custom_palettes.entries());
+      for (let ixp = 0; ixp < additional_colors.length; ixp++) {
+        console.log(additional_colors[ixp]);
+        left_color_select.append('option')
+          .text(additional_colors[ixp][0])
+          .attrs({ value: `user_${additional_colors[ixp][0]}`, title: additional_colors[ixp][0], nb_colors: additional_colors[ixp][1].length })
+          .property('disabled', additional_colors[ixp][1].length !== nb_class);
+        right_color_select.append('option')
+          .text(additional_colors[ixp][0])
+          .attrs({ value: `user_${additional_colors[ixp][0]}`, title: additional_colors[ixp][0], nb_colors: additional_colors[ixp][1].length })
+          .property('disabled', additional_colors[ixp][1].length !== nb_class);
+      }
+    }
+
     document.getElementsByClassName('color_params_right')[0].selectedIndex = 14;
 
     const central_color = col_div.insert('p').attr('class', 'central_color');
@@ -284,6 +301,15 @@ const display_discretization = (layer_name, field_name, nb_class, options) => {
         color_select[ixc].disabled = (nb_class === +color_select[ixc].getAttribute('nb_colors')) ? false : true;
       }
     }
+    const color_select_left = document.querySelectorAll('.color_params_left > option');
+    const color_select_right = document.querySelectorAll('.color_params_right > option');
+    for (let ixc = 0; ixc < color_select_left.length; ixc++) {
+      if (color_select_left[ixc].value.startsWith('user_')) {
+        const is_disabled = (nb_class === +color_select_left[ixc].getAttribute('nb_colors')) ? false : true;
+        color_select_left[ixc].disabled = is_disabled;
+        color_select_right[ixc].disabled = is_disabled;
+      }
+    }
   };
 
   const update_axis = (group) => {
@@ -473,12 +499,21 @@ const display_discretization = (layer_name, field_name, nb_class, options) => {
           const class_right = nb_class - ctl_class_value + 1,
             class_left = ctl_class_value - 1,
             max_col_nb = Math.max(class_right, class_left);
-          let right_pal = getColorBrewerArray(max_col_nb, right_palette),
-            left_pal = getColorBrewerArray(max_col_nb, left_palette);
 
-          left_pal = left_pal.slice(0, class_left).reverse();
+          let right_pal,
+            left_pal;
+          if (right_palette.startsWith('user_')) {
+            right_pal = _app.custom_palettes.get(right_palette.slice(5));
+          } else {
+            right_pal = getColorBrewerArray(max_col_nb, right_palette);
+          }
+          if (left_palette.startsWith('user_')) {
+            left_pal = _app.custom_palettes.get(left_palette.slice(5));
+          } else {
+            left_pal = getColorBrewerArray(max_col_nb, left_palette);
+          }
           right_pal = right_pal.slice(0, class_right);
-
+          left_pal = left_pal.slice(0, class_left).reverse();
           color_array = [].concat(left_pal, ctl_class_color, right_pal);
         }
       } else {
@@ -842,17 +877,36 @@ const display_discretization = (layer_name, field_name, nb_class, options) => {
   });
   let to_reverse = false;
   document.getElementById('button_sequential').checked = true;
-  accordion_colors.append('button')
-    .attr('class', 'button_st4')
-    .html('custom_palette')
+  accordion_colors
+    .append('span')
+    .styles({
+      margin: '5px',
+      float: 'right',
+      cursor: 'pointer',
+    })
+    .html(i18next.t('app_page.palette_box.button'))
     .on('click', () => {
       make_box_custom_palette(nb_class)
-        .then((colors) => {
-          d3.select('.color_params')
-            .append('option')
-            .text('Palette1')
-            .attrs({ value: `user_Palette1`, title: 'Palette1', nb_colors: colors.length });
-          addNewCustomPalette('Palette1', colors);
+        .then((result) => {
+          if (result) {
+            const [colors, palette_name] = result;
+            if (document.querySelector('.color_params')) {
+              d3.select('.color_params')
+                .append('option')
+                .text(palette_name)
+                .attrs({ value: `user_${palette_name}`, title: palette_name, nb_colors: colors.length });
+            } else {
+              d3.select('.color_params_right')
+                .append('option')
+                .text(palette_name)
+                .attrs({ value: `user_${palette_name}`, title: palette_name, nb_colors: colors.length });
+              d3.select('.color_params_left')
+                .append('option')
+                .text(palette_name)
+                .attrs({ value: `user_${palette_name}`, title: palette_name, nb_colors: colors.length });
+            }
+            addNewCustomPalette(palette_name, colors);
+          }
         });
     });
 
@@ -1300,19 +1354,42 @@ const prepare_ref_histo = (parent_node, serie, formatCount) => {
 
 function make_box_custom_palette(nb_class, existing_colors) {
   const is_hex_color = new RegExp(/^#([0-9a-f]{6}|[0-9a-f]{3})$/i);
+  const is_ok_name = new RegExp(/^[a-zA-Z0-9_]*$/);
+  const existing_palette = Array.from(_app.custom_palettes.keys());
+  let pal_name;
   let ref_colors;
   if (existing_colors && existing_colors.length === nb_class) {
     ref_colors = existing_colors.slice();
   } else {
     ref_colors = [];
     for (let i = 0; i < nb_class; i++) {
-      ref_colors.push('#fefefe');
+      ref_colors.push(randomColor());
     }
   }
 
+  const verif_palette_name = (name) => {
+    if (name !== '' && is_ok_name.test(name)) {
+      if (existing_palette.indexOf(name) > -1) {
+        d3.select('#palette_box_error_zone')
+          .html(i18next.t('app_page.palette_box.error_name_existing'));
+        document.querySelector('.swal2-confirm').disabled = true;
+        return null;
+      }
+      d3.select('#palette_box_error_zone')
+        .html('');
+      document.querySelector('.swal2-confirm').disabled = false;
+      return name;
+    } else {
+      d3.select('#palette_box_error_zone')
+        .html(i18next.t('app_page.palette_box.error_name_invalid'));
+      document.querySelector('.swal2-confirm').disabled = true;
+      return null;
+    }
+  };
+
   return swal({
     title: i18next.t('app_page.palette_box.title'),
-    html: '<div id="palette_box_content" style="display: inline-flex;"></div>',
+    html: '<div id="palette_box_content" style="display: inline-flex;"></div><div id="palette_box_name"></div>',
     showCancelButton: true,
     showConfirmButton: true,
     cancelButtonText: i18next.t('app_page.common.close'),
@@ -1345,9 +1422,23 @@ function make_box_custom_palette(nb_class, existing_colors) {
             this.previousSibling.value = this.value;
           }
         });
+      const bottom = d3.select('#palette_box_name');
+      bottom.append('p')
+        .attr('id', 'palette_box_error_zone')
+        .style('background', '#e3e3e3');
+      bottom
+        .append('span')
+        .html(i18next.t('app_page.palette_box.new_name'));
+      bottom
+        .append('input')
+        .style('width', '70px')
+        .on('keyup', function () {
+          if (verif_palette_name(this.value) !== null) pal_name = this.value;
+        });
+      document.querySelector('.swal2-confirm').disabled = true;
     },
   }).then(
-    v => ref_colors,
+    v => [ref_colors, pal_name],
     dismissValue => null,
   );
 }

magrit_app/static/js/interface.js

@@ -735,7 +735,7 @@ function update_menu_dataset() {
       '</i></span>'].join(''))
     .on('click', null);
   parent_elem.innerHTML += `<img width="13" height="13" src="static/img/Trash_font_awesome.png" id="remove_dataset" style="float:right;margin-top:10px;opacity:0.5">
-<img width="14" height="14" src="static/img/dataset.png" id="table_dataset_s1" style="float:right;margin:10px 7px 0 0;opacity:1">`;
+<img width="14" height="14" src="static/img/dataset.png" id="table_dataset_s1" style="float:right;margin:10px 5px 0 0;opacity:1">`;
 
   document.getElementById('remove_dataset').onclick = () => {
     remove_ext_dataset();
@@ -860,7 +860,7 @@ function update_section1(type, nb_fields, nb_ft, lyr_name_to_add) {
     .on('click', null);
   _input_geom.parentElement.innerHTML = `${_input_geom.parentElement.innerHTML}
 <img width="13" height="13" src="static/img/Trash_font_awesome.png" id="remove_target" style="float:right;margin-top:10px;opacity:0.5">
-<img width="14" height="14" src="static/img/dataset.png" id="table_layer_s1" style="float:right;margin:10px 7px 0 0;opacity:1">`;
+<img width="14" height="14" src="static/img/dataset.png" id="table_layer_s1" style="float:right;margin:10px 5px 0 0;opacity:1">`;
   const remove_target = document.getElementById('remove_target');
   remove_target.onclick = () => { remove_layer(Object.getOwnPropertyNames(user_data)[0]); };
   remove_target.onmouseover = function () { this.style.opacity = 1; };

magrit_app/static/js/layout_features.js

@@ -14,7 +14,7 @@ class UserArrow {
     this.id = id;
     this.stroke_width = 4;
     this.color = 'rgb(0, 0, 0)';
-
+    this.hide_head = undefined;
     if (!untransformed) {
       const zoom_param = svg_map.__zoom;
       this.pt1 = [(origin_pt[0] - zoom_param.x) / zoom_param.k, (origin_pt[1] - zoom_param.y) / zoom_param.k],
@@ -50,7 +50,7 @@ class UserArrow {
       })
       .on('drag', function () {
         d3.event.sourceEvent.preventDefault();
-        let _t = this.querySelector('line'),
+        const _t = this.querySelector('line'),
           arrow_head_size = +_t.style.strokeWidth.replace('px', ''),
           subject = d3.event.subject,
           tx = (+d3.event.x - +subject.x) / svg_map.__zoom.k,
@@ -97,10 +97,9 @@ class UserArrow {
         _t.y2.baseVal.value = self.pt2[1];
       });
 
-    let defs = parent.querySelector('defs'),
-      markers = defs ? defs.querySelector('marker') : null;
+    const markers_exists = (defs ? defs.node().querySelector('marker') : null);
 
-    if (!markers) {
+    if (!markers_exists) {
       this.add_defs_marker();
     }
     this.draw();
@@ -139,7 +138,7 @@ class UserArrow {
 
     this.arrow.insert('line')
       .attrs({
-        'marker-end': 'url(#arrow_head)',
+        'marker-end': this.hide_head ? null : 'url(#arrow_head)',
         x1: this.pt1[0],
         y1: this.pt1[1],
         x2: this.pt2[0],
@@ -353,6 +352,23 @@ class UserArrow {
         line.y2.baseVal.value = ny;
         document.getElementById('arrow_angle_text').value = +this.value;
       });
+    const s3 = box_content.append('p').attr('class', 'line_elem2');
+    s3.append('label')
+      .attrs({ for: 'checkbox_head_arrow' })
+      .html(i18next.t('app_page.arrow_edit_box.arrowHead'));
+    s3.append('input')
+      .attrs({ type: 'checkbox', id: 'checkbox_head_arrow' })
+      .styles({ 'margin-left': '45px', 'vertical-align': 'middle' })
+      .property('checked', self.hide_head === true)
+      .on('change', function () {
+        if (this.checked) {
+          self.hide_head = true;
+          self.arrow.select('line').attr('marker-end', null);
+        } else {
+          self.hide_head = false;
+          self.arrow.select('line').attr('marker-end', 'url(#arrow_head)');
+        }
+      });
   }
 }
 

magrit_app/static/js/main.js

@@ -2206,7 +2206,7 @@ function change_projection(new_proj_name) {
   } else if (!layer_name) {
     const layers_active = Array.prototype.filter.call(
       svg_map.querySelectorAll('.layer'), f => f.style.visibility !== 'hidden');
-    layer_name = layers_active.length > 0 ? layers_active[layers_active.length - 1].id : undefined;
+    layer_name = layers_active.length > 0 ? _app.id_to_layer.get(layers_active[layers_active.length - 1].id) : undefined;
   }
   if (layer_name) {
     scale_to_lyr(layer_name);
@@ -2246,7 +2246,8 @@ function change_projection_4(_proj) {
   if (!layer_name) {
     const layers_active = Array.prototype.filter.call(
       svg_map.querySelectorAll('.layer'), f => f.style.visibility !== 'hidden');
-    layer_name = layers_active.length > 0 ? layers_active[layers_active.length - 1].id : undefined;
+    layer_name = layers_active.length > 0
+      ? _app.id_to_layer.get(layers_active[layers_active.length - 1].id) : undefined;
   }
   if (!layer_name || layer_name === 'World' || layer_name === 'Sphere' || layer_name === 'Graticule') {
     scale_to_bbox([-10.6700, 34.5000, 31.5500, 71.0500]);

magrit_app/static/js/map_project.js

@@ -166,6 +166,7 @@ function get_map_template() {
           pt1: [line.x1.baseVal.value, line.y1.baseVal.value],
           pt2: [line.x2.baseVal.value, line.y2.baseVal.value],
           id: ft.id,
+          marker_head: line.getAttribute('marker-end'),
         });
       } else if (ft.classList.contains('txt_annot')) {
         if (!map_config.layout_features.text_annot) map_config.layout_features.text_annot = [];
@@ -575,10 +576,20 @@ function apply_user_preferences(json_pref) {
           desired_order.reverse();
           reorder_layers(desired_order);
         }
-      } else if (map_config.global_order && map_config.global_order.length > 1) {
+      } else if (p_version.minor <= 4) {
+        reorder_layers_elem_legends(map_config.global_order);
+        if (layers.length > 1) {
+          const desired_order = layers.map(i => i.layer_name);
+          reorder_elem_list_layer(desired_order);
+          desired_order.reverse();
+          reorder_layers(desired_order);
+        }
+      } else if (map_config.global_order && map_config.global_order.length > 1 && (p_version.minor > 4 || (p_version.minor === 4 && p_version.patch > 1))) { // Current method to reorder layers
         const order = layers.map(i => i.layer_name);
         reorder_elem_list_layer(order);
         reorder_layers_elem_legends(map_config.global_order);
+      } else {  // reorder layer
+
       }
       if (map_config.canvas_rotation) {
         document.getElementById('form_rotate').value = map_config.canvas_rotation;
@@ -643,7 +654,9 @@ function apply_user_preferences(json_pref) {
       if (map_config.layout_features.arrow) {
         for (let i = 0; i < map_config.layout_features.arrow.length; i++) {
           const ft = map_config.layout_features.arrow[i];
-          new UserArrow(ft.id, ft.pt1, ft.pt2, svg_map, true); // eslint-disable-line no-new
+          const _arrow = new UserArrow(ft.id, ft.pt1, ft.pt2, svg_map, true);
+          _arrow.hide_head = map_config.layout_features.arrow[i].marker_head === null;
+          _arrow.arrow.select('line').attr('marker-end', map_config.layout_features.arrow[i].marker_head);
         }
       }
       if (map_config.layout_features.user_ellipse) {

magrit_app/static/locales/en/translation.0845edbb9e79.json → magrit_app/static/locales/en/translation.a343feae5e81.json

@@ -401,6 +401,13 @@
             "unknown": "Unknown",
             "id": "Id"
         },
+        "palette_box": {
+            "button": "Custom palette?",
+            "title": "Custom palette",
+            "error_name_existing": "Palette name already in use",
+            "error_name_invalid": "Invalid palette name",
+            "new_name": "Palette name:"
+        },
         "explore_box": {
             "title": "Explore dataset",
             "button_add_field": "Add a new field...",
@@ -488,7 +495,8 @@
             "arrowWeight": "Arrow weight",
             "arrowColor": "Arrow color",
             "arrowAngle": "Slope",
-            "move_points": "Move arrow start or end point"
+            "move_points": "Move arrow start or end point",
+            "arrowHead": "Hide arrow head"
         },
         "ellipse_edit_box": {
             "title": "Ellipse options",