Function LayersPanel

app/src/LayersPanel.tsx:17–137

(props: {
  layerVisibility: Accessor<LayerVisibility[]>;
  setLayerVisibility: Setter<LayerVisibility[]>;
  layerFeatureCounts?: Record<string, number>;

  basemapOption?: boolean;
  basemap?: Accessor<boolean>;
  setBasemap?: Setter<boolean>;
})

}

export function LayersPanel(props: {
  layerVisibility: Accessor<LayerVisibility[]>;
  setLayerVisibility: Setter<LayerVisibility[]>;
  layerFeatureCounts?: Record<string, number>;

  basemapOption?: boolean;
  basemap?: Accessor<boolean>;
  setBasemap?: Setter<boolean>;
}) {
  let checkallRef: HTMLInputElement | undefined;
  const [expanded, setExpanded] = createSignal<boolean>(true);

  const onChange = (id: string) => {
    const newLayerVisibility = props
      .layerVisibility()
      .map((l: LayerVisibility) =>
        l.id === id ? { ...l, visible: !l.visible } : l,
      );
    props.setLayerVisibility(newLayerVisibility);
  };

  const allChecked = createMemo(() => {
    const visibleLayersCount = props
      .layerVisibility()
      .filter((l: LayerVisibility) => l.visible).length;
    return visibleLayersCount === props.layerVisibility().length;
  });

  const toggleAll = () => {
    props.setLayerVisibility(
      props
        .layerVisibility()
        .map((l: LayerVisibility) => ({ ...l, visible: !allChecked() })),
    );
  };

  createEffect(() => {
    const visibleLayersCount = props
      .layerVisibility()
      .filter((l) => l.visible).length;
    const indeterminate =
      visibleLayersCount > 0 &&
      visibleLayersCount !== props.layerVisibility().length;
    if (checkallRef) {
      checkallRef.indeterminate = indeterminate;
    }
  });

  return (
    <div class="app-bg rounded app-border flex flex-col overflow-y-scroll max-h-100">
      <button
        type="button"
        classList={{
          "app-well": true,
          "rounded-t": expanded(),
          rounded: !expanded(),
          "cursor-pointer": true,
          "min-w-8": true,