comment resolution 2

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) => {

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

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 (

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) =>

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 (
         <QueryPart

packages/core/components/QuerySidebar/Query.tsx

@@ -8,7 +8,7 @@ import QueryDataSource from "../QueryPart/QueryDataSource";
 import QueryFilter from "../QueryPart/QueryFilter";
 import QueryGroup from "../QueryPart/QueryGroup";
 import QuerySort from "../QueryPart/QuerySort";
-import { selection } from "../../state";
+import { selection, metadata } from "../../state";
 import { Query as QueryType } from "../../state/selection/actions";
 
 import styles from "./Query.module.css";
@@ -25,7 +25,7 @@ interface QueryProps {
 export default function Query(props: QueryProps) {
     const dispatch = useDispatch();
     const queries = useSelector(selection.selectors.getQueries);
-    const annotations = useSelector(selection.selectors.getSortedAnnotations);
+    const annotations = useSelector(metadata.selectors.getSortedAnnotations);
     const currentQueryParts = useSelector(selection.selectors.getCurrentQueryParts);
 
     const [isExpanded, setIsExpanded] = React.useState(false);

packages/core/state/metadata/selectors.ts

@@ -1,5 +1,27 @@
+import { createSelector } from "reselect";
+
 import { State } from "../";
+import Annotation, { AnnotationName } from "../../entity/Annotation";
 
 // BASIC SELECTORS
 export const getAnnotations = (state: State) => 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),
+        ]),
+    ];
+});

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";

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),
-        ]),
-    ];
-});