Prototype language proximity UI - #709
Conversation
Cloudflare Pages preview
|
|
Hi @conradarcturus - I opened this PR as an initial prototype for the Language Proximity / Related Languages workstream. This first PR does not import the new Language Proximity spreadsheet yet. I kept it intentionally incremental and used existing LangNav data only. What this PR adds:
I also documented the current spreadsheet → TSV → parser → objects → website flow and drafted possible next steps for loading Jingyi’s Language Proximity dataset. Build passed locally. Lint completed with exit code 0, though the repo still emits existing CRLF/Prettier warnings. Tests did not run successfully on my machine because my local Node version is I’d love your feedback on:
|
conradarcturus
left a comment
conradarcturus
left a comment
There was a problem hiding this comment.
Cool! Thanks for moving so quickly to get it started. Let's break it down into smaller tasks but I really like where this is going.
| @@ -0,0 +1,105 @@ | |||
| # Language Proximity / Related Languages Workstream | |||
There was a problem hiding this comment.
We should document methodology not meeting notes.
Can you please put this in the workstream notes instead? https://docs.google.com/document/d/1bpnGq8aPss4RHeNU5huoyuKplQwx2UTZyx2sx-Rc6w8/edit?tab=t.7gb18zf57xm9#heading=h.1qdz19z1266w
| @@ -0,0 +1,60 @@ | |||
| # Draft GitHub Issues: Language Proximity | |||
|
|
|||
| ## Issue 1: Add macrolanguage context banner to language detail pages | |||
There was a problem hiding this comment.
Let's keep this information in the github issues https://github.com/Translation-Commons/lang-nav/issues not in repo commits.
| {hasChildren && ( | ||
| <> | ||
| {' '} | ||
| <a href={`#${LANGUAGE_RELATIONS_SECTION_ID}`}>See contained languages.</a> |
There was a problem hiding this comment.
Add a small ArrowDownToLineIcon to clarify. We should adapt InternalLink to allow for page scrolling params.
| }} | ||
| > | ||
| <strong>{isMacrolanguage ? 'Macrolanguage context' : 'Language group context'}</strong> | ||
| <div style={{ marginTop: '0.35em' }}> |
There was a problem hiding this comment.
Here and everywhere else, please avoid random lengths. Use multiples of 0.25em (0.125, 0.25, .5, .75, 1, 1.5)
| <div id={LANGUAGE_RELATIONS_SECTION_ID}> | ||
| <DetailsSection title="Related Languages"> |
There was a problem hiding this comment.
just add id as a prop you can pass into DetailsSection
| <div style={{ fontWeight: 'bold' }}> | ||
| <HoverableObjectName object={language} labelSource="name and code" /> | ||
| </div> |
There was a problem hiding this comment.
You can style HoverableObjectNames
| <div style={{ fontWeight: 'bold' }}> | |
| <HoverableObjectName object={language} labelSource="name and code" /> | |
| </div> | |
| <HoverableObjectName object={language} labelSource="name and code" | |
| style={{ display: 'block', fontWeight: 'bold' }} /> |
| ); | ||
| }; | ||
|
|
||
| const RelationCard: React.FC<React.PropsWithChildren> = ({ children }) => { |
There was a problem hiding this comment.
Thanks for thinking about making a general RelationCard
Since you always include the HoverableObjectName maybe you should pass in an entity prop and have 1 standard HoverableObjectName here instead.
| }; | ||
|
|
||
| const RelationGroup: React.FC<RelationGroupProps> = ({ title, children }) => { | ||
| return ( |
There was a problem hiding this comment.
Can you move this component to src\shared\ui and call it SmallCardGrid?
Not necessary in this PR but we'll want to add a component to clamp how many items are shown like CommaSeparated does (but the button "4 more" will be a grid card).
| ); | ||
| }; | ||
|
|
||
| const CLDRRelationCard: React.FC<{ language: LanguageData; distance: number }> = ({ |
There was a problem hiding this comment.
I'm not commenting on this because there are so other things to comment on first :p
| </div> | ||
| <RelationMeta label="Type" value={getLanguageScopeLabel(language.scope) ?? 'Language'} /> | ||
| <RelationMeta | ||
| label="Speakers" |
There was a problem hiding this comment.
This looks funny when the language is not a spoken language, so I added a method to distinguish standard users when they are speakers or writers.
2 participants
Summary
This PR starts the Language Proximity / Related Languages workstream by adding an initial UI/documentation foundation for representing macrolanguages, contained languages, dialects, and related-language relationships in LangNav.
Context
This follows a sync with Conrad about reviving the language proximity workstream with Jun/Wonjoon and Jingyi. The goal is to make LangNav better at explaining complex language relationships such as Chinese as a macrolanguage containing Mandarin, Cantonese, Wu, and other constituent languages.
Changes
Notes
This is intentionally incremental. The goal is to create a small reviewable starting point before deeper ingestion/data-model work.
Future Work