How to use the rxjs.combineLatest function in rxjs

const isPinned$ = message.self.createStream('PIN_STATE').pipe(
    pluck('payload'),
    startWith(false)
  )

  const withQSPanel$ = merge(
    // When Quick Search Panel show and hide
    from(message.send<'QUERY_QS_PANEL'>({ type: 'QUERY_QS_PANEL' })),
    message.createStream('QS_PANEL_CHANGED').pipe(
      pluck('payload'),
      startWith(false)
    )
  )

  return combineLatest(isPinned$, withQSPanel$).pipe(
    switchMap(([isPinned, withQSPanel]) => {
      const { instant: panelInstant } = config.panelMode
      const { instant: otherInstant } = config[
        withQSPanel ? 'qsPanelMode' : isPinned ? 'pinMode' : 'mode'
      ]

      if (!panelInstant.enable && !otherInstant.enable) {
        return of(null)
      }

      // Reduce GC
      // Only the latest result is used so it's safe to reuse the object
      const reuseObj = ({} as unknown) as {
        event: MouseEvent
        self: boolean
      }

export function useIndicesInViewport(
  indices$: Observable,
  data$: Observable,
  actualRows$: Observable
): Observable<[number, number]> {
  return combineLatest([indices$, data$, actualRows$]).pipe(
    map(([curIndex, data, actualRows]) => {
      // the first index of the virtualList on the last screen, if < 0, reset to 0
      const maxIndex = data.length - actualRows < 0 ? 0 : data.length - actualRows;
      return [Math.min(curIndex, maxIndex), actualRows];
    }),
    // if the index or actual rows changed, then update
    filter(([curIndex, actualRows]) => curIndex !== lastFirstIndex || actualRows !== actualRowsSnapshot),
    // update the index
    tap(([curIndex]) => (lastFirstIndex = curIndex)),
    map(([firstIndex, actualRows]) => {
      const lastIndex = firstIndex + actualRows - 1;
      return [firstIndex, lastIndex];
    })
  );
}

private bindRows(cursor: TableBodyCursor, query: Query) {
    this.rows$ = combineLatest([
      this.store$.pipe(select(selectTableRows(cursor.tableId))),
      this.store$.pipe(
        select(selectDocumentsByCustomQuery(query, false, true)),
        map(documents => new Set(documents.filter(document => document.id).map(document => document.id)))
      ),
    ]).pipe(
      debounceTime(10), // fixes not shown linked records after linked part is added
      map(([rows, existingDocumentIds]) => {
        return rows.filter(row => (row.documentId ? existingDocumentIds.has(row.documentId) : row.correlationId));
      }),
      tap(() => this.store$.dispatch(new TablesAction.SyncPrimaryRows({cursor, query}))),
      tap(() => setTimeout(() => this.setScrollbarWidth()))
    );
  }

(a, b, c, user) => user
    ).pipe(
      debounceTime(10),
      switchMap(user => {
        if (!user) {
          return of(null as APIMessageSummaryGetResponse);
        }

        return this.http.get(
          '/api/message/summary'
        );
      }),
      shareReplay(1)
    );

    this.new$ = combineLatest(
      this.auth.getUser(),
      this.deleted$,
      this.seen$,
      user => user
    ).pipe(
      debounceTime(10),
      switchMap(user => {
        if (!user) {
          return of(null as APIMessageNewGetResponse);
        }

        return this.http.get('/api/message/new');
      }),
      map(response => (response ? response.count : null))
    );
  }

return;
    }
    if (state) {
      this.pageState = PageState.fromState(state, {
        totalPage: this.pageState.page.totalPage,
        totalCount: this.pageState.page.totalCount
      });
    }
    if (!this.pageState.sort.by) {
      this.pageState.sort.by = 'id';
      this.pageState.sort.reverse = true;
    }
    this.pageState.params['deleted'] = false;
    this.pageState.params['statefulsetId'] = this.statefulsetId;
    this.pageState.params['isOnline'] = this.isOnline;
    combineLatest(
      this.statefulsetTplService.listPage(this.pageState, this.appId),
      this.publishService.listStatus(PublishType.STATEFULSET, this.statefulsetId)
    ).subscribe(
      response => {
        const status = response[1].data;
        this.publishStatus = status;
        const tpls = response[0].data;
        this.pageState.page.totalPage = tpls.totalPage;
        this.pageState.page.totalCount = tpls.totalCount;
        this.changedStatefulsetTpls = this.buildTplList(tpls.list, status);
        this.syncStatus();
      },
      error => this.messageHandlerService.handleError(error)
    );
  }

getCurrentConfiguration(defaultConfiguration: string) {
    return observableCombineLatest(
      this.routeService.getQueryParameterValue('configuration').pipe(startWith(undefined)),
      this.routeService.getRouteParameterValue('configuration').pipe(startWith(undefined))
    ).pipe(
      map(([queryConfig, routeConfig]) => {
        return queryConfig || routeConfig || defaultConfiguration;
      })
    );
  }

import {
  createEntityQuery
} from '@datorama/akita';
import {
  todosStore
} from './todos.store';
import {
  combineLatest
} from "rxjs";

export const todosQuery = createEntityQuery(todosStore);

export const selectFilter = todosQuery.select('filter');

export const visibleTodos = combineLatest(
  selectFilter,
  todosQuery.selectAll(),
  function getVisibleTodos(filter, todos) {
    switch (filter) {
      case "SHOW_COMPLETED":
        return todos.filter(t => t.completed);
      case "SHOW_ACTIVE":
        return todos.filter(t => !t.completed);
      default:
        return todos;
    }
  }
);

private getRouteParameters() {
    return combineLatest(
      this.route.parent.paramMap,
      this.route.paramMap
    ).pipe(
      tap(([parentParams, params]) => {
        this.contractAddress = parentParams.get("contractAddress");
        this.chosenVariable = params.get("chosenVariable");
      })
    )
  }

public static init$({
    monitor,
    binary,
    serverConfig,
  }: {
    readonly monitor: Monitor;
    readonly binary: Binary;
    readonly serverConfig: Config;
  }): Observable {
    const dataPath$ = serverConfig.config$.pipe(
      map((config) => config.paths.data),
      distinctUntilChanged(),
    );

    const portAllocator$ = combineLatest([
      dataPath$,
      serverConfig.config$.pipe(
        map((config) => config.ports),
        distinctUntilChanged(),
      ),
    ]).pipe(
      switchMap(([dataPath, ports]) =>
        defer(async () =>
          PortAllocator.create({
            monitor,
            dataPath,
            portMin: ports.min,
            portMax: ports.max,
          }),
        ),
      ),

getMerchandisingCarouselModel(
    cmsComponent: CmsMerchandisingCarouselComponent
  ): Observable {
    return combineLatest([
      of(cmsComponent),
      this.cdsMerchandisingProductService.loadProductsForStrategy(
        cmsComponent.strategy,
        cmsComponent.numberToDisplay
      ),
    ]).pipe(
      map(([componentData, strategyProducts]) => {
        const metadata = this.getCarouselMetadata(
          strategyProducts,
          componentData
        );
        const items$ = this.mapStrategyProductsToCarouselItems(
          strategyProducts
        );
        return {
          items$,