Talk to the CityのUIを改造する
visualization.py を見るとわかるように command = f"REPORT={output_dir} npm run build" をsubprocessで叩いているだけvisualizationの手前のaggregationのstepで、可視化に必要なデータを全部result.jsonに集約している。
next-app/pages/index.tsx でそれを読んでいるindex.tsxexport async function getStaticProps({ params }: any) {
const report = process.env.REPORT
if (report && report.length) {
const fs = require('fs');
const result = fs.readFileSync(`../pipeline/outputs/${report}/result.json`, 'utf8');
return { props: { result: JSON.parse(result) } }
}
const fs = require('fs');
const subfolders = fs.readdirSync(outputs, { withFileTypes: true })
.map((x: any) => x.name)
.filter((x: string) => !x.startsWith('.'));
return { props: { subfolders } };
}この
{ props: { result: JSON.parse(result) } } の部分がHTMLにはこんな感じで埋め込まれているhtml <script id="__NEXT_DATA__" type="application/json">
{
"props": {
"pageProps": {
"result": {
"clusters": [
{
"cluster": "環境配慮都市", ...というわけで
"result": { ... } のところをresult.jsonに書き出してやれば静的HTMLにしたレポートをベースに発展的なUI開発ができる書き出したresult.jsonを仮に
scatter/pipeline/outputs/tokyo/result.json においたとすると scatter/next-app% で $ REPORT=tokyo npm run build すると scatter/pipeline/outputs/tokyo/report/ に出力されるとりあえず検索ハイライトをつけてみた
(
npm run dev でホットリロードの開発サーバが起動することを期待したが Error: Cannot find module 'react/jsx-runtime' とエラーになって、よくわからないので諦めた)Related Pages
- →o1_pro×satisfactoryマルチプレイ×プロジェクトのソースコードをまとめてクリップボードに入れるツール×utas-umap×人生の選択肢を知ったきっかけデータセット×phyogocn×thinklet×pmvid×リンクをたどって到達できるページを全部まとめるjs×シン東京2050ブロードリスニング×Talk to the City検索ハイライト機能×miro_api×2024-07-22~27スペシャル週記×cosense英訳のホスティング2024-11-24×論理的思考とは何か×bluesky→
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]