html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#viewDiv {
  width: 100%;
}

main {
  display: flex;
  height: 100%;
}

.container {
  width: 400px;
  height: 100vh;
  overflow-y: auto;
}

.ui-info--count {
    margin-left: 1rem;
    margin-right: 1rem;
}

import ArcGISMap from "https://js.arcgis.com/next/@arcgis/core/Map.js";
import MapView from "https://js.arcgis.com/next/@arcgis/core/views/MapView.js";
import FeatureLayer from "https://js.arcgis.com/next/@arcgis/core/layers/FeatureLayer.js";
import { whenFalseOnce } from "https://js.arcgis.com/next/@arcgis/core/core/watchUtils.js";
import Feature from "https://js.arcgis.com/next/@arcgis/core/widgets/Feature.js";

const fLayer = new FeatureLayer({
  portalItem: {
    id: "f430d25bf03744edbb1579e18c4bf6b8"
  },
  layerId: 2,
  outFields: ["*"]
});

const map = new ArcGISMap({
  basemap: "gray-vector",
  layers: [fLayer]
});

const view = new MapView({
  container: "viewDiv",
  map,
  center: [-118, 34],
  zoom: 12
});

const featureTarget = document.getElementById("featureTarget");
const btnZoom = document.getElementById("btnZoom");
const previous = document.getElementById("btnPrevious");
const next = document.getElementById("btnNext");
const info = document.getElementById("infoCount");

const feature = new Feature({
  view,
  container: featureTarget
});

view.when(async () => {
  // do stuff here
  let highlight;
  let currIndex = 0;
  let totalCount = 1;
  const layerView = await view.whenLayerView(fLayer);
  await whenFalseOnce(view, "updating");
  const query = fLayer.createQuery();
  query.geometry = view.extent;
  const { features } = await layerView.queryFeatures(query);
  
  const update = () => {
    if (currIndex < 0) {
      currIndex = features.length - 1;
    }
    else if (currIndex === features.length) {
      currIndex = 0;
    }
    
    feature.graphic = features[currIndex];
    info.innerText = `${currIndex + 1} of ${features.length}`;
    
    // highlight
    highlight && highlight.remove();
    highlight = layerView.highlight(feature.graphic);
  };
  
  btnPrevious.addEventListener("click", () => {
    currIndex = currIndex - 1;
    update();
  });
  btnNext.addEventListener("click", () => {
    currIndex = currIndex + 1;
    update();
  });
  
  btnZoom.addEventListener("click", () => {
    view.goTo({
      target: feature.graphic
    });
  });
  
  update();
  
});