diff --git a/packages/core/components/AnnotationPicker/index.tsx b/packages/core/components/AnnotationPicker/index.tsx index 2ea38ffce..98743c2c3 100644 --- a/packages/core/components/AnnotationPicker/index.tsx +++ b/packages/core/components/AnnotationPicker/index.tsx @@ -1,12 +1,13 @@ import * as React from "react"; +import { uniqBy } from "lodash"; import { useSelector } from "react-redux"; import ListPicker from "../ListPicker"; import { ListItem } from "../ListPicker/ListRow"; import { TOP_LEVEL_FILE_ANNOTATION_NAMES } from "../../constants"; -import Annotation, { AnnotationName } from "../../entity/Annotation"; -import { uniqBy } from "lodash"; -import { selection } from "../../state"; +import Annotation from "../../entity/Annotation"; + +import { selection, metadata } from "../../state"; interface Props { id?: string; @@ -28,7 +29,7 @@ interface Props { * downloading a manifest. */ export default function AnnotationPicker(props: Props) { - const annotations = useSelector(selection.selectors.getSortedAnnotations).filter( + const annotations = useSelector(metadata.selectors.getSortedAnnotations).filter( (annotation) => !props.disabledTopLevelAnnotations || !TOP_LEVEL_FILE_ANNOTATION_NAMES.includes(annotation.name) @@ -45,11 +46,6 @@ export default function AnnotationPicker(props: Props) { annotations.filter((annotation) => annotation.name === name) ); - const fileNameAnnotation = annotations.filter( - (annotation) => - annotation.name === AnnotationName.FILE_NAME || annotation.name === "File Name" - ); - // Define buffer item const bufferBar = { selected: false, @@ -60,7 +56,7 @@ export default function AnnotationPicker(props: Props) { }; // combine all annotation lists and buffer item objects - const rawItems = [...recentAnnotations, bufferBar, ...fileNameAnnotation, ...annotations]; + const rawItems = [...recentAnnotations, bufferBar, ...annotations]; const items = uniqBy( rawItems.flatMap((annotation) => { diff --git a/packages/core/components/FileDetails/FileAnnotationList.tsx b/packages/core/components/FileDetails/FileAnnotationList.tsx index 9fe435640..c0aca5145 100644 --- a/packages/core/components/FileDetails/FileAnnotationList.tsx +++ b/packages/core/components/FileDetails/FileAnnotationList.tsx @@ -5,7 +5,7 @@ import { useSelector } from "react-redux"; import FileAnnotationRow from "./FileAnnotationRow"; import Annotation, { AnnotationName } from "../../entity/Annotation"; import FileDetail from "../../entity/FileDetail"; -import { interaction, selection } from "../../state"; +import { interaction, metadata } from "../../state"; import styles from "./FileAnnotationList.module.css"; @@ -21,7 +21,7 @@ interface FileAnnotationListProps { */ export default function FileAnnotationList(props: FileAnnotationListProps) { const { className, fileDetails, isLoading } = props; - const annotations = useSelector(selection.selectors.getSortedAnnotations); + const annotations = useSelector(metadata.selectors.getSortedAnnotations); const { executionEnvService } = useSelector(interaction.selectors.getPlatformDependentServices); // The path to this file on the host this application is running on diff --git a/packages/core/components/QueryPart/QueryFilter.tsx b/packages/core/components/QueryPart/QueryFilter.tsx index 6e0c06df6..8bee1ed6f 100644 --- a/packages/core/components/QueryPart/QueryFilter.tsx +++ b/packages/core/components/QueryPart/QueryFilter.tsx @@ -7,7 +7,7 @@ import AnnotationPicker from "../AnnotationPicker"; import AnnotationFilterForm from "../AnnotationFilterForm"; import Tutorial from "../../entity/Tutorial"; import FileFilter from "../../entity/FileFilter"; -import { selection } from "../../state"; +import { selection, metadata } from "../../state"; import Annotation from "../../entity/Annotation"; interface Props { @@ -20,7 +20,7 @@ interface Props { export default function QueryFilter(props: Props) { const dispatch = useDispatch(); - const annotations = useSelector(selection.selectors.getSortedAnnotations); + const annotations = useSelector(metadata.selectors.getSortedAnnotations); const filtersGroupedByName = useSelector(selection.selectors.getGroupedByFilterName); return ( diff --git a/packages/core/components/QueryPart/QueryGroup.tsx b/packages/core/components/QueryPart/QueryGroup.tsx index 6c6edbff3..74b78a8fa 100644 --- a/packages/core/components/QueryPart/QueryGroup.tsx +++ b/packages/core/components/QueryPart/QueryGroup.tsx @@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux"; import QueryPart from "."; import AnnotationPicker from "../AnnotationPicker"; import Tutorial from "../../entity/Tutorial"; -import { selection } from "../../state"; +import { selection, metadata } from "../../state"; import Annotation from "../../entity/Annotation"; interface Props { @@ -17,7 +17,7 @@ interface Props { export default function QueryGroup(props: Props) { const dispatch = useDispatch(); - const annotations = useSelector(selection.selectors.getSortedAnnotations); + const annotations = useSelector(metadata.selectors.getSortedAnnotations); const selectedAnnotations = props.groups .map((annotationName) => diff --git a/packages/core/components/QueryPart/QuerySort.tsx b/packages/core/components/QueryPart/QuerySort.tsx index 7bfe1fe1a..3663b6992 100644 --- a/packages/core/components/QueryPart/QuerySort.tsx +++ b/packages/core/components/QueryPart/QuerySort.tsx @@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux"; import QueryPart from "."; import AnnotationPicker from "../AnnotationPicker"; -import { selection } from "../../state"; +import { selection, metadata } from "../../state"; import FileSort, { SortOrder } from "../../entity/FileSort"; import Tutorial from "../../entity/Tutorial"; @@ -17,7 +17,7 @@ interface Props { export default function QuerySort(props: Props) { const dispatch = useDispatch(); - const annotations = useSelector(selection.selectors.getSortedAnnotations); + const annotations = useSelector(metadata.selectors.getSortedAnnotations); return ( state.metadata.annotations; export const getDataSources = (state: State) => state.metadata.dataSources; + +// COMPOSED SELECTORS +export const getSortedAnnotations = createSelector(getAnnotations, (annotations: Annotation[]) => { + // Sort annotations by file name first then everything else alphabetically + const fileNameAnnotationIndex = annotations.findIndex( + (annotation) => + annotation.name === AnnotationName.FILE_NAME || annotation.name === "File Name" + ); + if (fileNameAnnotationIndex === -1) { + return Annotation.sort(annotations); + } + return [ + annotations[fileNameAnnotationIndex], + ...Annotation.sort([ + ...annotations.slice(0, fileNameAnnotationIndex), + ...annotations.slice(fileNameAnnotationIndex + 1), + ]), + ]; +}); diff --git a/packages/core/state/selection/reducer.ts b/packages/core/state/selection/reducer.ts index 5e4c3fc17..ecba81b5a 100644 --- a/packages/core/state/selection/reducer.ts +++ b/packages/core/state/selection/reducer.ts @@ -32,6 +32,7 @@ import { SET_FILE_GRID_COLUMN_COUNT, REMOVE_QUERY, RemoveQuery, + SetSortColumnAction, } from "./actions"; import FileSort, { SortOrder } from "../../entity/FileSort"; import Tutorial from "../../entity/Tutorial"; diff --git a/packages/core/state/selection/selectors.ts b/packages/core/state/selection/selectors.ts index fc51ccb38..e76ee70e2 100644 --- a/packages/core/state/selection/selectors.ts +++ b/packages/core/state/selection/selectors.ts @@ -2,7 +2,7 @@ import { groupBy, keyBy, map } from "lodash"; import { createSelector } from "reselect"; import { State } from "../"; -import Annotation, { AnnotationName } from "../../entity/Annotation"; +import Annotation from "../../entity/Annotation"; import FileExplorerURL, { FileExplorerURLComponents } from "../../entity/FileExplorerURL"; import FileFilter from "../../entity/FileFilter"; import FileFolder from "../../entity/FileFolder"; @@ -86,21 +86,3 @@ export const getUnavailableAnnotationsForHierarchy = createSelector( allAnnotations.filter((annotation) => !availableAnnotations.includes(annotation.name)) ) ); - -export const getSortedAnnotations = createSelector(getAnnotations, (annotations: Annotation[]) => { - // Sort annotations by file name first then everything else alphabetically - const fileNameAnnotationIndex = annotations.findIndex( - (annotation) => - annotation.name === AnnotationName.FILE_NAME || annotation.name === "File Name" - ); - if (fileNameAnnotationIndex === -1) { - return Annotation.sort(annotations); - } - return [ - annotations[fileNameAnnotationIndex], - ...Annotation.sort([ - ...annotations.slice(0, fileNameAnnotationIndex), - ...annotations.slice(fileNameAnnotationIndex + 1), - ]), - ]; -});