Skip to content

Commit 44627f1

Browse files
zfletchzfletch
committed
get simple alignments working
Get simple alignments working by: * Updating the algorithm for determining active words to include sibling words (words in the same language that are aligned to a single word in the other language) * Changing how `setActive` works: it now takes a language and a word identifier and calculates what other words should be marked as active. This way the caller doesn't have to bother with the map of languages and word identifiers * Using `setActive` and `active` in the `Segment` component * Adding styling for hover and selection in the `Segment` component
1 parent 44c223b commit 44627f1

File tree

8 files changed

+83
-133
lines changed

8 files changed

+83
-133
lines changed

‎src/components/Alignment/Segment.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,14 @@ import Segment from '../Segment';
44

55
const SegmentWithContext = ({ lnum }) => (
66
<SentenceContext.Consumer>
7-
{({ sentence, active, setActive }) => <Segment lnum={lnum} sentence={sentence} active={active} setActive={setActive} />}
7+
{({ sentence, active, setActive }) => (
8+
<Segment
9+
lnum={lnum}
10+
sentence={sentence}
11+
active={active}
12+
setActive={setActive}
13+
/>
14+
)}
815
</SentenceContext.Consumer>
916
);
1017

‎src/components/Alignment/Sentence/Sentence.js‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,14 @@ const buildIdMap = (alignedText, sentence, id) => {
4848
idMap[outerLnum][outerN][innerLnum].add(innerN);
4949
};
5050

51+
const unifySets = (lnum1, n1, lnum2, n2) => {
52+
idMap[lnum1][n1][lnum1].forEach((v) => idMap[lnum2][n2][lnum1].add(v));
53+
idMap[lnum1][n1][lnum2].forEach((v) => idMap[lnum2][n2][lnum2].add(v));
54+
55+
idMap[lnum2][n2][lnum1] = idMap[lnum1][n1][lnum1];
56+
idMap[lnum2][n2][lnum2] = idMap[lnum1][n1][lnum2];
57+
};
58+
5159
sentence.wds.forEach(wd => {
5260
const lnum = wd.$.lnum;
5361

@@ -64,7 +72,7 @@ const buildIdMap = (alignedText, sentence, id) => {
6472
nrefs.forEach(nref => {
6573
addToSet(lnum, n, lnumRef, nref);
6674
addToSet(lnumRef, nref, lnum, n);
67-
addToSet(lnumRef, nref, lnumRef, nref);
75+
unifySets(lnum, n, lnumRef, nref);
6876
});
6977
}
7078
});
@@ -76,22 +84,29 @@ const buildIdMap = (alignedText, sentence, id) => {
7684
};
7785

7886
const WrappedSentence = ({ id, json, children }) => {
79-
const [active, setActive] = useState(null);
87+
const [active, setActive] = useState({});
8088
const [idMap, setIdMap] = useState({});
81-
82-
const alignedText = json['aligned-text'];
83-
const sentence = alignedText.sentence.find(({ $: { id: sentenceId }}) => sentenceId === id);
89+
const [sentence, setSentence] = useState({});
8490

8591
useEffect(() => {
92+
const alignedText = json['aligned-text'];
93+
const sentence = alignedText.sentence.find(({ $: { id: sentenceId }}) => sentenceId === id);
94+
95+
setSentence(sentence);
8696
setIdMap(buildIdMap(alignedText, sentence));
8797
}, [id, json]);
8898

99+
const setActiveFromChild = ([lnum, wordId]) => {
100+
if (idMap[lnum] && idMap[lnum][wordId]) {
101+
setActive(idMap[lnum][wordId]);
102+
}
103+
};
104+
89105
return (
90106
<SentenceContext.Provider value={{
91107
sentence,
92108
active,
93-
setActive,
94-
idMap,
109+
setActive: setActiveFromChild,
95110
}}
96111
>
97112
{children}

‎src/components/App/App.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import Segment from '../Alignment/Segment';
44

55
const xml = `
66
<aligned-text xmlns="http://alpheios.net/namespaces/aligned-text">
7-
<language lnum="L1" xml:lang="eng" dir="ltr"/>
8-
<language lnum="L2" xml:lang="fre" dir="ltr"/>
7+
<language lnum="en" xml:lang="en" dir="ltr"/>
8+
<language lnum="fr" xml:lang="fr" dir="ltr"/>
99
<comment class="title">alignment</comment>
1010
<sentence id="1" document_id="">
11-
<wds lnum="L1">
11+
<wds lnum="en">
1212
<comment class="uri"/>
1313
<w n="1-1">
1414
<text>hello</text>
@@ -19,7 +19,7 @@ const xml = `
1919
<refs nrefs="1-2 1-3"/>
2020
</w>
2121
</wds>
22-
<wds lnum="L2">
22+
<wds lnum="fr">
2323
<comment class="uri"/>
2424
<w n="1-1">
2525
<text>bonjour</text>
@@ -41,8 +41,8 @@ const xml = `
4141
const App = () => (
4242
<Alignment alignment={xml}>
4343
<Sentence id="1">
44-
<Segment lnum="L1" />
45-
<Segment lnum="L2" />
44+
<Segment lnum="en" />
45+
<Segment lnum="fr" />
4646
</Sentence>
4747
</Alignment>
4848
);

‎src/components/Segment/Segment.js‎

Lines changed: 21 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,25 @@
1-
const wordMap = (words) => {
1+
import styles from './Segment.module.scss';
2+
3+
const wordMap = (words, lnum, active, setActive) => {
24
const map = [];
35

46
words.w.forEach((word) => {
57
const { text, $: { n }} = word;
6-
7-
map.push(<span key={n}>{text[0]}</span>);
8+
const classes = [styles.word]
9+
10+
if (active[lnum] && active[lnum].has(n)) {
11+
classes.push(styles.active);
12+
}
13+
14+
map.push(
15+
<span
16+
key={n}
17+
className={classes.join(' ')}
18+
onClick={() => setActive([lnum, n])}
19+
>
20+
{text[0]}
21+
</span>
22+
);
823
map.push(' ');
924
});
1025

@@ -13,54 +28,16 @@ const wordMap = (words) => {
1328
return map;
1429
};
1530

16-
// const getActiveN = (active, lnum) => {
17-
// if (active) {
18-
// const activeN = active.from === lnum ? active.n : active.nrefs;
19-
//
20-
// return activeN.split(/\s+/);
21-
// }
22-
//
23-
// return [];
24-
// };
25-
//
26-
// const canonicalOrder = (stringOrArray) => {
27-
// const array = typeof stringOrArray === 'string' ? stringOrArray.split(/\s+/) : stringOrArray;
28-
//
29-
// return array.sort().join(' ');
30-
// };
31-
//
32-
// const generateGroups = (words) => {
33-
// const groups = {};
34-
//
35-
// words.w.forEach(({ refs, $: { n }}) => {
36-
// if (refs) {
37-
// refs.forEach(({ $: { nrefs }}) => {
38-
// const canonicalNref = canonicalOrder(nrefs);
39-
//
40-
// groups[canonicalNref] = groups[canonicalNref] || [];
41-
// groups[canonicalNref].push(n);
42-
// });
43-
// }
44-
// });
45-
//
46-
// return groups;
47-
// };
48-
4931
const Segment = ({ lnum, sentence, active, setActive }) => {
50-
// const alignedText = json['aligned-text'];
51-
//
52-
// const sentence = alignedText.sentence.find(({ $: { id: sentenceId }}) => sentenceId === id);
53-
const words = sentence ? sentence.wds.find(({ $ }) => $.lnum === lnum) : false;
54-
55-
// const activeN = getActiveN(active, lnum);
32+
const words = (sentence && sentence.wds) ? sentence.wds.find(({ $ }) => $.lnum === lnum) : false;
5633

5734
if (!words) {
5835
return false;
5936
}
6037

6138
return (
62-
<div>
63-
{wordMap(words)}
39+
<div className={styles.text}>
40+
{wordMap(words, lnum, active, setActive)}
6441
</div>
6542
);
6643
};

‎src/components/Segment/Segment.module.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.text {
2+
background-color: #f2f2f2;
3+
text-align: left;
4+
5+
padding-top: 0.2rem;
6+
padding-bottom: 0.2rem;
7+
padding-left: 0.6rem;
8+
padding-right: 0.6rem;
9+
10+
margin-bottom: 0.2rem;
11+
}
12+
13+
.word {
14+
cursor: pointer;
15+
padding-left: 1px;
16+
padding-right: 1px;
17+
font-weight: 450;
18+
19+
&:hover {
20+
background-color: #5bc8dc;
21+
}
22+
}
23+
24+
.active {
25+
background-color: #f6d918;
26+
}

‎src/components/Text/Text.js‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎src/components/Text/Text.module.css‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/components/Text/index.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)