Added multiple key support

Fixed overlap in the signs
ElectronicBabylonianLiterature · May 23, 2024 · d0d8789 · d0d8789
1 parent 6834f58
commit d0d8789
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 24 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/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/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>