mirador/src/state/selectors/config.js

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.

import { createSelector } from 'reselect';
import deepmerge from 'deepmerge';
import { miradorSlice, EMPTY_ARRAY, EMPTY_OBJECT } from './utils';
import { getWorkspace } from './getters';

/**
 * Returns the config from the redux state.
 * @param {object} state
 * @returns {object} containing config
 */
export function getConfig(state) {
  const slice = miradorSlice(state || {});
  return slice.config || EMPTY_OBJECT;
}

/**
 * Extract an exportable version of state using the configuration from the config.
 * @param {object} state
 * @returns {object} containing exportable state
 */
export function getExportableState(state) {
  const exportConfig = getConfig(state).export;

  return Object.entries(exportConfig).reduce((acc, [stem, value]) => {
    if (value === true) {
      // eslint-disable-next-line no-param-reassign
      acc[stem] = state[stem];
    } else if (value.filter) {
      // eslint-disable-next-line no-param-reassign
      acc[stem] = Object.entries(state[stem])
        .filter(value.filter)
        .reduce((stemAcc, [k, v]) => {
          // eslint-disable-next-line no-param-reassign
          stemAcc[k] = v;
          return stemAcc;
        }, {});
    }
    return acc;
  }, {});
}

/**
 * Return languages from config (in state) and indicate which is currently set.
 * @param {object} state
 * @returns {Array} [ {locale: 'de', label: 'Deutsch', current: true}, ... ]
 */
export const getLanguagesFromConfigWithCurrent = createSelector([getConfig], ({ availableLanguages, language }) =>
  Object.keys(availableLanguages).map((key) => ({
    current: key === language,
    label: availableLanguages[key],
    locale: key,
  })),
);

/**
 * Returns if showZoomControls is set in the config.
 * @param {object} state
 * @returns {boolean}
 */
export const getShowZoomControlsConfig = createSelector([getWorkspace, getConfig], (workspace, config) =>
  workspace.showZoomControls === undefined ? config.workspace.showZoomControls : workspace.showZoomControls,
);

/**
 * Returns the theme from the config.
 * @param {object} state
 * @returns {object} {palette: {...}, typography: {...}, overrides: {...}, ...}
 */
export const getTheme = createSelector([getConfig], ({ theme, themes, selectedTheme }) =>
  deepmerge(theme, themes[selectedTheme] || {}),
);

/**
 * Returns the theme ids from the config.
 * @param {object} state
 * @returns {Array} ['dark', 'light']
 */
export const getThemeIds = createSelector([getConfig], ({ themes }) => Object.keys(themes));

/* @deprecated */
export const getContainerId = createSelector([getConfig], ({ id }) => id);

/**
 * Returns the theme direction from the config.
 * @param {object} state
 * @returns {string}
 */
export const getThemeDirection = createSelector([getConfig], ({ theme }) => theme.direction || 'ltr');
/**
 * Returns the requests configurations from the config.
 * @param {object} state
 * @returns {object} {preprocessor: [...], postprocessor: [...]}
 */
export const getRequestsConfig = createSelector([getConfig], ({ requests }) => requests || EMPTY_OBJECT);
/**
 * Returns the thumbnails configurations from the config.
 * @param {object} state
 * @returns {object} {preprocessor: [...], postprocessor: [...]}
 */
export const getThumbnailsConfig = createSelector([getConfig], ({ thumbnails }) => thumbnails || EMPTY_OBJECT);