ramp4-pcar4 / ramp4-pcar4

RAMP 4 - The Reusable Accessible Mapping Platform, fourth major version
https://ramp4-pcar4.github.io/ramp4-pcar4/main/docs/
Other
16 stars 22 forks source link

Strange Legend Bug #2137

Open james-rae opened 7 months ago

james-rae commented 7 months ago

Description

Something funny happening with the legend context menus on layer-bound blocks. But can only reproduce on a prod site.

Visit Cumulative Effects. Open the context menu of each layer. Note they all have everything enabled, in particular, Metadata. The "Unmapped Initiatives" also has everything enabled. Note this is going to be patched so at some point the behavior will disappear.

By default, RAMP should be disabling the Metadata since there is none defined. It should also be disabling the layer-specific stuff for the Unmapped entry (Zoom to Boundary, Settings).

The config file is here, and I'll copy it to a comment since it will be updated.

Notice the legend entry for unmapped layer has layerControls: []. This is not correct, but should be making the menu on that entry be all disabled.

Testing locally, I cannot get the same behavior to reproduce. If layerControls: [] is there, the menu disables. All the other items have Metadata disabled regardless. Dan's QA version also starts working once the layerControls is removed.

Things to Consider

james-rae commented 7 months ago
{
  map: {
    extentSets: [ standard stuff ],
    caption: {
      mapCoords: {
        formatter: "WEB_MERCATOR",
      },
      scaleBar: {
        imperialScale: false,
      },
    },
    lodSets: [ standard stuff ],
    tileSchemas: [ standard stuff ],
    basemaps: [ standard stuff ],
    initialBasemapId: "baseNrCan",
  },
  layers: [
    {
      id: "ce_polygons",
      name: "Regional Initiatives",
      nameField: "Initiative",
      layerType: "esri-feature",
      expanded: true,
      url: "https://maps-cartes.ec.gc.ca/arcgis/rest/services/EPB/cumulative_effects_effets_cumulatifs/MapServer/4",
      state: {
        opacity: 0.5,
        symbologyExpanded: true,
        visibility: true,
      },
      identifyMode: "hybrid",
      customRenderer: {},
      expectedDrawTime: 50000,
      expectedLoadTime: 50000,
      fieldMetadata: {
        fieldInfo: [
          { name: "Overarching_Initiative" },
          { name: "Initiative" },
          { name: "Description" },
          { name: "Initiative_Type" },
          { name: "Departments" },
          { name: "Partners" },
          { name: "Province_or_Territory" },
          { name: "Relevant_Industry" },
          { name: "Related_OSDP_or_Open_Data_Links" },
          { name: "Further_Information" },
          { name: "Related_Initiatives" },
        ],
        exclusiveFields: true,
      },
    },
    {
      id: "ce_multipoints",
      name: "Multi-location Initiatives",
      nameField: "Initiative",
      layerType: "esri-feature",
      url: "https://maps-cartes.ec.gc.ca/arcgis/rest/services/EPB/cumulative_effects_effets_cumulatifs/MapServer/3",
      state: {
        visibility: true,
      },
      customRenderer: {},
      expectedDrawTime: 50000,
      expectedLoadTime: 50000,
    },
    {
      id: "ce_lines",
      name: "Linear Initiatives",
      nameField: "Initiative",
      layerType: "esri-feature",
      url: "https://maps-cartes.ec.gc.ca/arcgis/rest/services/EPB/cumulative_effects_effets_cumulatifs/MapServer/2",
      state: {
        visibility: true,
      },
      customRenderer: {},
      expectedDrawTime: 50000,
      expectedLoadTime: 50000,
      fieldMetadata: {
        fieldInfo: [
          { name: "Overarching_Initiative" },
          { name: "Initiative" },
          { name: "Description" },
          { name: "Initiative_Type" },
          { name: "Departments" },
          { name: "Partners" },
          { name: "Province_or_Territory" },
          { name: "Relevant_Industry" },
          { name: "Related_OSDP_or_Open_Data_Links" },
          { name: "Further_Information" },
          { name: "Related_Initiatives" },
        ],
        exclusiveFields: true,
      },
    },
    {
      id: "ce_points",
      name: "Local Initiatives",
      nameField: "Initiative",
      layerType: "esri-feature",
      url: "https://maps-cartes.ec.gc.ca/arcgis/rest/services/EPB/cumulative_effects_effets_cumulatifs/MapServer/1",
      state: {
        visibility: true,
      },
      customRenderer: {},
      expectedDrawTime: 50000,
      expectedLoadTime: 50000,
    },
    {
      id: "ce_table",
      name: "Initiatives - Unmapped",
      nameField: "Initiative",
      layerType: "data-esri-table",
      url: "https://maps-cartes.ec.gc.ca/arcgis/rest/services/EPB/cumulative_effects_effets_cumulatifs/MapServer/10",
      state: {
        visibility: true,
      },
      customRenderer: {},
      expectedLoadTime: 50000,
    },
  ],
  fixtures: {
    hilight: {
      mode: "glow",
      options: {
        haloColor: [242, 9, 137],
        haloOpacity: 1.0,
      },
    },
    northarrow: {
      poleIcon:
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
    },
    overviewmap: {
      basemaps: {
        DEFAULT_NRCAN_Lambert_3978: {
          id: "CBCT",
          tileSchemaId: "DEFAULT_NRCAN_Lambert_3978",
          layers: [
            {
              layerType: "esri-tile",
              url: "https://maps-cartes.services.geo.ca/server2_serveur2/rest/services/BaseMaps/CBCT3978/MapServer",
            },
          ],
        },
      },
      startMinimized: false,
    },
    legend: {
      headerControls : ["layerReorder", "groupToggle", "visibilityToggle"],
      root: {
        children: [
          {
            layerId: "ce_polygons",
            name: "Regional Initiatives",
            symbologyExpanded: false,
          },
          {
            layerId: "ce_multipoints",
            name: "Multi-location Initiatives",
            symbologyExpanded: false,
          },
          {
            layerId: "ce_lines",
            name: "Linear Initiatives",
            symbologyExpanded: false,
          },
          {
            layerId: "ce_points",
            name: "Local Initiatives",
            symbologyExpanded: false,
          },
          {
            layerId: "ce_table",
            name: "Unmapped Initiatives",
            layerControls: [],
            symbologyExpanded: false,
          },
        ],
      },
    },
    scrollguard: {
      enabled: true,
    },
    grid: {
      panelTeleport: {
        target: document.getElementById("ramp-grid"),
      },

      mergeGrids: [
        {
          gridId: "Umbrella_Initiative",
          layers: [
            {
              layerId: "ce_polygons",
            },
            {
              layerId: "ce_multipoints",
            },
            {
              layerId: "ce_lines",
            },
            {
              layerId: "ce_points",
            },
            { layerId: "ce_table" },
          ],
          options: {
            title: "Details about Initiatives",
            applyToMap: true,
            filterByExtent: true,
            controls: [
              {
                actionEvent: "hybridZoomAndDetails",
                icon: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="16" height="16" viewBox="0 0 16 16" xml:space="preserve"><g transform="matrix(0.67 0 0 0.67 8 8)"><path style=" stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #979797; fill-rule: nonzero; opacity: 1;" transform=" translate(-12, -12)" d="M 12 2 C 6.48 2 2 6.48 2 12 C 2 17.52 6.48 22 12 22 C 17.52 22 22 17.52 22 12 C 22 6.48 17.52 2 12 2 z M 11 19.93 C 7.05 19.44 4 16.08 4 12 C 4 11.38 4.08 10.79 4.21 10.21 L 9 15 L 9 16 C 9 17.1 9.9 18 11 18 L 11 19.93 z M 17.9 17.39 C 17.639999999999997 16.580000000000002 16.9 16 15.999999999999998 16 L 14.999999999999998 16 L 14.999999999999998 13 C 14.999999999999998 12.45 14.549999999999999 12 13.999999999999998 12 L 8 12 L 8 10 L 10 10 C 10.55 10 11 9.55 11 9 L 11 7 L 13 7 C 14.1 7 15 6.1 15 5 L 15 4.59 C 17.93 5.779999999999999 20 8.649999999999999 20 12 C 20 14.08 19.2 15.97 17.9 17.39 z" stroke-linecap="round" /></g></svg>',
                tooltip: "Open details and zoom to point",
              },
            ],
            columns: [
              { visible: false, field: "Shape_Length" },
              { visible: false, field: "Shape_Area" },
              {
                title: "Description",
                field: "Description",
                width: 300,
              },
              { width: 235, field: "Partners" },
            ],
          },
        },
      ],
    },
    appbar: {
      items: ["legend", "geosearch", "basemap", "layer-reorder"],
      items: ["legend", "geosearch", "basemap", "layer-reorder"],
    },
    mapnav: {
      items: ["help", "home", "geolocator", "basemap"],
    },
    help: {
      location: "assets/help",
    },
    details: {
      panelWidth: {
        default: 350,
        "details-items": 400,
      },
    },
    export: {
      title: {
        value: "Cumulative Effects",
        selectable: false,
      },
      legend: {
        selected: false,
      },
      fileName: "ce",
    },
    geosearch: {
      serviceUrls: {
        geoNames:
          "https://geogratis.gc.ca/services/geoname/@{language}/geonames.json",
        geoLocation:
          "https://geogratis.gc.ca/services/geolocation/@{language}/locate",
        geoTypes:
          "https://geogratis.gc.ca/services/geoname/@{language}/codes/concise.json",
        geoProvince:
          "https://geogratis.gc.ca/services/geoname/@{language}/codes/province.json",
      },
    },
  },
  panels: {
    open: [],
  },
  system: { animate: true, scrollToInstance: true },
}
sharvenp commented 6 months ago

It seems like a CSS styling issue as the disabled class is added and the logic seems to be working, but the class styles seem to be missing from the inspector: image image

Comparing this to the Data Layers in Sample 41: image image

The hint is that the disabled styles seem to be coming from the item's CSS and not from main.css. Perhaps moving the styles to main.css may fix this bug.

james-rae commented 6 months ago

Nice sleuthing @sharvenp . Could be something funny that project is doing with it's own special CSS that attempts to integrate RAMP, teleported grids, and WET into a cohesive manner.