modifying the legend widget and ImageryLayer

LizEidsness

Problem: I have a situation where I have a raster from an ImageService.  I have applied a client side colormap.  I'd like the legend to reflect the colormap.  I'd like to know if my approach is ok.  When I put all the pieces together they fail, so I don't know if it's ok, or a bug.  

Also: In investigating this, I think I have found a bug or something. (I've e-mailed ESRI)

I have figured out how to modify the legend by changing activeLayerInfos / legendElements object.  This works fine on a click event.  You'll see the labels for the first two legend items change on a click on the map.  https://codepen.io/lizeidsness/pen/GbVvKp

This is going to be a little piece of a big pie, so I'd like to hook it up to an event/watch that's appropriate, and I'm having trouble finding the right one.  I have tried this.  https://codepen.io/lizeidsness/pen/xvKpje

Seems to work - EXCEPT  not with my ImageryLayer.  It reverts when you do anything.  

https://codepen.io/lizeidsness/pen/zgOpBL It's using the click handler, to better isolate the events.  If you drag the map around, the changes stay.  If you zoom, they are gone.  I haven't even attempted to put this together with my custom renderer because it's not working well yet.

LizEidsness

I resolved this one on my own, though ESRI did also provide a solution.  Both here.

Revised codepen:

https://codepen.io/lizeidsness/pen/zgOpBL

My problem was the watch wasn't set on the right thing.  So there's an initial watch on the activeLayerInfos.length property.  If there's a legend it will be > 0. 

New: If there's a layer in the legend, set a watch on it's legendElements object.  If this changes, it will update accordingly.

watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN>legend<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"activeLayerInfos.length"</SPAN><SPAN class="punctuation token">,</SPAN> setWatch<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">updateLegend</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">var</SPAN> activeLayer <SPAN class="operator token">=</SPAN> legend<SPAN class="punctuation token">.</SPAN>activeLayerInfos<SPAN class="punctuation token">.</SPAN><SPAN class="token function">find</SPAN><SPAN class="punctuation token">(</SPAN>e <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">return</SPAN> e<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">==</SPAN> layer<SPAN class="punctuation token">.</SPAN>title<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>activeLayer<SPAN class="punctuation token">.</SPAN>legendElements<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token"><</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>
    <SPAN class="keyword token">var</SPAN> element <SPAN class="operator token">=</SPAN> activeLayer<SPAN class="punctuation token">.</SPAN>legendElements<SPAN class="punctuation token">.</SPAN><SPAN class="token function">find</SPAN><SPAN class="punctuation token">(</SPAN>e <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">return</SPAN> e<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">==</SPAN> <SPAN class="string token">"symbol-table"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//add additional support</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    element<SPAN class="punctuation token">.</SPAN>infos<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>e <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
        lookup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>item <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">.</SPAN>label <SPAN class="operator token">==</SPAN> item<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                e<SPAN class="punctuation token">.</SPAN>label <SPAN class="operator token">=</SPAN> item<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">setWatch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>legend<SPAN class="punctuation token">.</SPAN>activeLayerInfos<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        legend<SPAN class="punctuation token">.</SPAN>activeLayerInfos<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>al <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
            watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</SPAN><SPAN class="punctuation token">(</SPAN>al<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"legendElements"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="token function">updateLegend</SPAN><SPAN class="punctuation token">(</SPAN>al<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

ESRI's solution would intercept the legend response from the service.  It would work well enough, if there isn't an appropriate API property to watch instead (in this case)

esriConfig<SPAN class="punctuation token">.</SPAN>request<SPAN class="punctuation token">.</SPAN>interceptors<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    urls<SPAN class="punctuation token">:</SPAN> imageryLayerUrl <SPAN class="operator token">+</SPAN> <SPAN class="string token">"/legend"</SPAN><SPAN class="punctuation token">,</SPAN>
    after<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        response<SPAN class="punctuation token">.</SPAN>data<SPAN class="punctuation token">.</SPAN>layers<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>legend<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>l <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
            l<SPAN class="punctuation token">.</SPAN>label <SPAN class="operator token">=</SPAN> <SPAN class="string token">"not "</SPAN> <SPAN class="operator token">+</SPAN> l<SPAN class="punctuation token">.</SPAN>label<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>