The embedded map drew 340px below its card, and said nothing for the 30s it took
Two faults rega measured in the /embed-test re-shoot at 1440, both on main.
THE MAP SIZED TO THE VIEWPORT, NOT ITS HOST. This element had no :host rule at
all, so it defaulted to display:inline with no height of its own and .gm's
absolute inset:0 resolved against whatever ancestor happened to be positioned:
a 1198x900 canvas inside a 1198x560 embed card, with ~340px including the
attribution drawn below the card and clipped. The attribution is a licence
obligation, so clipping it is not cosmetic. Now :host{height:100%} so a
height-bounded slot decides, with min-height:420px as a floor so an auto-height
host still gets a usable map rather than a zero-height one.
NOTHING SAID IT WAS WORKING. First data paint takes 7-30s under SwiftShader —
161 countries, 33 Indian states, 2,105 dots — and for that whole window the
reader saw an empty basemap, indistinguishable from a broken embed. Adds a
notice that starts visible on the first frame and clears after the LAST paint
(paintAdm1), not on 'load': the style fires 'load' early, so clearing there
would retire the notice during exactly the wait it explains. An error replaces
it rather than stacking, and the error path clears it too, so a failure cannot
leave it spinning forever. role="status", since this is progress and not an
interruption.
connectivity.loading added in all eleven locales; parity, keys-exist,
shadow-css and legend-logical-insets all pass. The notice uses inset-inline, not
left/right: it is translated text and mirrors under ar.
This commit is contained in:
parent
7b42754485
commit
73bc270bc0
12 changed files with 47 additions and 12 deletions
|
|
@ -64,5 +64,6 @@
|
|||
"rural": "الريف",
|
||||
"source": "المسح NFHS-5 (2019–2021)، الأشخاص من 15 إلى 49 عامًا: نسبة من سبق لهم استخدام الإنترنت. مسح للأشخاص، لا عدد للاشتراكات.",
|
||||
"missing": "لا توجد بعد حدود ولاية لـ {names}: أرقامها موجودة في البيانات، لا على الخريطة."
|
||||
}
|
||||
},
|
||||
"loading": "جارٍ رسم الخريطة…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,5 +64,6 @@
|
|||
"rural": "Land",
|
||||
"source": "NFHS-5 (2019–21), Personen im Alter von 15–49 Jahren: Anteil derer, die das Internet schon einmal genutzt haben. Eine Befragung von Menschen, keine Zählung von Anschlüssen.",
|
||||
"missing": "Noch keine Staatsgrenze für {names}: Ihre Werte stehen in den Daten, nicht auf der Karte."
|
||||
}
|
||||
},
|
||||
"loading": "Karte wird gezeichnet…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,5 +64,6 @@
|
|||
"rural": "Rural",
|
||||
"source": "NFHS-5 (2019–21), people aged 15–49: the share who have ever used the internet. A survey of people, not a count of subscriptions.",
|
||||
"missing": "No state boundary yet for {names}: their figures are in the data, not on the map."
|
||||
}
|
||||
},
|
||||
"loading": "Drawing the map…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,5 +64,6 @@
|
|||
"rural": "Rural",
|
||||
"source": "NFHS-5 (2019–21), personas de 15 a 49 años: proporción que ha usado internet alguna vez. Una encuesta a personas, no un recuento de suscripciones.",
|
||||
"missing": "Aún no hay límite estatal para {names}: sus cifras están en los datos, no en el mapa."
|
||||
}
|
||||
},
|
||||
"loading": "Dibujando el mapa…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,5 +64,6 @@
|
|||
"rural": "Rural",
|
||||
"source": "NFHS-5 (2019–21), personnes de 15 à 49 ans : part de celles qui ont déjà utilisé Internet. Une enquête auprès des personnes, pas un décompte d’abonnements.",
|
||||
"missing": "Pas encore de limite d’État pour {names} : leurs chiffres figurent dans les données, pas sur la carte."
|
||||
}
|
||||
},
|
||||
"loading": "Tracé de la carte…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,5 +64,6 @@
|
|||
"rural": "ग्रामीण",
|
||||
"source": "NFHS-5 (2019–21), 15–49 वर्ष के लोग: जिन्होंने कभी इंटरनेट का उपयोग किया है उनका प्रतिशत। यह लोगों का सर्वेक्षण है, सब्सक्रिप्शन की गिनती नहीं।",
|
||||
"missing": "{names} की राज्य सीमा अभी उपलब्ध नहीं है: उनके आँकड़े डेटा में हैं, नक्शे पर नहीं।"
|
||||
}
|
||||
},
|
||||
"loading": "मानचित्र बनाया जा रहा है…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,5 +64,6 @@
|
|||
"rural": "Rurale",
|
||||
"source": "NFHS-5 (2019–21), persone di 15–49 anni: quota di chi ha mai usato internet. Un’indagine sulle persone, non un conteggio di abbonamenti.",
|
||||
"missing": "Ancora nessun confine statale per {names}: i loro dati sono nel dataset, non sulla mappa."
|
||||
}
|
||||
},
|
||||
"loading": "Disegno della mappa…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,5 +64,6 @@
|
|||
"rural": "Rural",
|
||||
"source": "NFHS-5 (2019–21), pessoas de 15 a 49 anos: proporção que já usou a internet. Uma pesquisa com pessoas, não uma contagem de assinaturas.",
|
||||
"missing": "Ainda não há limite estadual para {names}: os números estão nos dados, não no mapa."
|
||||
}
|
||||
},
|
||||
"loading": "Desenhando o mapa…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,5 +64,6 @@
|
|||
"rural": "Rural",
|
||||
"source": "NFHS-5 (2019–21), persoane de 15–49 de ani: ponderea celor care au folosit vreodată internetul. Un sondaj despre oameni, nu o numărătoare de abonamente.",
|
||||
"missing": "Încă nu există limită de stat pentru {names}: cifrele lor sunt în date, nu pe hartă."
|
||||
}
|
||||
},
|
||||
"loading": "Se desenează harta…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,5 +64,6 @@
|
|||
"rural": "Село",
|
||||
"source": "NFHS-5 (2019–21), люди 15–49 лет: доля тех, кто когда-либо пользовался интернетом. Опрос людей, а не подсчёт подписок.",
|
||||
"missing": "Для {names} ещё нет границы штата: их данные есть в таблице, но не на карте."
|
||||
}
|
||||
},
|
||||
"loading": "Отрисовка карты…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,5 +64,6 @@
|
|||
"rural": "农村",
|
||||
"source": "NFHS-5(2019–21),15–49 岁人群:曾经使用过互联网的比例。这是对人的调查,而不是订阅数统计。",
|
||||
"missing": "{names} 尚无邦界:其数据在数据集中,但未显示在地图上。"
|
||||
}
|
||||
},
|
||||
"loading": "正在绘制地图…"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,6 +86,10 @@ const rows = ref([])
|
|||
const selected = ref(null)
|
||||
const aiNoticeOpen = ref(true) // dismissible AI-research disclaimer in the detail sheet
|
||||
const err = ref(null)
|
||||
// Starts TRUE: the notice must be on screen for the first frame, not switched on after a tick. rega
|
||||
// measured 7-30s to the first data paint, and for that whole window the map was an empty basemap with
|
||||
// nothing to say it was still working — indistinguishable from a broken embed.
|
||||
const loading = ref(true)
|
||||
// India by state (data/tables/internet-by-adm1.json, NFHS-5): the one country with sub-national data.
|
||||
const adm1 = shallowRef(null) // { meta, byArea: { [adm1]: { name, women: {total,urban,rural}, men: {…} } } }
|
||||
const adm1Sex = ref('women') // which half of the survey the fill shows; both are in the sheet
|
||||
|
|
@ -438,8 +442,13 @@ onMounted(async () => {
|
|||
paintGroups(map)
|
||||
const geo = await adm1Loaded
|
||||
if (geo && !unmounted) paintAdm1(map, geo)
|
||||
// ★ CLEARED HERE, NOT ON 'load'. rega measured 7-30s from mount to the first data paint under
|
||||
// SwiftShader: the style fires 'load' early, while the shaded countries, the adm1 provinces and
|
||||
// the 2,105 dots all arrive later. Clearing on 'load' would retire the notice during exactly the
|
||||
// wait it exists to explain, leaving the reader with an empty basemap and no reason for it.
|
||||
loading.value = false
|
||||
})
|
||||
} catch (e) { err.value = String(e.message || e) }
|
||||
} catch (e) { err.value = String(e.message || e); loading.value = false }
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
// ★ RELEASE THE TEST HOOKS. Each pins whatever it closes over — a map instance pins its
|
||||
|
|
@ -462,6 +471,14 @@ const fmt = (n) => (Number(n) || 0).toLocaleString()
|
|||
const groupOpen = computed(() => !!uiStore?.selectedPeopleGroup)
|
||||
|
||||
useShadowStyles(
|
||||
// ⚠ THE MAP MUST FILL ITS HOST, NOT THE VIEWPORT. This element had NO :host rule at all, so a
|
||||
// custom element defaults to display:inline with no height of its own, and .gm's absolute inset:0
|
||||
// resolved against whatever ancestor happened to be positioned. rega measured the result in the
|
||||
// /embed-test re-shoot at 1440: a 1198x900 canvas inside a 1198x560 embed card — ~340px, the
|
||||
// attribution among it, drawn below the card and clipped. Same class as the board's, and the same
|
||||
// fix it already carries: height:100% so a height-bounded slot decides, min-height as a floor so an
|
||||
// AUTO-height host still gets a usable map instead of a zero-height one that renders nothing.
|
||||
':host{display:block;width:100%;height:100%;min-height:420px}' +
|
||||
'.gm{position:absolute;inset:0;overflow:hidden}' +
|
||||
'.gm-map{position:absolute;inset:0}' +
|
||||
// LEGEND: a BOUNDED, left-anchored panel — NOT a full-width strip.
|
||||
|
|
@ -523,6 +540,9 @@ useShadowStyles(
|
|||
'.gm-list ul{margin:0;padding-left:17px;font-size:12px;line-height:1.5}' +
|
||||
'.gm-note{margin-top:9px;font-size:11px;line-height:1.5;opacity:.75}' +
|
||||
'.gm-err{position:absolute;top:50%;left:0;right:0;text-align:center;font-size:13px;opacity:.7}' +
|
||||
// Same geometry as .gm-err so the two never disagree about where a message belongs. inset-inline,
|
||||
// not left/right: this string is translated, and under ar it reads from the other edge.
|
||||
'.gm-wait{position:absolute;top:50%;inset-inline:0;text-align:center;font-size:13px;opacity:.7}' +
|
||||
'.gm-dot{width:10px;height:10px;border-radius:50%;flex:none;box-sizing:border-box;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}' +
|
||||
// The group panel uses Prayer Progress's two wrappers, switched at the same breakpoint.
|
||||
'.gm-pg-mobile{display:none}' +
|
||||
|
|
@ -576,7 +596,11 @@ useShadowStyles(
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- An error REPLACES the wait, never stacks on it: v-else-if, so a failed load does not leave
|
||||
"still drawing" sitting under an error message contradicting it. role=status, not alert —
|
||||
this is progress, and a screen reader should hear it without being interrupted. -->
|
||||
<div v-if="err" class="gm-err">{{ err }}</div>
|
||||
<div v-else-if="loading" class="gm-wait" role="status">{{ t('connectivity.loading') }}</div>
|
||||
|
||||
<!-- A tapped people-group dot: the same PeopleGroupDetail panel Prayer Progress opens. -->
|
||||
<div v-if="groupOpen" class="gm-pg-desktop">
|
||||
|
|
|
|||
Loading…
Reference in a new issue