How to hide a single Graphic on a FeatureLayer

Question

How can I hide a single Graphic on a FeatureLayer?

If I click on a Feature i get a Popup with the ActionButton "hide feature".

In the code i am listening on the corresponding event like

I've tried to set the visiblity of the selected feature to false but it is still visible:

mapView.popup.selectedFeature.visible = false;

Even if i try do remove all graphics of the FeatureLayer they are still visible:

const featureLayer = mapView.popup.selectedFeature.layer as FeatureLayer;
featureLayer.removeAll();
featureLayer.refresh();

I have also tried to set the definitionExpression of the layer for filtering but this has no effect either.

Is there an easy way to hide a single graphic from a FeatureLayer by setting visibility or removing the feature from the Layer?

RRubalcava · Answer

You can use a FeatureFilter, which will done on the layerView, which will filter data already downloaded on the client. I'm guessing in your use case, you are updating the def expression a bit, it needs to refetch the data based on that, and could cause a perf issue.

But if you do it on the LayerView, the data is already available and filtering is fast.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureFilter.html

You can set the where clause and you will get much better performance. The data is still downloaded as normal, but you won't keep refetching it as you update the definition expression.

Here's a sample that uses it.

https://developers.arcgis.com/javascript/latest/sample-code/featurefilter-attributes/

KevinWrona · Answer

Hi Rene,

thanks for quick response. This works for my simple layers. On layers with many features i got a performance issue.

Generally it looks like a workaround because the performance on small layers is also not so good. On a layer with maximum 10 Features it is like 2 seconds and on a feature layer with 1000 features it is like 10 seconds ...

Is there no other solution like visible = true / false?

RRubalcava · Answer

FeatureLayer doesn't have a removeAll method, that's a GraphicsLayer.

But you can accomplish this by updating the definitionExpression of a FeatureLayer.

let defExpression;
let oids = [];
view.when(() => {
  const oidField = featureLayer.objectIdField;
  view.popup.on("trigger-action", ({ action }) => {
    if (action.id === "hide-this") {
      const oid = view.popup.selectedFeature.attributes[oidField];
      oids.push(oid);
      defExpression = `${oidField} NOT IN (${oids.join(",")})`;
      featureLayer.definitionExpression = defExpression;
    }
  });
});

Here's a codepen demo

https://codepen.io/odoe/pen/RwJORed?editors=0010