Style nav bar

Author: trevorgerhardt

apps/osm-merge/src/components/browser-check.tsx

@@ -13,7 +13,7 @@ export default function BrowserCheck() {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-				<Button size="sm" variant="link">
+				<Button size="xs" variant="link">
 					Check system
 				</Button>
 			</DialogTrigger>

apps/osm-merge/src/components/merge-page.tsx

@@ -2,7 +2,8 @@ import { useBitmapTileLayer } from "@/hooks/map"
 import { useOsmFile, useOsmWorker } from "@/hooks/osm"
 import { DEFAULT_BASE_PBF_URL, DEFAULT_PATCH_PBF_URL } from "@/settings"
 import { ArrowLeft, ArrowRight, Loader2Icon } from "lucide-react"
-import type { OsmChanges } from "osm.ts"
+import { Osm, writeOsmToPbfStream, type OsmChanges } from "osm.ts"
+import { showSaveFilePicker } from "native-file-system-adapter"
 import { useCallback, useEffect, useRef, useState, useTransition } from "react"
 import Basemap from "./basemap"
 import DeckGlOverlay from "./deckgl-overlay"
@@ -11,18 +12,25 @@ import LogContent from "./log"
 import OsmInfoTable from "./osm-info-table"
 import OsmPbfFileInput from "./osm-pbf-file-input"
 import { Button } from "./ui/button"
+import useStartTask from "@/hooks/log"
 
 export default function Merge() {
 	const [baseFile, setBaseFile] = useState<File | null>(null)
 	const [patchFile, setPatchFile] = useState<File | null>(null)
-	const [baseOsm, baseOsmIsLoading] = useOsmFile(baseFile, "base")
-	const [patchOsm, patchOsmIsLoading] = useOsmFile(patchFile, "patch")
+	const [baseOsm, setBaseOsm, baseOsmIsLoading] = useOsmFile(baseFile, "base")
+	const [patchOsm, setPatchOsm, patchOsmIsLoading] = useOsmFile(
+		patchFile,
+		"patch",
+	)
+	const [mergedOsm, setMergedOsm] = useState<Osm | null>(null)
 	const osmWorker = useOsmWorker()
 	const [isTransitioning, startTransition] = useTransition()
 	const [changes, setChanges] = useState<OsmChanges | null>(null)
+	const startTask = useStartTask()
 
 	const baseTileLayer = useBitmapTileLayer(baseOsm)
 	const patchTileLayer = useBitmapTileLayer(patchOsm)
+	const mergedTileLayer = useBitmapTileLayer(mergedOsm)
 
 	const [step, setStep] = useState<number>(1)
 
@@ -60,6 +68,30 @@ export default function Merge() {
 		setStep((s) => s + 1)
 	}, [])
 
+	const downloadOsm = useCallback(
+		async (osm: Osm, name?: string) => {
+			startTransition(async () => {
+				const task = startTask("Generating OSM file to download", "info")
+				const suggestedName =
+					name ?? (osm.id.endsWith(".pbf") ? osm.id : `${osm.id}.pbf`)
+				const fileHandle = await showSaveFilePicker({
+					suggestedName,
+					types: [
+						{
+							description: "OSM PBF",
+							accept: { "application/x-protobuf": [".pbf"] },
+						},
+					],
+				})
+				const stream = await fileHandle.createWritable()
+				await writeOsmToPbfStream(osm, stream)
+				await stream.close()
+				task.end(`Created ${fileHandle.name} PBF for download`, "ready")
+			})
+		},
+		[startTask],
+	)
+
 	return (
 		<Main>
 			<Sidebar>
@@ -199,7 +231,7 @@ export default function Merge() {
 					</If>
 
 					<If t={step === 3}>
-						{isTransitioning ? (
+						{isTransitioning || changes == null ? (
 							<div className="flex items-center gap-1">
 								<Loader2Icon className="animate-spin size-4" />
 								<div className="font-bold">GENERATING CHANGESET</div>
@@ -210,34 +242,39 @@ export default function Merge() {
 								<div>
 									Changes have been generated and can be reviewed below. Once
 									the review is complete you can apply changes to generate a new
-									OSM file ready to be downloaded. You cannot go back from the
-									next step.
+									OSM file ready to be downloaded.
 								</div>
 							</>
 						)}
 						<div className="border border-slate-950 p-1 max-h-96">
 							{changes && <ChangesSummary changes={changes} />}
 						</div>
 						<Button
-							variant="outline"
+							disabled={changes == null || isTransitioning}
 							onClick={() => {
 								if (!osmWorker) throw Error("No OSM worker")
 								nextStep()
 								startTransition(async () => {
 									if (!changes) throw Error("No changes to apply")
-									// await osmWorker.applyChangeset()
+									if (!baseOsm) throw Error("No base OSM")
+									const newOsm = await osmWorker.applyChanges(
+										`merged-${baseOsm.id}`,
+									)
+									setBaseOsm(null)
+									setPatchOsm(null)
+									setMergedOsm(Osm.from(newOsm))
 								})
 							}}
 						>
-							<ArrowRight /> Apply changes
+							<ArrowRight /> Apply changes (irreversible)
 						</Button>
 						<Button variant="outline" onClick={prevStep}>
 							<ArrowLeft /> Back
 						</Button>
 					</If>
 
 					<If t={step === 4}>
-						{isTransitioning ? (
+						{isTransitioning || mergedOsm == null ? (
 							<div className="flex items-center gap-1">
 								<Loader2Icon className="animate-spin size-4" />
 								<div className="font-bold">APPLYING CHANGES</div>
@@ -249,6 +286,9 @@ export default function Merge() {
 									Changes have been applied and a new OSM dataset has been
 									created. It can be inspected here and downloaded as a new PBF.
 								</div>
+								<Button onClick={() => downloadOsm(mergedOsm)}>
+									Download merged OSM PBF
+								</Button>
 								{/* INSERT OSM VIEW CODE HERE */}
 							</>
 						)}
@@ -257,7 +297,9 @@ export default function Merge() {
 			</Sidebar>
 			<MapContent>
 				<Basemap>
-					<DeckGlOverlay layers={[baseTileLayer, patchTileLayer]} />
+					<DeckGlOverlay
+						layers={[baseTileLayer, patchTileLayer, mergedTileLayer]}
+					/>
 				</Basemap>
 			</MapContent>
 		</Main>

apps/osm-merge/src/components/nav.tsx

@@ -3,23 +3,24 @@ import ZoomInfo from "@/components/zoom-info"
 import BrowserCheck from "./browser-check"
 import Status from "./status"
 import { NavLink } from "react-router"
+import { cn } from "@/lib/utils"
 
 export default function Nav() {
 	return (
-		<div className="border-b flex flex-row justify-between items-center px-4">
-			<div className="flex flex-row gap-4 items-center py-2">
-				<div className="font-bold">OSM.ts</div>
+		<div className="border-b flex flex-row justify-between items-center px-4 h-12">
+			<div className="flex flex-row gap-2 items-center">
+				<div className="font-bold pr-2">OSM.ts</div>
 				<NavLink
 					className={({ isActive }) =>
-						isActive ? "text-blue-600" : "text-slate-950"
+						cn("text-slate-950 py-4 px-2", isActive && "text-blue-600")
 					}
 					to="merge"
 				>
 					Merge
 				</NavLink>
 				<NavLink
 					className={({ isActive }) =>
-						isActive ? "text-blue-600" : "text-slate-950"
+						cn("text-slate-950 py-4 px-2", isActive && "text-blue-600")
 					}
 					to="view"
 				>

apps/osm-merge/src/components/ui/button.tsx

@@ -23,7 +23,7 @@ const buttonVariants = cva(
 			},
 			size: {
 				md: "h-9 px-4 py-2 has-[>svg]:px-3",
-				xs: "h-6 rounded-md gap-1 px-2 has-[>svg]:px-1.5",
+				xs: "rounded-md gap-1 px-2 has-[>svg]:px-1.5",
 				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
 				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
 				icon: "size-9",

apps/osm-merge/src/components/view-page.tsx

@@ -70,7 +70,7 @@ export default function ViewPage() {
 			extent: bbox,
 			getTileData: async (tile) => {
 				if (tile.index.z < MIN_PICKABLE_ZOOM) {
-					const endBitmapGenerationTask = startTask(
+					const task = startTask(
 						`generating bitmap for tile ${tile.index.z}/${tile.index.x}/${tile.index.y}`,
 						"debug",
 					)
@@ -81,7 +81,7 @@ export default function ViewPage() {
 						tile.index,
 						TILE_SIZE,
 					)
-					endBitmapGenerationTask(
+					task.end(
 						`bitmap for tile ${tile.index.z}/${tile.index.x}/${tile.index.y} generated`,
 						"debug",
 					)
@@ -90,7 +90,7 @@ export default function ViewPage() {
 
 				// Show pickable data
 				const bbox = tile.bbox as GeoBoundingBox
-				const endTask = startTask(
+				const task = startTask(
 					`generating data for tile ${tile.index.z}/${tile.index.x}/${tile.index.y}`,
 					"debug",
 				)
@@ -100,7 +100,7 @@ export default function ViewPage() {
 					bbox.east,
 					bbox.north,
 				])
-				endTask(
+				task.end(
 					`tile data for ${tile.index.z}/${tile.index.x}/${tile.index.y} generated`,
 					"debug",
 				)

apps/osm-merge/src/hooks/log.ts

@@ -11,12 +11,14 @@ export default function useStartTask() {
 		function startTaskMessage(message: string, type: Status["type"] = "info") {
 			setTasks((t) => t + 1)
 			logMessage(message, type)
-			return function endTaskMessage(
-				message: string,
-				type: Status["type"] = "info",
-			) {
-				setTasks((t) => t - 1)
-				logMessage(message, type)
+			return {
+				update: (message: string, type: Status["type"] = "info") => {
+					logMessage(message, type)
+				},
+				end: (message: string, type: Status["type"] = "info") => {
+					setTasks((t) => t - 1)
+					logMessage(message, type)
+				},
 			}
 		},
 		[setTasks, logMessage],

apps/osm-merge/src/hooks/osm.ts

@@ -47,24 +47,24 @@ export function useOsmFile(file: File | null, id?: string) {
 
 	useEffect(() => {
 		if (!osmWorker || !file) return
-		const endOsmInitTask = startTask(`Processing file ${file.name}...`)
+		const task = startTask(`Processing file ${file.name}...`)
 		const stream = file.stream()
 		setOsm(null)
 		setIsLoading(true)
 		osmWorker
 			.initFromPbfData(id ?? file.name, Comlink.transfer(stream, [stream]))
 			.then(async (osmBuffers) => {
 				setOsm(Osm.from(osmBuffers))
-				endOsmInitTask(`${file.name} fully loaded.`)
+				task.end(`${file.name} fully loaded.`)
 			})
 			.catch((e) => {
 				console.error(e)
-				endOsmInitTask(`${file.name} failed to load.`, "error")
+				task.end(`${file.name} failed to load.`, "error")
 			})
 			.finally(() => {
 				setIsLoading(false)
 			})
 	}, [file, id, osmWorker, startTask])
 
-	return [osm, isLoading] as const
+	return [osm, setOsm, isLoading] as const
 }

apps/osm-merge/src/main.css

@@ -130,9 +130,12 @@
 	}
 	a {
 		color: var(--color-blue-600);
-		text-decoration-line: underline;
 		text-underline-offset: 4px;
 	}
+
+	a:hover {
+		text-decoration-line: underline;
+	}
 }
 
 /* roboto-mono-latin-wght-normal */

apps/osm-merge/src/workers/osm.worker.ts

@@ -43,6 +43,9 @@ const osmWorker = {
 
 		observer.observe({ entryTypes: ["mark", "measure"] })
 	},
+	clearAllOsm() {
+		this.ids = {}
+	},
 	osm(id: string) {
 		if (!this.ids[id]) throw Error(`Osm for ${id} not loaded.`)
 		return this.ids[id]
@@ -115,6 +118,14 @@ const osmWorker = {
 			stats: changeset.stats,
 		}
 	},
+	applyChanges(newId: string) {
+		if (!this.activeChangeset) throw Error("No active changeset")
+		const osm = this.activeChangeset.applyChanges(newId)
+		this.activeChangeset = null
+		this.clearAllOsm()
+		this.ids[osm.id] = osm
+		return osm.transferables()
+	},
 }
 
 export type OsmWorker = typeof osmWorker

packages/osm.ts/src/changeset.ts

@@ -312,13 +312,21 @@ export default class OsmChangeset {
 			this.handleIntersectingWays(way, patch)
 		}
 	}
+
+	applyChanges(newId: string) {
+		return applyChangesetToOsm(newId, this.osm, this)
+	}
 }
 
 /**
  * Apply a changeset to an Osm index, generating a new Osm index. Usually done on a changeset made from the base osm index.
  */
-export function applyChangesetToOsm(baseOsm: Osm, changeset: OsmChangeset) {
-	const osm = new Osm(baseOsm.id, baseOsm.header)
+export function applyChangesetToOsm(
+	newId: string,
+	baseOsm: Osm,
+	changeset: OsmChangeset,
+) {
+	const osm = new Osm(newId, baseOsm.header)
 
 	const { nodeChanges, wayChanges, relationChanges } = changeset