-
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
tagging: add iD Tagging scheme to advanced mode 🎉 (#131)
* iD Tagging scheme exploration * fix build * fix build2 * show only unique fields * add typescript types * y lintfix * find Field for rest of tags * move schema to Feature + add UI * translate values in semiCombo * titles * hack address:* in * remove tags which are already covered by Preset name * experiment - clear sessionstorage * typeCombo is usually cleared by preset.tags * We need typeCombo after all, eg node/7002486683 * move units from label to value * finalize first prototype * allow language switching * fix buildAddress a little * extract PoiDescription.tsx * extract field helpers to fields.ts * refactoring restKeys->keysTodo, added publishDbgObject(), added test * fix access key - covers multiple tags * Use `@openstreetmap/id-tagging-schema` pkg Committed in-flight 5J814 :) * fix keysTodo (never commit 30k ft above ground) * y lintfix * fix [object object] in `subject:wikidata` * update osmApi.test.ts * hide under advanced mode * add Details above TagsTable
- Loading branch information
Showing
24 changed files
with
1,074 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,136 @@ | ||
import React, { ReactNode } from 'react'; | ||
import styled from 'styled-components'; | ||
import Typography from '@material-ui/core/Typography'; | ||
import { Field } from '../../services/tagging/types/Fields'; | ||
import { getUrlForTag } from './helpers/getUrlForTag'; | ||
import { slashToOptionalBr } from '../helpers'; | ||
import { buildAddress } from '../../services/helpers'; | ||
import { Feature } from '../../services/types'; | ||
import { t } from '../../services/intl'; | ||
|
||
// taken from src/components/FeaturePanel/TagsTable.tsx | ||
const Table = styled.table` | ||
font-size: 1rem; | ||
width: 100%; | ||
th, | ||
td { | ||
padding: 0.1em; | ||
overflow: hidden; | ||
&:hover .show-on-hover { | ||
display: block !important; | ||
} | ||
} | ||
th { | ||
width: 140px; | ||
max-width: 140px; | ||
color: rgba(0, 0, 0, 0.54); | ||
text-align: left; | ||
font-weight: normal; | ||
vertical-align: baseline; | ||
padding-left: 0; | ||
} | ||
table { | ||
padding-left: 1em; | ||
padding-bottom: 1em; | ||
} | ||
`; | ||
|
||
// TODO move to helpers | ||
const getEllipsisHumanUrl = (humanUrl) => { | ||
const MAX_LENGTH = 40; | ||
return humanUrl.replace(/^([^/]+.{0,5})(.*)$/, (full, hostname, rest) => { | ||
const charsLeft = MAX_LENGTH - 10 - hostname.length; | ||
return ( | ||
hostname + | ||
(full.length > MAX_LENGTH | ||
? `…${rest.substring(rest.length - charsLeft)}` | ||
: rest) | ||
); | ||
}); | ||
}; | ||
|
||
// taken from src/components/FeaturePanel/TagsTable.tsx | ||
const renderValue = (k, v): string | ReactNode => { | ||
const url = getUrlForTag(k, v); | ||
if (url) { | ||
let humanUrl = v.replace(/^https?:\/\//, '').replace(/^([^/]+)\/$/, '$1'); | ||
if (k === 'image') { | ||
humanUrl = getEllipsisHumanUrl(humanUrl); | ||
} | ||
return <a href={url}>{slashToOptionalBr(humanUrl)}</a>; | ||
} | ||
return v; | ||
}; | ||
|
||
const render = (field: Field, feature: Feature, k, v): string | ReactNode => { | ||
if (field.type === 'address') { | ||
return buildAddress(feature.tags, feature.center); | ||
} | ||
return renderValue(k, v); | ||
}; | ||
|
||
const getTitle = (type: string, field: Field) => | ||
`${type}: ${JSON.stringify(field, null, 2)}`; | ||
|
||
// TODO some fields eg. oneway/bicycle doesnt have units in brackets | ||
const unitRegExp = / \((.+)\)$/i; | ||
const removeUnits = (label) => label.replace(unitRegExp, ''); | ||
const addUnits = (label, value: string | ReactNode) => { | ||
if (typeof value !== 'string') return value; | ||
const unit = label.match(unitRegExp); | ||
return `${value}${unit ? ` (${unit[1]})` : ''}`; | ||
}; | ||
|
||
export const IdSchemeFields = ({ feature, featuredTags }) => { | ||
const { schema } = feature; | ||
if (!schema) return null; | ||
if (!Object.keys(schema).length) return null; | ||
|
||
return ( | ||
<> | ||
{featuredTags.length && | ||
(schema.matchedFields.length || | ||
schema.tagsWithFields.length || | ||
schema.restKeys.length) ? ( | ||
<Typography variant="overline" display="block" color="textSecondary"> | ||
{t('featurepanel.other_info_heading')} | ||
</Typography> | ||
) : null} | ||
|
||
<Table> | ||
<tbody> | ||
{schema.matchedFields.map(({ key, value, label, field }) => ( | ||
<tr key={key}> | ||
<th title={getTitle('from preset', field)}> | ||
{removeUnits(label)} | ||
</th> | ||
<td>{addUnits(label, render(field, feature, key, value))}</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
<tbody> | ||
{schema.tagsWithFields.map(({ key, value, label, field }) => ( | ||
<tr key={key}> | ||
<th title={getTitle('standalone field', field)}> | ||
{removeUnits(label)} | ||
</th> | ||
<td>{render(field, feature, key, addUnits(label, value))}</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
<tbody> | ||
{schema.keysTodo.map((key) => ( | ||
<tr key={key}> | ||
<th>{key}</th> | ||
<td>{renderValue(key, feature.tags[key])}</td> | ||
</tr> | ||
))} | ||
</tbody> | ||
</Table> | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
src/components/FeaturePanel/ImageSection/PoiDescription.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import React from 'react'; | ||
import styled from 'styled-components'; | ||
import { hasName } from '../../../helpers/featureLabel'; | ||
import { useFeatureContext } from '../../utils/FeatureContext'; | ||
import { t } from '../../../services/intl'; | ||
import Maki from '../../utils/Maki'; | ||
import { Feature } from '../../../services/types'; | ||
|
||
const PoiType = styled.div` | ||
color: #fff; | ||
margin: 0 auto 0 15px; | ||
font-size: 13px; | ||
position: relative; | ||
width: 100%; | ||
svg { | ||
vertical-align: bottom; | ||
} | ||
span { | ||
position: absolute; | ||
left: 20px; | ||
} | ||
`; | ||
|
||
const getSubclass = ({ layer, osmMeta, properties, schema }: Feature) => | ||
schema?.label || | ||
properties.subclass?.replace(/_/g, ' ') || | ||
(layer && layer.id) || // layer.id specified only when maplibre-gl skeleton displayed | ||
osmMeta.type; | ||
|
||
export const PoiDescription = () => { | ||
const { feature } = useFeatureContext(); | ||
const { properties } = feature; | ||
|
||
const poiType = hasName(feature) | ||
? getSubclass(feature) | ||
: t('featurepanel.no_name'); | ||
|
||
return ( | ||
<PoiType> | ||
<Maki ico={properties.class} invert middle /> | ||
<span>{poiType}</span> | ||
</PoiType> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
b3c206b
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
osmapp – ./
osmapp-git-master-zbycz.vercel.app
osmapp-zbycz.vercel.app
osmapp.vercel.app
osmapp.org