Fix following preceding signs (#481)

* * Added space between lines * Signs are aligned by KWIC * Added space after similar text * Underline restored for signs' links * Fixed gradient * Reduced complexity * Refactoring * Added multiple key support Fixed overlap in the signs * Test fixed * fixed test * Refactoring
ElectronicBabylonianLiterature · May 24, 2024 · edd00b4 · edd00b4
1 parent d73b466
commit edd00b4
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 32 deletions.
diff --git a/src/signs/application/SignService.ts b/src/signs/application/SignService.ts
@@ -33,7 +33,10 @@ export default class SignService {
   listAllSigns(): Bluebird<string[]> {
     return this.signsRepository.listAllSigns()
   }
-  findSignsByOrder(signName: string, sortEra: string): Bluebird<OrderedSign[]> {
+  findSignsByOrder(
+    signName: string,
+    sortEra: string
+  ): Bluebird<[OrderedSign[]]> {
     return this.signsRepository.findSignsByOrder(signName, sortEra)
   }
 }
diff --git a/src/signs/infrastructure/SignRepository.ts b/src/signs/infrastructure/SignRepository.ts
@@ -80,7 +80,10 @@ class SignRepository {
   listAllSigns(): Promise<string[]> {
     return this.apiClient.fetchJson(`/signs/all`, false)
   }
-  findSignsByOrder(signName: string, sortEra: string): Promise<OrderedSign[]> {
+  findSignsByOrder(
+    signName: string,
+    sortEra: string
+  ): Promise<[OrderedSign[]]> {
     return this.apiClient.fetchJson(
       `/signs/${encodeURIComponent(signName)}/${sortEra}`,
       false

diff --git a/src/signs/ui/search/SignSearch.test.tsx b/src/signs/ui/search/SignSearch.test.tsx
@@ -14,7 +14,7 @@ jest.mock('signs/application/SignService')
 
 let signs: Sign[]
 const signService = new (SignService as jest.Mock<jest.Mocked<SignService>>)()
-const orderedSigns = OrderedSignFactory.buildList(2)
+const orderedSigns = OrderedSignFactory.build()
 
 const query = {
   value: 'bu',

diff --git a/src/signs/ui/search/Signs.sass b/src/signs/ui/search/Signs.sass
@@ -46,10 +46,12 @@
 .Neo-Assyrian
   font-size: 150%
   font-family: Assurbanipal, Junicode, serif
+  padding-left: 5px
 
 .Neo-Babylonian
   font-size: 150%
   font-family: Neo-Babylonian,'Adobe Blank', Junicode, serif
+  padding-left: 5px
 
 .beginning
   background: linear-gradient(to left, grey 50%, blue 50%)

diff --git a/src/signs/ui/search/Signs.test.tsx b/src/signs/ui/search/Signs.test.tsx
@@ -13,7 +13,7 @@ jest.mock('signs/application/SignService')
 const SignsWithRouter = withRouter<any, typeof Signs>(Signs)
 
 const signs = signFactory.buildList(2)
-const orderedSigns = OrderedSignFactory.buildList(2)
+const orderedSigns = OrderedSignFactory.build()
 const signService = new (SignService as jest.Mock<jest.Mocked<SignService>>)()
 let session: MemorySession
 

diff --git a/src/signs/ui/search/SignsSearch.tsx b/src/signs/ui/search/SignsSearch.tsx
@@ -27,18 +27,29 @@ function displayUnicode(unicode: readonly number[]): string {
   return unicode.map((unicode) => String.fromCodePoint(unicode)).join('')
 }
 
+function renderSimilarText(label, isFirstSubArray, direction, language) {
+  if (label === 'before' && isFirstSubArray) {
+    return (
+      <td className="similar_text">{`Similar ${direction} (${language}): `}</td>
+    )
+  } else if (label === 'before' && !isFirstSubArray) {
+    return <td className="similar_text"></td>
+  } else {
+    return null
+  }
+}
+
 const renderSignColumn = (
   data,
   startIndex,
   endIndex,
   label,
   direction,
-  language
+  language,
+  isFirstSubArray
 ) => (
   <>
-    {label === 'before' && (
-      <td className="similar_text">{`Similar ${direction} (${language}): `}</td>
-    )}
+    {renderSimilarText(label, isFirstSubArray, direction, language)}
     <td className={label}>
       {data.slice(startIndex, endIndex).map((item, index) => (
         <span
@@ -62,40 +73,76 @@ const renderSignColumn = (
 const SignLists = withData<
   { sign: Sign; sortEra: string },
   { signService: SignService },
-  OrderedSign[]
+  [OrderedSign[]]
 >(
   ({ data, sign, sortEra }) => {
     const direction = sortEra.includes('Onset') ? 'beginning' : 'ending'
     const language = sortEra.includes('Babylonian')
       ? 'Neo-Babylonian'
       : 'Neo-Assyrian'
-    const signIndex = data.findIndex((item) => item.name === sign.name)
 
-    return _.isEmpty(data) ? null : (
+    const renderColumns = (
+      subArray,
+      signIndex,
+      direction,
+      language,
+      isFirstSubArray
+    ) => (
       <>
-        {renderSignColumn(data, 0, signIndex, 'before', direction, language)}
         {renderSignColumn(
-          data,
+          subArray,
+          0,
+          signIndex,
+          'before',
+          direction,
+          language,
+          isFirstSubArray
+        )}
+        {renderSignColumn(
+          subArray,
           signIndex,
           signIndex + 1,
           'center',
           direction,
-          language
+          language,
+          isFirstSubArray
         )}
         {renderSignColumn(
-          data,
+          subArray,
           signIndex + 1,
-          data.length,
+          subArray.length,
           'after',
           direction,
-          language
+          language,
+          isFirstSubArray
         )}
       </>
     )
+
+    return _.isEmpty(data) ? null : (
+      <>
+        {data.map((subArray, index) => {
+          const signIndex = subArray.findIndex(
+            (item) => item.name === sign.name
+          )
+          const isFirstSubArray = index === 0
+          return (
+            <tr key={index}>
+              {renderColumns(
+                subArray,
+                signIndex,
+                direction,
+                language,
+                isFirstSubArray
+              )}
+            </tr>
+          )
+        })}
+      </>
+    )
   },
   (props) => props.signService.findSignsByOrder(props.sign.name, props.sortEra)
 )
-
 function SignsSearch({
   signs,
   isIncludeHomophones,
@@ -116,14 +163,12 @@ function SignsSearch({
           <table>
             <tbody>
               {parameters.map((params, idx) => (
-                <tr key={idx}>
-                  <SignLists
-                    key={idx}
-                    sign={sign}
-                    signService={signService}
-                    sortEra={params}
-                  />
-                </tr>
+                <SignLists
+                  key={idx}
+                  sign={sign}
+                  signService={signService}
+                  sortEra={params}
+                />
               ))}
             </tbody>
           </table>

diff --git a/src/test-support/sign-fixtures.ts b/src/test-support/sign-fixtures.ts
@@ -18,12 +18,16 @@ lita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lor
 `
 const LaBaSi = `123`
 
-export const OrderedSignFactory = Factory.define<OrderedSign>(() => {
-  return {
-    name: chance.pickone(['BA', 'BAD', 'BAR', 'PI']),
-    unicode: chance.pickone([[1444], [1321], [16611], [161771]]),
-    mzl: chance.pickone(['131', '156', '131', '161']),
-  }
+export const OrderedSignFactory = Factory.define<[OrderedSign[]]>(() => {
+  return [
+    [
+      {
+        name: chance.pickone(['BA', 'BAD', 'BAR', 'PI']),
+        unicode: [chance.integer({ min: 10000, max: 99999 })],
+        mzl: chance.pickone(['131', '156', '131', '161']),
+      },
+    ],
+  ]
 })
 
 export const signFactory = Factory.define<Sign>(() => {