ohif-viewer/extensions/default/src/Panels/DataSourceSelector.tsx

import React from 'react';
import classnames from 'classnames';
import { useNavigate } from 'react-router-dom';
import { useAppConfig } from '@state';

import { Button, ButtonEnums } from '@ohif/ui';

function DataSourceSelector() {
  const [appConfig] = useAppConfig();
  const navigate = useNavigate();

  // This is frowned upon, but the raw config is needed here to provide
  // the selector
  const dsConfigs = appConfig.dataSources;

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <div className="h-screen w-screen flex justify-center items-center ">
        <div className="py-8 px-8 mx-auto bg-secondary-dark drop-shadow-md space-y-2 rounded-lg">
          <img
            className="block mx-auto h-14"
            src="./ohif-logo.svg"
            alt="OHIF"
          />
          <div className="text-center space-y-2 pt-4">
            {dsConfigs
              .filter(
                it =>
                  it.sourceName !== 'dicomjson' &&
                  it.sourceName !== 'dicomlocal'
              )
              .map(ds => (
                <div key={ds.sourceName}>
                  <h1 className="text-white">{ds.friendlyName}</h1>
                  <Button
                    type={ButtonEnums.type.primary}
                    className={classnames('ml-2')}
                    onClick={() => {
                      navigate({
                        pathname: '/',
                        search: `datasources=${ds.sourceName}`,
                      });
                    }}
                  >
                    {ds.sourceName}
                  </Button>
                  <br />
                </div>
              ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default DataSourceSelector;