Function SourceExplorer

src/diagnosticTool/sourceExplorer.tsx:13–68

()

import { usePersistedState } from './usePersistentState';

export const SourceExplorer: FunctionComponent = () => {
  const dump = useDump();

  const uniqueIdMap = useMemo(() => {
    const map = new Map<number, IDiagnosticSource>();
    for (const source of dump.sources) {
      map.set(source.uniqueId, source);
    }
    return map;
  }, [dump.sources]);

  const indexed = useMemo(
    () =>
      dump.sources
        .map(
          source =>
            [
              [source.url, source.absolutePath, source.prettyName].join(' ').toLowerCase(),
              source,
            ] as [string, IDiagnosticSource],
        )
        .sort((a, b) => sortScore(a[1]) - sortScore(b[1])),
    [dump.sources],
  );

  const [filter, setFilter] = usePersistedState('filter', '');
  const results = useMemo(
    () =>
      filter
        ? indexed.filter(([str]) => str.includes(filter.toLowerCase())).map(([, src]) => src)
        : indexed.map(i => i[1]),
    [indexed, filter],
  );
  const onChange = useCallback(
    (evt: Event) => setFilter((evt.target as HTMLInputElement).value),
    [],
  );

  return (
    <Fragment>
      <input
        placeholder='Filter sources...'
        className='source-filter'
        value={filter}
        onChange={onChange}
        onKeyUp={onChange}
      />
      <small style={{ marginBottom: '1rem' }}>
        Showing {results.length} of {dump.sources.length} sources...
      </small>
      {results.map(result => (
        <Source source={result} allSources={uniqueIdMap} key={result.sourceReference} />
      ))}
    </Fragment>
  );
};

export const Source: FunctionComponent<{