How to use solid-js - 10 common examples

function PlotWrapper(props: PlotWrapperProps) {
  let el: HTMLDivElement = null!;
  let chart: ECharts = null!;

  const [state, setState] = createState({
    mounted: false,
    cachedPlotData: null,
  })

  let updatePlot = (plotData: any) => {
    if (chart == null) {
      chart = echarts.init(el as HTMLDivElement);
    }
    console.log("updating plot with:", plotData)
    chart.setOption(plotData)
  }

  createEffect(() => {
    // effect to monitor changes to props.plotData
    let newPlotData = props.plotData;
    if (sample(() => state.mounted)) {

let chart: ECharts = null!;

  const [state, setState] = createState({
    mounted: false,
    cachedPlotData: null,
  })

  let updatePlot = (plotData: any) => {
    if (chart == null) {
      chart = echarts.init(el as HTMLDivElement);
    }
    console.log("updating plot with:", plotData)
    chart.setOption(plotData)
  }

  createEffect(() => {
    // effect to monitor changes to props.plotData
    let newPlotData = props.plotData;
    if (sample(() => state.mounted)) {
      // already mounted => we can call into the external lib directly
      updatePlot(newPlotData)
    } else {
      // not mounted => need to cache
      setState({cachedPlotData: newPlotData});
    }
  })

  let onMounted = () => {
    if (state.cachedPlotData != null) {
      updatePlot(state.cachedPlotData!)
      setState({cachedPlotData: null});
    }

function Table(props: {
    data: TableData,
    cbSort: (sortKind: number, columnIndex?: number) => void,
  }) {

  const [state, setState] = createState({
    rowsData: [] as Value[][],
    headerData: [] as ColHeader[],
    sortColIndex: undefined as (number | undefined),
    sortColKind: 0,
  })

  let columnFormatters = [] as ColumnFormatter[];

  createEffect(() => {
    console.log("Data updated", props.data.length)
    const data = props.data
    if (data.length == 0) {
      return;
    }

    // update column formatters

export function MapHandler(props: {
    store: StoreInterface,
    filter: string,
    onSetFilter: (s: string) => void,
  }) {

  const { store } = props

  const [state, setState] = createState({
    columns: [] as string[],
    mapData: {} as any,
    selectedCol: undefined! as number,
  })

  createEffect(() => {
    // handels updates of selected column indices
    let col = state.selectedCol;
    let filter = props.filter;
    if (col != undefined) {
      fetchData(col, filter);
    }
  })

  async function fetchColumns() {
    let columns = await store.fetchColumns()
    console.log(columns)
    setState({columns: columns})

    if (columns.length >= 1) {
      setState({
        selectedCol: 0,

try {
        let lines = [] as leaflet.Polyline[];
        for (let trajectory of mapData) {
          lines.push(leaflet.polyline(trajectory, {color: "red"}))
        }
        layerGroup = new leaflet.LayerGroup(lines);
        layerGroup!.addTo(map!);
      } catch {
        console.log("Invalid plot data");
      }
    }
    let t2 = performance.now()
    console.log("Updated map took", (t2 - t1) / 1000);
  }

  createEffect(() => {
    // effect to monitor changes to props.mapData
    let newMapData = props.mapData;
    if (sample(() => state.mounted)) {
      // already mounted => we can call into the external lib directly
      updateMap(newMapData)
    } else {
      // not mounted => need to cache
      setState({cachedMapData: newMapData});
    }
  })

  let onMounted = () => {
    if (state.cachedMapData != null) {
      updateMap(state.cachedMapData!)
      setState({cachedMapData: null});
    }

function Table(props: {
    data: TableData,
    cbSort: (sortKind: number, columnIndex?: number) => void,
  }) {

  const [state, setState] = createState({
    rowsData: [] as Value[][],
    headerData: [] as ColHeader[],
    sortColIndex: undefined as (number | undefined),
    sortColKind: 0,
  })

  let columnFormatters = [] as ColumnFormatter[];

  createEffect(() => {
    console.log("Data updated", props.data.length)
    const data = props.data
    if (data.length == 0) {
      return;
    }

    // update column formatters
    let numCols = data.length;
    columnFormatters.length = numCols;
    for (let j=0; j

}]
    };
    setState({plotData: plotData as any}) // FIXME: Partial doesn't seem to match specific types?
  }

  fetchColumns()

  let inputFilter: HTMLInputElement | undefined

  function onFilterKeydown(event: KeyboardEvent) {
    if (event.keyCode === 13 && inputFilter != undefined) {
      props.onSetFilter(inputFilter.value.trim())
    }
  }

  createEffect(() => {
    let newFilter = props.filter;
    console.log("PlotHandler: filter updated to", newFilter);
    if (inputFilter != undefined) {
      inputFilter.value = newFilter;
    }
  })

  return (
    <div>
      <div class="ui-widget-header">
      <div class="ui-form-row">
        <span class="ui-form-label">Filter</span>
          </div></div></div>

// allows to run the fetchData in parallel (otherwise it would
      // fetch with a page number that is larger than the possible
      // page number with the new filter => returning no data).
      // We'll have to see if resetting the page number is what we
      // want on changing selections...
      props.onSetFilter(inputFilter.value.trim())
      setState({
        pagination: {
          currentPage: 0,
          numPages: state.pagination.numPages,
        }
      })
    }
  }

  createEffect(() => {
    let newFilter = props.filter;
    console.log("TableHandler: filter updated to", newFilter);
    if (inputFilter != undefined) {
      inputFilter.value = newFilter;
    }
    // TODO: clarify why not sampling here causes an infinte loop.
    // Interestingly running either fetchNumPages or fetchDat alone is fine.
    // Only the combination causes an infinite loop.
    sample(() => {
      fetchNumPages()
      fetchData()
    })
  })

  function onPaginate(i: number) {
    setState({

export function PlotHandler(props: {
    store: StoreInterface,
    filter: string,
    onSetFilter: (s: string) => void,
  }) {

  const { store } = props

  /*
  const dataFetchOptions = {
    sortKind: 0,
  } as DataFetchOptions
  */

  const [state, setState] = createState({
    columns: [] as string[],
    plotData: {} as any,
    selectedColX: undefined! as number,
    selectedColY: undefined! as number,
  })

  createEffect(() => {
    // handels updates of selected column indices
    let xCol = state.selectedColX;
    let yCol = state.selectedColY;
    let filter = props.filter;
    if (xCol != undefined && yCol != undefined) {
      fetchData(xCol, yCol, filter);
    }
  })

export function MapHandler(props: {
    store: StoreInterface,
    filter: string,
    onSetFilter: (s: string) => void,
  }) {

  const { store } = props

  const [state, setState] = createState({
    columns: [] as string[],
    mapData: {} as any,
    selectedCol: undefined! as number,
  })

  createEffect(() => {
    // handels updates of selected column indices
    let col = state.selectedCol;
    let filter = props.filter;
    if (col != undefined) {
      fetchData(col, filter);
    }
  })

  async function fetchColumns() {
    let columns = await store.fetchColumns()