Translation mapping

src/sass/_dark.scss

@@ -74,15 +74,15 @@
         }
     }
 
-    table {
+    #metadata {
         background-color: $dark-color-metadata-bg;
         color: $dark-color-metadata-fg;
         border-color: $dark-color-metadata-bg;
-    }
 
-    td {
-        a {
-            color: $dark-color-metadata-fg;
+        td {
+            a {
+                color: $dark-color-metadata-fg;
+            }
         }
     }
 

src/sass/lyrics-metadata.scss

@@ -1,5 +1,5 @@
 // Purpose: make metadata look different from the song text
-table {
+#metadata {
     margin: 0;
     text-align: left;
     background-color: $color-metadata-bg;
@@ -8,74 +8,74 @@ table {
     border: 1px solid $color-metadata-bg;
 
     border-collapse: collapse;
-}
 
-td {
-    padding: ($vertical-spacing / 2) $horizontal-spacing;
+    td {
+        padding: ($vertical-spacing / 2) $horizontal-spacing;
 
-    // Purpose: underline metadata links
-    a {
-        text-decoration: underline;
+        // Purpose: underline metadata links
+        a {
+            text-decoration: underline;
+        }
     }
-}
 
-tr {
-    &:first-child {
-        td {
-            padding-top: $vertical-spacing;
+    tr {
+        &:first-child {
+            td {
+                padding-top: $vertical-spacing;
+            }
         }
-    }
 
-    &:last-child {
-        td {
-            padding-bottom: $vertical-spacing;
+        &:last-child {
+            td {
+                padding-bottom: $vertical-spacing;
+            }
         }
     }
-}
 
-// Purpose: highlight item names by making them bold,
-//          add extra spacing between item names and item values
-td:first-child {
-    font-weight: bold;
+    // Purpose: highlight item names by making them bold,
+    //          add extra spacing between item names and item values
+    td:first-child {
+        font-weight: bold;
 
-    // Purpose: make the left column as thin as possible
-    width: 1%;
+        // Purpose: make the left column as thin as possible
+        width: 1%;
 
-    // Purpose: ensure metadata headers are never wrapped
-    white-space: nowrap;
+        // Purpose: ensure metadata headers are never wrapped
+        white-space: nowrap;
 
-    //
-    vertical-align: top;
+        //
+        vertical-align: top;
+    }
 }
 
 // Mobile CSS
 @include mobile {
-    table {
+    #metadata {
         border: none;
-    }
 
-    td {
-        padding: ($mobile-vertical-spacing / 2) $mobile-horizontal-spacing;
-    }
+        td {
+            padding: ($mobile-vertical-spacing / 2) $mobile-horizontal-spacing;
+        }
 
-    tr {
-        &:first-child {
-            td {
-                padding-top: $mobile-vertical-spacing;
+        tr {
+            &:first-child {
+                td {
+                    padding-top: $mobile-vertical-spacing;
+                }
             }
-        }
 
-        &:last-child {
-            td {
-                padding-bottom: $mobile-vertical-spacing;
+            &:last-child {
+                td {
+                    padding-bottom: $mobile-vertical-spacing;
+                }
             }
         }
     }
 }
 
 // Paper CSS
 @include print {
-    table {
+    #metadata {
         border: none;
     }
 }

src/sass/page.scss

@@ -138,6 +138,7 @@ b {
 @import "link.scss";
 @import "list.scss";
 @import "lyrics-container.scss";
+@import "translation-container.scss";
 
 // Mobile CSS
 @include mobile {

src/sass/translation-container.scss

@@ -0,0 +1,32 @@
+#translation-container {
+    margin: 0 auto;
+    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.04);
+    width: fit-content;
+    min-width: 50%;
+    max-width: 100%;
+
+    display: flex;
+    flex-direction: column;
+
+    table {
+        background: $color-lyrics-bg;
+        color: $color-lyrics-fg;
+    }
+
+    td {
+        vertical-align: top;
+
+        &:empty::after{
+          content: "\00a0";
+        }
+    }
+}
+
+@include dark {
+    #translation-container {
+        table {
+            background: $dark-color-lyrics-bg;
+            color: $dark-color-lyrics-fg;
+        }
+    }
+}

src/templates/lyrics-metadata.mustache

@@ -1 +1 @@
-<table><tbody>{{#.}}<tr><td>{{key}}&nbsp;</td><td>{{{value}}}</td>{{/.}}</tbody></table>
+<table id="metadata"><tbody>{{#.}}<tr><td>{{key}}&nbsp;</td><td>{{{value}}}</td>{{/.}}</tbody></table>

src/templates/translation-container.mustache

@@ -0,0 +1,20 @@
+<div id="translation-container">
+    <table>
+        {{#lines}}
+        <tr>
+            {{#.}}
+            <td>{{.}}</td>
+            {{/.}}
+        </tr>
+        {{/lines}}
+    </table>
+    {{#metadata}}
+        <hr/>
+        {{{metadata}}}
+    {{/metadata}}
+    {{#actions}}
+        <div id="lyrics-actions">
+            {{{actions}}}
+        </div>
+    {{/actions}}
+</div>

transmap.py

@@ -0,0 +1,66 @@
+import re
+from enum import Enum, auto
+
+class NodeType(Enum):
+    ORIG = auto()
+    TRANS = auto()
+
+p_inter_refs = re.compile('\s')
+p_inter_ref = re.compile(',')
+p_ref = re.compile('^(?P<sign>[-+]?)(?P<position>\d+)(?::(?P<weight>\d+))?$')
+
+def parse_mapping(s):
+    refs_num = 0
+    ref_num = 0
+    cur_pos = 0
+    result = list()
+    for refs in p_inter_refs.split(s):
+        l = list()
+        if refs:
+            for ref in p_inter_ref.split(refs):
+                m = p_ref.match(ref)
+                if m:
+                    (sign, pos, weight) = m.groups()
+                    p = int(pos)
+                    w = int(weight) if weight else 1
+                    if sign == '+':
+                        cur_pos += p
+                    elif sign == '-':
+                        cur_pos -= p
+                    else:
+                        cur_pos = p
+                    l.append((cur_pos, w))
+                else:
+                    raise Exception('Failed to parse a reference at {}:{}'.
+                                    format(refs_num, ref_num))
+                ref_num += 1
+        result.append(l)
+        refs_num += 1
+        ref_num = 0
+    return result
+
+def get_components(l, threshold):
+    ## Build a graph
+    g = dict()
+    for i in range(len(l)):
+        g[(NodeType.TRANS, i)] = list()
+        for (to, w) in l[i]:
+            if w >= threshold:
+                g[(NodeType.TRANS, i)].append((NodeType.ORIG, to))
+                if (NodeType.ORIG, to) in g:
+                    g[(NodeType.ORIG, to)].append((NodeType.TRANS, i))
+                else:
+                    g[(NodeType.ORIG, to)] = list([(NodeType.TRANS, i)])
+    ## Find connected components
+    components = list()
+    while g:
+        (key, queue) = g.popitem()
+        if queue:
+            component = set([key])
+            while queue:
+                k = queue.pop()
+                component.add(k)
+                if k in g:
+                    queue += g.pop(k)
+            components.append(component)
+    return components

utils.py

@@ -34,12 +34,27 @@ def missingFilter(r):
                 recordings[-1]["printable_name"] = ""
                 existingTrackNumbers.append(prevTrackNoStr)
 
-def formatLyricsAndMetadata(templates, lyricsText, lyricsMetadataDict, lyricsActionsList):
+def formatActions(lyricsActionsList):
+    ## Process action buttons
+    actionsHtml = None
+    if len(lyricsActionsList) > 0:
+        actionsHtml = "<br />".join(lyricsActionsList)
+    return actionsHtml
+
+def formatLyricsPageContents(templates, lyricsText, lyricsMetadataDict, lyricsActionsList):
     ## Separate text into paragraphs
     lyricsHtml = re.sub("\n\n+", "<br/><span></span><br/><span></span>", lyricsText)
     ## Convert newline characters into linebreaks
     lyricsHtml = re.sub("\n", "\n<br/><span></span>", lyricsHtml)
 
+    html = pystache.render(templates["lyrics-container"], {
+        "lyrics":   lyricsHtml,
+        "metadata": formatMetadata(templates, lyricsMetadataDict),
+        "actions":  formatActions(lyricsActionsList),
+    })
+    return html
+
+def formatMetadata(templates, lyricsMetadataDict):
     ## Proccess metadata keys and values
     metadataHtml = None
     if len(lyricsMetadataDict) > 0:
@@ -60,18 +75,7 @@ def formatLyricsAndMetadata(templates, lyricsText, lyricsMetadataDict, lyricsAct
                     "content": value[0],
                 })
         metadataHtml = pystache.render(templates["lyrics-metadata"], items)
-
-    ## Process action buttons
-    actionsHtml = None
-    if len(lyricsActionsList) > 0:
-        actionsHtml = "<br />".join(lyricsActionsList)
-
-    html = pystache.render(templates["lyrics-container"], {
-        "lyrics":   lyricsHtml,
-        "metadata": metadataHtml,
-        "actions":  actionsHtml,
-    })
-    return html
+    return metadataHtml
 
 def formatRecordingNumber(recording):
     if "track_no" in recording:
@@ -82,6 +86,30 @@ def formatRecordingNumber(recording):
             leftPadding = "&nbsp;"
         recording["prefix"] = leftPadding + trackNoAsStr + "."
 
+def formatTranslationPageContents(templates, originalLyricsText, translationText, translationMap, lyricsMetadataDict, lyricsActionsList):
+    if originalLyricsText and translationText:
+        origLines = originalLyricsText.splitlines()
+        transLines = translationText.splitlines()
+
+        maxNumberOfLines = len(origLines) if (len(origLines) > len(transLines)) else len(transLines)
+
+        tableData = list()
+        for i in range(maxNumberOfLines):
+            tableData.append((
+                origLines[i] if (len(origLines)-1 >= i) else "",
+                transLines[i] if (len(transLines)-1 >= i) else "")
+            )
+
+        html = pystache.render(templates["translation-container"], {
+            "lines":    tableData,
+            "metadata": formatMetadata(templates, lyricsMetadataDict),
+            "actions":  formatActions(lyricsActionsList),
+        })
+        return html
+    else:
+        ## Render it as a usual lyrics page
+        return formatLyricsPageContents(templates, translationText, lyricsMetadataDict, lyricsActionsList)
+
 def getBreadcrumbs(templates, *links):
     items = []
     depth = 0