Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

テーブルコンポーネントを react-data-grid に置き換え #60

Merged
merged 39 commits into from
Oct 18, 2023
Merged

テーブルコンポーネントを react-data-grid に置き換え #60

merged 39 commits into from
Oct 18, 2023
+4,772 −6,345

Conversation

phanect
Copy link
Contributor

@phanect phanect commented Sep 14, 2023 •
edited
Loading

テーブルコンポーネントを react-data-grid に置き換え、Excel などの UI に近付けた。
Closes #56

プレビュー環境: https://feat-data-grid.opendata-editor-preview.pages.dev/opendata-editor/?data=https://opendata.takamatsu-fact.com/polling_place_list/data.csv
現行環境 (比較用): https://geolonia.github.io/opendata-editor/?data=https://opendata.takamatsu-fact.com/polling_place_list/data.csv

今回の修正の変更点

  • 変更
    • テーブル左側の編集ボタンを削除し、Excel 等のようにダブルクリックでセルを編集できるように変更
    • テーブル左側の削除ボタンを削除し、右クリックで開くコンテキストメニューから、選択したセルの行を削除できるように変更
    • 地図を常に編集モードとし、対応する行のセルが選択されている場合はマップピンを立てておき、そのままマップピンをドラッグすることで移動できるように変更
    • 行選択時だけではなく、セル選択時にも、マップでその行の対応する地点にズームするように変更
    • テーブルのヘッダー行の色を灰色に変更 (ライブラリーの制限による)
  • 機能追加
    • 右クリックで開くコンテキストメニューから、選択したセルの上下に行を追加できるように変更

相談したい変更点

テーブル左に行選択ボタンを追加したが、この行選択ボタン (== 行選択できる機能) の要否を相談したい。

  • メリット: 同時に複数の行を選択できるので、選択された行及びセルに対応する複数の地点が含まれるようにマップをズームすることができる
  • メリット: 行選択ができることで、選択した行を一括して削除することができる (現在のところは未実装)
  • デメリット: 行を選択すると同時に別の行のセルを選択するということができてしまうので、行とセルが同時に選択された状態で削除ボタンをクリックしたら、選択した行が削除されるのか、選択したセルの行だけ削除されるのか、それとも選択した行と選択したセルの行の両方が削除されるのか直感的にわかりにくく、混乱を招く気がする

個人的にはメリットにそれほどの価値を感じず、デメリットの方が大きいような気がするので、行選択機能は削除した方が良い気がしている。

@phanect phanect added the enhancement New feature or request label Sep 14, 2023
@phanect phanect self-assigned this Sep 14, 2023
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Sep 14, 2023 •
edited
Loading

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 9ee0bd1
Status: ✅  Deploy successful!
Preview URL: https://590a2541.opendata-editor-preview.pages.dev
Branch Preview URL: https://feat-data-grid.opendata-editor-preview.pages.dev

View logs

@phanect phanect force-pushed the feat-data-grid branch 4 times, most recently from 61fb991 to 68adce5 Compare September 14, 2023 07:09
@ShinichiNishikawa
Copy link
Collaborator

相談事項を読む前に触ってみたのですが「このチェックボックス（行選択ボタン）はなんだろう？」と思いました。
また、複数のポイントを選択できる状態も、便利なシーンが想像できなかったです。

なので、シンプルにしてしまって、選択も編集も一行ずつ（1ポイントずつ）がいいと思いました。

地図と表組みが連動しているので、便利（ポイントクリックしたら行が選択され、行を選択したらポイントが中心に来る）というだけにしておくと、誰にでも使えるツールになりそうだと思いました。

@phanect
Copy link
Contributor Author

phanect commented Sep 14, 2023

@ShinichiNishikawa ありがとうございます。
確かにこのチェックボックス方式だと、Excel や Google Sheets の行選択の方法と違うこともあり、混乱しそうですね。

@phanect phanect force-pushed the feat-data-grid branch 5 times, most recently from 176e2be to aceb5e3 Compare September 21, 2023 10:02
@phanect phanect force-pushed the feat-data-grid branch 3 times, most recently from 60a7abb to 0bc0dd4 Compare September 22, 2023 07:41
@phanect phanect force-pushed the feat-data-grid branch 4 times, most recently from ddc5836 to f9229f0 Compare October 2, 2023 09:46
phanect added 2 commits October 4, 2023 20:26
@phanect
test: add getMapZoom() so that tests can observe zoom level of the map
9bbcb38 
Revert "test: add `getMapZoom()` so that tests can observe zoom level of the map"

This reverts commit 3f75a2d.

feat: add quotes into downloaded CSVs
@phanect
test: expose window.geoloniaDebug for testing
05f9fff
@phanect phanect force-pushed the feat-data-grid branch 3 times, most recently from b0f7b22 to 51451e0 Compare October 5, 2023 08:40
@phanect phanect requested review from keichan34 and naogify October 6, 2023 08:34
@phanect phanect marked this pull request as ready for review October 6, 2023 08:34
@keichan34
Copy link
Member

@phanect こちら確認しようとしましたが、なぜかテーブルが真っ白になってしまいます。。

Screenshot from 2023-10-10 14-13-03

HTMLの形は入っているけどrowの内容が入っていないようです。。何か設定をしないといけないのかな。。？
こちらで確認しました https://opendata.takamatsu-fact.com/aed_location/data.csv

@phanect
Copy link
Contributor Author

phanect commented Oct 10, 2023

@keichan34 すみません、こちら、URL に CSV の URL を指定した場合は発生しませんが、ドラッグアンドドロップで CSV を入れた時に発生するようです。
確認します。

@phanect
Copy link
Contributor Author

phanect commented Oct 10, 2023

@keichan34 おまたせしました、上記のテーブルが表示されない件、修正完了しました。

keichan34
keichan34 approved these changes Oct 11, 2023
View reviewed changes
Copy link
Member

@keichan34 keichan34 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ありがとうございました！良さそうですね。
細かい改善点もいくつかありそうなので、個別にissueとして登録します

@phanect phanect merged commit d0d0c7b into main Oct 18, 2023
@phanect phanect deleted the feat-data-grid branch October 18, 2023 09:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@keichan34 keichan34 keichan34 approved these changes

@naogify naogify Awaiting requested review from naogify

Assignees

@phanect phanect

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

データグリッドのライブラリーの選定・導入
3 participants
@phanect @ShinichiNishikawa @keichan34