Sort objects alphabetically #4 (Add option to sort statements alphabetically)

Author: sereyn

src/lib/Body.tsx

@@ -2,7 +2,7 @@ import { Alert, Box, Divider } from '@mui/material'
 import React, { useMemo } from 'react'
 import { useViewerContext } from './viewer-context'
 import Predicate from './Predicate'
-import { formatIRI } from './format'
+import { comparePredicates } from './common'
 
 function Body (): JSX.Element {
   const viewerCtx = useViewerContext()
@@ -13,12 +13,7 @@ function Body (): JSX.Element {
   const entries = useMemo(() => {
     if (predicates === undefined) return undefined
     return Object.entries(predicates)
-      // Sort predicates alphabetically
-      .sort(([a], [b]) => {
-        const fmtA = formatIRI(viewerCtx, a)
-        const fmtB = formatIRI(viewerCtx, b)
-        return fmtA.localeCompare(fmtB)
-      })
+      .sort(([a], [b]) => comparePredicates(viewerCtx, a, b))
   }, [predicates])
 
   if (entries === undefined) {

src/lib/Objects.tsx

@@ -1,12 +1,11 @@
 import { Objects as ObjectsI, Object as ObjectI } from './rdf-json'
 import React, { useMemo } from 'react'
-import { stringToHashNumber } from './hash'
 import { useViewerContext } from './viewer-context'
 import Qualifiers from './Qualifiers'
 import SimpleObject from './SimpleObject'
 import { usePredicateContext } from './predicate-context'
 import SeeMoreButton from './SeeMoreButton'
-import { isStandardReifiedStatement } from './common'
+import { compareObjects, isStandardReifiedStatement } from './common'
 
 interface Props {
   objects: ObjectsI
@@ -15,14 +14,12 @@ interface Props {
 function Objects (props: Props): JSX.Element {
   const { objects } = props
 
-  const { data, labelIRIs } = useViewerContext()
+  const viewerCtx = useViewerContext()
+  const { data, labelIRIs } = viewerCtx
   if (data === undefined) throw new Error('Objects: data is undefined')
   const { howManyVisibleObjects, setHowManyVisibleObjects } = usePredicateContext()
 
-  // Values sorted by type
-  const sortedObjects = useMemo(() => objects.sort((a, b) => (
-    stringToHashNumber(a.type) - stringToHashNumber(b.type)
-  )), [objects])
+  const sortedObjects = useMemo(() => objects.sort((a, b) => compareObjects(viewerCtx, a, b)), [objects])
 
   // Make groups of objects based on whether they are bnodes or not
   const groups = useMemo(() => {

src/lib/Qualifiers.tsx

@@ -1,4 +1,6 @@
 import { Box, TableCell, TableRow } from '@mui/material'
+import { useMemo } from 'react'
+import { compareObjects, comparePredicates } from './common'
 import { CopyIRIButton } from './CopyButton'
 import { formatIRI, getLabel } from './format'
 import QualifierContainer from './QualifierContainer'
@@ -20,7 +22,10 @@ function Qualifiers (props: Props): JSX.Element | null {
   const predicates: Predicates | undefined = data[qualifierObject.value]
   if (predicates === undefined) return null
 
-  const predicateKeys = Object.keys(predicates)
+  const predicateKeys = useMemo(() => {
+    return Object.keys(predicates)
+      .sort((a, b) => comparePredicates(viewerCtx, a, b))
+  }, [predicates])
 
   return (
     <QualifierContainer>
@@ -33,7 +38,7 @@ function Qualifiers (props: Props): JSX.Element | null {
             </LinkComponent>
           </TableCell>
           <TableCell>
-            {predicates[predicate].map((object, i) => (
+            {predicates[predicate].sort((a, b) => compareObjects(viewerCtx, a, b)).map((object, i) => (
               <Box key={i}>
                 <SimpleObject object={object} noContainer />
               </Box>

src/lib/common.tsx

@@ -1,4 +1,7 @@
+import { formatIRI } from './format'
+import { stringToHashNumber } from './hash'
 import { Object as ObjectI, RdfJson } from './rdf-json'
+import { ViewerContextI } from './viewer-context'
 
 export function isStandardReifiedStatement (data: RdfJson, object: ObjectI, labelIRIs: string[]): boolean {
   // After having removed the label predicates/objects, we check if the statement's object is
@@ -15,3 +18,17 @@ export function isStandardReifiedStatement (data: RdfJson, object: ObjectI, labe
     .filter(([p]) => !labelIRIs.includes(p)) // Remove label predicates
     .length > 0 // Check if there are any predicates left
 }
+
+export function comparePredicates (viewerCtx: ViewerContextI, a: string, b: string): number {
+  const fmtA = formatIRI(viewerCtx, a)
+  const fmtB = formatIRI(viewerCtx, b)
+  return fmtA.localeCompare(fmtB)
+}
+
+export function compareObjects (viewerCtx: ViewerContextI, a: ObjectI, b: ObjectI): number {
+  const deltaType = stringToHashNumber(a.type) - stringToHashNumber(b.type)
+  if (deltaType !== 0) return deltaType
+  const fmtA = formatIRI(viewerCtx, a.value)
+  const fmtB = formatIRI(viewerCtx, b.value)
+  return fmtA.localeCompare(fmtB)
+}