<commit_before>import MapboxGL, { MapboxGeoJSONFeature } from "mapbox-gl";
import { join } from "path";
import { s3ToHttps } from "../../s3";

import {
  GeoUnitCollection,
  DistrictId,
  DistrictsDefinition,
  FeatureId,
  GeoLevelInfo,
  GeoUnitIndices,
  GeoUnits,
  IStaticMetadata,
  LockedDistricts
} from "../../../shared/entities";

// Vector tiles with geolevel data for this geography
export const GEOLEVELS_SOURCE_ID = "db";
// GeoJSON district data for district as currently drawn
export const DISTRICTS_SOURCE_ID = "districts";
// Id for districts layer
export const DISTRICTS_LAYER_ID = "districts";

export function getMapboxStyle(path: string, geoLevels: readonly GeoLevelInfo[]): MapboxGL.Style {
  const lineLayers = geoLevels.flatMap(level => [
    {
      id: levelToLineLayerId(level.id),
      type: "line",
      source: GEOLEVELS_SOURCE_ID,
      "source-layer": level.id,
      paint: {
        "line-color": "#000",
        "line-opacity": ["interpolate", ["linear"], ["zoom"], 0, 0.1, 6, 0.1, 12, 0.2],
        "line-width": ["interpolate", ["linear"], ["zoom"], 6, 1, 12, 2]
      }
    }
  ]);

  const selectionLayers = geoLevels.flatMap(level => [
    {
      id: levelToSelectionLayerId(level.id),
      type: "fill",
      source: GEOLEVELS_SOURCE_ID,
      "source-layer": level.id,
      paint: {
        "fill-color": "#000",
        "fill-opacity": ["case", ["boolean", ["feature-state", "selected"], false], 0.5, 0]
      }
    }
  ]);

  const labelLayers = geoLevels.flatMap(level => [
    {
      id: levelToLabelLayerId(level.id),
      type: "symbol",
      source: GEOLEVELS_SOURCE_ID,
      "source-layer": `${level.id}labels`,
      layout: {
        "text-size": 12,
        "text-padding": 3,
        "text-field": "",
        "text-max-width": 10,
        "text-font": ["GR"],
        visibility: "none"
      },
      paint: {
        "text-color": "#000",
        "text-opacity": 0.9,
        "text-halo-color": "#fff",
        "text-halo-width": 1.25,
        "text-halo-blur": 0
      }
    }
  ]);

  return {
    // @ts-ignore
    layers: [
      {
        id: "district-placeholder",
        type: "background",
        paint: {
          "background-color": "transparent"
        },
        layout: {
          visibility: "none"
        }
      },
      ...selectionLayers,
      ...lineLayers,
      ...labelLayers
    ],
    glyphs: window.location.origin + "/fonts/{fontstack}/{range}.pbf",
    sprite: window.location.origin + "/sprites/sprite",
    name: "District Builder",
    sources: {
      [GEOLEVELS_SOURCE_ID]: {
        type: "vector",
        tiles: [join(s3ToHttps(path), "tiles/{z}/{x}/{y}.pbf")],
        minzoom: 4,
        maxzoom: 12
      }
    },
    version: 8
  };<commit_msg>Cast layers to MapboxGL.Layer[]<commit_after>import MapboxGL, { MapboxGeoJSONFeature } from "mapbox-gl";
import { join } from "path";
import { s3ToHttps } from "../../s3";

import {
  GeoUnitCollection,
  DistrictId,
  DistrictsDefinition,
  FeatureId,
  GeoLevelInfo,
  GeoUnitIndices,
  GeoUnits,
  IStaticMetadata,
  LockedDistricts
} from "../../../shared/entities";

// Vector tiles with geolevel data for this geography
export const GEOLEVELS_SOURCE_ID = "db";
// GeoJSON district data for district as currently drawn
export const DISTRICTS_SOURCE_ID = "districts";
// Id for districts layer
export const DISTRICTS_LAYER_ID = "districts";

export function getMapboxStyle(path: string, geoLevels: readonly GeoLevelInfo[]): MapboxGL.Style {
  const lineLayers = geoLevels.flatMap(level => [
    {
      id: levelToLineLayerId(level.id),
      type: "line",
      source: GEOLEVELS_SOURCE_ID,
      "source-layer": level.id,
      paint: {
        "line-color": "#000",
        "line-opacity": ["interpolate", ["linear"], ["zoom"], 0, 0.1, 6, 0.1, 12, 0.2],
        "line-width": ["interpolate", ["linear"], ["zoom"], 6, 1, 12, 2]
      }
    }
  ]);

  const selectionLayers = geoLevels.flatMap(level => [
    {
      id: levelToSelectionLayerId(level.id),
      type: "fill",
      source: GEOLEVELS_SOURCE_ID,
      "source-layer": level.id,
      paint: {
        "fill-color": "#000",
        "fill-opacity": ["case", ["boolean", ["feature-state", "selected"], false], 0.5, 0]
      }
    }
  ]);

  const labelLayers = geoLevels.flatMap(level => [
    {
      id: levelToLabelLayerId(level.id),
      type: "symbol",
      source: GEOLEVELS_SOURCE_ID,
      "source-layer": `${level.id}labels`,
      layout: {
        "text-size": 12,
        "text-padding": 3,
        "text-field": "",
        "text-max-width": 10,
        "text-font": ["GR"],
        visibility: "none"
      },
      paint: {
        "text-color": "#000",
        "text-opacity": 0.9,
        "text-halo-color": "#fff",
        "text-halo-width": 1.25,
        "text-halo-blur": 0
      }
    }
  ]);

  return {
    layers: [
      {
        id: "district-placeholder",
        type: "background",
        paint: {
          "background-color": "transparent"
        },
        layout: {
          visibility: "none"
        }
      },
      ...selectionLayers,
      ...lineLayers,
      ...labelLayers
    ] as MapboxGL.Layer[],
    glyphs: window.location.origin + "/fonts/{fontstack}/{range}.pbf",
    sprite: window.location.origin + "/sprites/sprite",
    name: "District Builder",
    sources: {
      [GEOLEVELS_SOURCE_ID]: {
        type: "vector",
        tiles: [join(s3ToHttps(path), "tiles/{z}/{x}/{y}.pbf")],
        minzoom: 4,
        maxzoom: 12
      }
    },
    version: 8
  };
{'fraction_non_alphanumeric': 0.16534296028880865, 'fraction_numerical': 0.016245487364620937, 'mean_word_length': 2.343995171997586, 'pattern_counts': {'":': 38, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5089373', 'n_tokens_mistral': 1985, 'n_tokens_neox': 1877, 'n_words': 386}