Tags + some UCD filtering

Author: fileformat

bin/ucd_to_json.ts

@@ -14,6 +14,8 @@ type SearchEntry = {
 	age: string;
 	block: string;
 	category: string;
+	script: string;
+	tags?: string[];
 }
 
 type SearchData = {
@@ -44,15 +46,58 @@ async function main() {
 	});
 	const jsonObj = parser.parse(xmlData);
 
+	console.log(`INFO: parsed ${jsonObj.ucd.repertoire.char.length} characters`);
+
+	if (true) {
+		fs.writeFile(
+			path.join(__dirname, "..", "tmp", "ucd.all.flat.json"),
+			JSON.stringify(jsonObj, null, 2),
+			"utf-8"
+		);
+	}
+
+	console.log(`INFO: generating JSON data`);
 	const entries: SearchEntry[] = [];
 
 	for (const charData of jsonObj.ucd.repertoire.char) {
+
+		if (!charData.cp || charData.cp.length === 0) {
+			if (!charData['first-cp']) {	// some private use area ranges mixed in
+				console.log(`WARN: skipping entry with no code point (${JSON.stringify(charData)})`);
+			}
+			continue;
+		}
+
+		const tags: string[] = [];
+		if (charData.WSpace === 'Y') {
+			tags.push('Whitespace');
+		}
+		if (charData.Emoji === 'Y') {
+			tags.push('Emoji');
+		}
+		if (charData.Dep === 'Y') {
+			tags.push('Deprecated');
+		}
+		if (charData.QMark === 'Y') {
+			tags.push('Quote');
+		}
+		if (charData.Dash === 'Y') {
+			tags.push('Dash');
+		}
+
+		var name = charData.na || charData.na1;
+		if (!name && charData['name-alias']) {
+			name = charData['name-alias'][0].alias;
+		}
+
 		entries.push({
 			code: charData.cp,
-			name: charData.na || charData.na1,
+			name: name || "(no name)",
 			age: charData.age,
-			block: charData.blk,
+			block: charData.blk.replaceAll('_', ' '),
 			category: charData.gc,
+			script: charData.sc,
+			tags: tags.length ? tags : undefined,
 		});
 	}
 

src/index.ts

@@ -23,6 +23,7 @@ type SearchEntry = {
 	age: string;
 	block: string;
 	category: string;
+	tags?: string[];
 };
 
 type SearchData = {
@@ -151,6 +152,27 @@ function fmtExampleString(cell: CellComponent) {
 	return String.fromCodePoint(...codepoints);
 }
 
+function fmtTags(cell: CellComponent) {
+	const tags = cell.getValue() as string[];
+	if (!tags || tags.length === 0) {
+		return "";
+	}
+
+	const container = document.createElement("div");
+
+	const keys = tags.sort();
+
+	for (const key of keys) {
+		var el = document.createElement("span");
+		el.className =
+			"badge border border-primary text-primary me-1 mb-1 text-decoration-none";
+		el.textContent = key;
+		container.appendChild(el);
+	}
+
+	return container;
+}
+
 function imgTooltipFn(imgType: string) {
 	return function (e: MouseEvent, cell: CellComponent, onRendered: any) {
 		var value = cell.getValue();
@@ -189,28 +211,6 @@ function showError(msg: string) {
 	document.getElementById("errmsg")!.innerHTML = msg;
 }
 
-function tagFormatter(cell: CellComponent) {
-	const tags = cell.getValue() as Map<string, string>;
-	if (!tags || tags.size === 0) {
-		return "";
-	}
-
-	const container = document.createElement("div");
-
-	const keys = Array.from(tags.keys()).sort();
-
-	for (const key of keys) {
-		const value = tags.get(key) || "";
-		var el = document.createElement("a");
-		el.href = value;
-		el.className = "badge border border-primary text-primary me-1 mb-1 text-decoration-none";
-		el.target = "_blank";
-		el.textContent = key;
-		container.appendChild(el);
-	}
-
-	return container;
-}
 
 const tickElement = `<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve"><path fill="#2DC214" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34  c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351  l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07  l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"></path></svg>`;
 
@@ -380,15 +380,15 @@ async function main() {
 			{
 				title: "Tags",
 				field: "tags",
-				formatter: tagFormatter,
+				formatter: fmtTags,
 				headerSort: false,
 				responsive: 0,
 				width: 375,
 			},
 		],
 		height: "100%",
-		initialHeaderFilter: [{ field: "ar21", type: "=", value: true }],
-		initialSort: [{ column: "sort", dir: "asc" }],
+		//initialHeaderFilter: [{ field: "ar21", type: "=", value: true }],
+		initialSort: [{ column: "code", dir: "asc" }],
 		layout: "fitDataStretch",
 		placeholder: "No matches",
 		responsiveLayout: "hide",