Fix scrolling bug, enforce 3 level nesting in sheaf replies #135
Conversation
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
rtshkmr
commented
Nov 16, 2024
Comment on lines
599
to
+605
| # FIXME: @ks0m1c this update function should be updating the parent for the current draft sheaf, but it doesn't seem to be | ||
| # doing so right now, can I leave this to you to check why the update isn't happening? | ||
| # else i'll eventually come back to it. | ||
| # doing so right now | ||
| # what it needs to do: | ||
| # 1. remove assoc b/w old parent and this sheaf | ||
| # 2. create new assoc b/w new parent and this sheaf: | ||
| # - updates path of child | ||
| IO.puts("CHECKPOINT: before updating sheaf") |
There was a problem hiding this comment.
need some support on this @ks0m1c
Basically the props for @Level were not being passed correctly
minor changes
rtshkmr
force-pushed
the
feat/discussion/sheaf-creation-modal
branch
from
b0c431c to
c37d48d
Compare
There was a weird UI bug whereby creating sheafs somehow prevents
scrolling. This was happening in both read and discuss modes.
this was not an easy bug to track, at the end of this 4-6h or so,
i have a better idea of how to debug client side issues in
liveview.
the most helpful learning was to do client side breakpoints
because the browser can do breakpoints on a particular dom node’s
actions, like attribute changes and all that funstuff.
so the simplest replication steps was to use the firefox debugger,
set breakpoint on the body node and listen for attribute changes.
Additionally add `document.body.classList' to the watchlist of
expressions.
the fix was trying to get the hide_modal to be applied on the
event handlers that are OUTSIDE of the modal, and injected in.
Particularly, it’s the sheaf creator form, which has a submit
button that fires off a submit event, and the fix was to wrap the
original submit JS action with `CoreComponents.hide_modal(...)'
Here's the extended NOTES for it
1 BUG on frozen scrollable content
══════════════════════════════════
◊ 1.0.0.0.0.1 actual final fix overview
There was a weird UI bug whereby creating sheafs somehow prevents
scrolling. This was happening in both read and discuss modes.
this was not an easy bug to track, at the end of this 4-6h or so,
i have a better idea of how to debug client side issues in
liveview.
the most helpful learning was to do client side breakpoints
because the browser can do breakpoints on a particular dom node’s
actions, like attribute changes and all that funstuff.
so the simplest replication steps was to use the firefox debugger,
set breakpoint on the body node and listen for attribute changes.
Additionally add `document.body.classList' to the watchlist of
expressions.
the fix was trying to get the hide_modal to be applied on the
event handlers that are OUTSIDE of the modal, and injected in.
Particularly, it’s the sheaf creator form, which has a submit
button that fires off a submit event, and the fix was to wrap the
original submit JS action with `CoreComponents.hide_modal(...)'
◊ 1.0.0.0.0.2 initial description
There was a weird UI bug whereby creating sheafs somehow prevents
scrolling. This was happening in both read and discuss modes.
⁃ possible root-cause reasons to explore
• something to do with push_patch not refreshing things??
unlikely to be the reason because the error only appears when
creating a new sheaf, and the push_patches work in other cases
⁃ replication steps: case A: read to discuss after new sheaf
created
1. create new sheaf in read
2. then do mode change to discuss
case B: in discuss mode, when i create a new sheaf
1. then the same page that could be scrolled suddenly can’t be
scrollable
2. there’s no change to the HTML document though
3. same thing if you change from discuss to read mode, neither
can be scrolled
doesn’t happen when:
1. it’s a new mark created then a mode change ==> only happens
when sheafs are created
⁃ more observations:
1. same behaviour in chrome and firefox
◊ 1.0.0.0.0.3 smallest scope replication:
1. go to discuss mode, refresh
2. now add a quick reply, publish sheaf
3. notice that the window doesn’t scroll anymore
◊ 1.0.0.0.0.4 possible test console input:
try using this in the
┌────
│ contentDisplay = document.getElementById("content-display")
│
│ function isScrollable(element) {
│ const overflowYStyle = window.getComputedStyle(element).overflowY;
│ const hasScrollableContent = element.scrollHeight > element.clientHeight;
│ const isOverflowHidden = overflowYStyle.includes('hidden');
│ window.alert("checking if scrollable:" + JSON.stringify({
│ hasScrollableContent,
│ isOverflowShown: !isOverflowHidden,
│ isScrollable: hasScrollableContent && !isOverflowHidden
│ }, null, 2))
│ return hasScrollableContent && !isOverflowHidden;
│ }
│
│
│ function hasScrollbars(element) {
│ const hasVerticalScrollbar = element.scrollHeight > element.clientHeight;
│ const hasHorizontalScrollbar = element.scrollWidth > element.clientWidth;
│ window.alert("checking if has scrollbars" + JSON.stringify({
│ hasVerticalScrollbar,
│ hasHorizontalScrollbar
│ }, null, 2))
│
│ return hasVerticalScrollbar || hasHorizontalScrollbar;
│ }
│
│ checks = [isScrollable, hasScrollbars].map(fn => fn(contentDisplay))
└────
◊ 1.0.0.0.0.5 progress 1: found that it’s likely because of how the modal::show_modal and hide::modal function
So the realisation is that if the body is set such that overflow
is not hidden, then scrolling will work. Upon deeper check, when a
modal is displayed, the show_modal makes it apply a overflow
hidden to the body which doesn’t allow it to scroll. When
hide_modal is called aagain, then this class is removed, allowing
the content to be scrollable again.
that’s where I direct my focus to.
When i click the reply to and the modal is seen, here’s the output
┌────
│ [debug] HANDLE EVENT "sheaf::toggle_quick_reply" in VyasaWeb.ModeLive.Mediator
│ Component: VyasaWeb.Context.Discuss
│ Parameters: %{"sheaf_path_labels" => "[\"0be0a532\"]", "value" => ""}
│ [debug] Replied in 790µs
│ CHECKPOINT: show modal: %Phoenix.LiveView.JS{
│ ops: [
│ ["show", %{to: "#modal-wrapper-sheaf-creator"}],
│ [
│ "show",
│ %{
│ to: "#modal-wrapper-sheaf-creator-bg",
│ transition: [
│ ["transition-all", "transform", "ease-out", "duration-300"],
│ ["opacity-0"],
│ ["opacity-100"]
│ ]
│ }
│ ],
│ [
│ "show",
│ %{
│ to: "#modal-wrapper-sheaf-creator-container",
│ transition: [
│ ["transition-all", "transform", "ease-out", "duration-300"],
│ ["opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95"],
│ ["opacity-100", "translate-y-0", "sm:scale-100"]
│ ]
│ }
│ ],
│ ["add_class", %{names: ["overflow-hidden"], to: "body"}],
│ ["focus_first", %{to: "#modal-wrapper-sheaf-creator-content"}]
│ ]
│ }
│ CHECKPOINT: show modal: %Phoenix.LiveView.JS{
│ ops: [
│ ["show", %{to: "#modal-wrapper-sheaf-creator"}],
│ [
│ "show",
│ %{
│ to: "#modal-wrapper-sheaf-creator-bg",
│ transition: [
│ ["transition-all", "transform", "ease-out", "duration-300"],
│ ["opacity-0"],
│ ["opacity-100"]
│ ]
│ }
│ ],
│ [
│ "show",
│ %{
│ to: "#modal-wrapper-sheaf-creator-container",
│ transition: [
│ ["transition-all", "transform", "ease-out", "duration-300"],
│ ["opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95"],
│ ["opacity-100", "translate-y-0", "sm:scale-100"]
│ ]
│ }
│ ],
│ ["add_class", %{names: ["overflow-hidden"], to: "body"}],
│ ["focus_first", %{to: "#modal-wrapper-sheaf-creator-content"}]
│ ]
│ }
│ CHECKPOINT: hide modal: %Phoenix.LiveView.JS{
│ ops: [
│ [
│ "push",
│ %{target: "#content-display", event: "ui::toggle_show_sheaf_modal?"}
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator-bg",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100"],
│ ["opacity-0"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ time: 200,
│ to: "#modal-wrapper-sheaf-creator-container",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100", "translate-y-0", "sm:scale-100"],
│ ["opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator",
│ transition: [["block"], ["block"], ["hidden"]]
│ }
│ ],
│ ["remove_class", %{names: ["overflow-hidden"], to: "body"}],
│ ["pop_focus", %{}]
│ ]
│ }
│ CHECKPOINT: hide modal: %Phoenix.LiveView.JS{
│ ops: [
│ [
│ "push",
│ %{target: "#content-display", event: "ui::toggle_show_sheaf_modal?"}
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator-bg",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100"],
│ ["opacity-0"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ time: 200,
│ to: "#modal-wrapper-sheaf-creator-container",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100", "translate-y-0", "sm:scale-100"],
│ ["opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator",
│ transition: [["block"], ["block"], ["hidden"]]
│ }
│ ],
│ ["remove_class", %{names: ["overflow-hidden"], to: "body"}],
│ ["pop_focus", %{}]
│ ]
│ }
│ CHECKPOINT: hide modal: %Phoenix.LiveView.JS{
│ ops: [
│ [
│ "push",
│ %{target: "#content-display", event: "ui::toggle_show_sheaf_modal?"}
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator-bg",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100"],
│ ["opacity-0"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ time: 200,
│ to: "#modal-wrapper-sheaf-creator-container",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100", "translate-y-0", "sm:scale-100"],
│ ["opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator",
│ transition: [["block"], ["block"], ["hidden"]]
│ }
│ ],
│ ["remove_class", %{names: ["overflow-hidden"], to: "body"}],
│ ["pop_focus", %{}]
│ ]
│ }
│ iex(test@127.0.0.1)19>
└────
Then when I click it out again, here’s the output and I can still
scroll correctly:
it’s odd that the hide_modal doesn’t get called in this part
┌────
│ [debug] HANDLE EVENT "ui::toggle_show_sheaf_modal?" in VyasaWeb.ModeLive.Mediator
│ Component: VyasaWeb.Context.Discuss
│ Parameters: %{}
│ [debug] Replied in 2ms
│ iex(test@127.0.0.1)21>
└────
now, if i were to actually make the sheaf: show modal gives:
┌────
│ [debug] HANDLE EVENT "sheaf::toggle_quick_reply" in VyasaWeb.ModeLive.Mediator
│ Component: VyasaWeb.Context.Discuss
│ Parameters: %{"sheaf_path_labels" => "[\"4ce67b86\"]", "value" => ""}
│ [debug] Replied in 1ms
│ CHECKPOINT: show modal: %Phoenix.LiveView.JS{
│ ops: [
│ ["show", %{to: "#modal-wrapper-sheaf-creator"}],
│ [
│ "show",
│ %{
│ to: "#modal-wrapper-sheaf-creator-bg",
│ transition: [
│ ["transition-all", "transform", "ease-out", "duration-300"],
│ ["opacity-0"],
│ ["opacity-100"]
│ ]
│ }
│ ],
│ [
│ "show",
│ %{
│ to: "#modal-wrapper-sheaf-creator-container",
│ transition: [
│ ["transition-all", "transform", "ease-out", "duration-300"],
│ ["opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95"],
│ ["opacity-100", "translate-y-0", "sm:scale-100"]
│ ]
│ }
│ ],
│ ["add_class", %{names: ["overflow-hidden"], to: "body"}],
│ ["focus_first", %{to: "#modal-wrapper-sheaf-creator-content"}]
│ ]
│ }
│ CHECKPOINT: show modal: %Phoenix.LiveView.JS{
│ ops: [
│ ["show", %{to: "#modal-wrapper-sheaf-creator"}],
│ [
│ "show",
│ %{
│ to: "#modal-wrapper-sheaf-creator-bg",
│ transition: [
│ ["transition-all", "transform", "ease-out", "duration-300"],
│ ["opacity-0"],
│ ["opacity-100"]
│ ]
│ }
│ ],
│ [
│ "show",
│ %{
│ to: "#modal-wrapper-sheaf-creator-container",
│ transition: [
│ ["transition-all", "transform", "ease-out", "duration-300"],
│ ["opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95"],
│ ["opacity-100", "translate-y-0", "sm:scale-100"]
│ ]
│ }
│ ],
│ ["add_class", %{names: ["overflow-hidden"], to: "body"}],
│ ["focus_first", %{to: "#modal-wrapper-sheaf-creator-content"}]
│ ]
│ }
│ CHECKPOINT: hide modal: %Phoenix.LiveView.JS{
│ ops: [
│ [
│ "push",
│ %{target: "#content-display", event: "ui::toggle_show_sheaf_modal?"}
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator-bg",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100"],
│ ["opacity-0"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ time: 200,
│ to: "#modal-wrapper-sheaf-creator-container",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100", "translate-y-0", "sm:scale-100"],
│ ["opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator",
│ transition: [["block"], ["block"], ["hidden"]]
│ }
│ ],
│ ["remove_class", %{names: ["overflow-hidden"], to: "body"}],
│ ["pop_focus", %{}]
│ ]
│ }
│ CHECKPOINT: hide modal: %Phoenix.LiveView.JS{
│ ops: [
│ [
│ "push",
│ %{target: "#content-display", event: "ui::toggle_show_sheaf_modal?"}
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator-bg",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100"],
│ ["opacity-0"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ time: 200,
│ to: "#modal-wrapper-sheaf-creator-container",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100", "translate-y-0", "sm:scale-100"],
│ ["opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator",
│ transition: [["block"], ["block"], ["hidden"]]
│ }
│ ],
│ ["remove_class", %{names: ["overflow-hidden"], to: "body"}],
│ ["pop_focus", %{}]
│ ]
│ }
│ CHECKPOINT: hide modal: %Phoenix.LiveView.JS{
│ ops: [
│ [
│ "push",
│ %{target: "#content-display", event: "ui::toggle_show_sheaf_modal?"}
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator-bg",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100"],
│ ["opacity-0"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ time: 200,
│ to: "#modal-wrapper-sheaf-creator-container",
│ transition: [
│ ["transition-all", "transform", "ease-in", "duration-200"],
│ ["opacity-100", "translate-y-0", "sm:scale-100"],
│ ["opacity-0", "translate-y-4", "sm:translate-y-0", "sm:scale-95"]
│ ]
│ }
│ ],
│ [
│ "hide",
│ %{
│ to: "#modal-wrapper-sheaf-creator",
│ transition: [["block"], ["block"], ["hidden"]]
│ }
│ ],
│ ["remove_class", %{names: ["overflow-hidden"], to: "body"}],
│ ["pop_focus", %{}]
│ ]
│ }
│ iex(test@127.0.0.1)23>
│
└────
and creating it does:
┌────
│ [debug] HANDLE EVENT "sheaf::publish" in VyasaWeb.ModeLive.Mediator
│ Component: VyasaWeb.Context.Discuss
│ Parameters: %{"body" => "another day another dollar", "is_private" => "false"}
│ CHECKPOINT update payload: %{
│ parent: %Vyasa.Sangh.Sheaf{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "sheafs">,
│ id: "4ce67b86-f7db-48e4-8834-c03f6fec69fa",
│ body: "Another day another PR",
│ active: true,
│ path: %EctoLtree.LabelTree{labels: ["4ce67b86"]},
│ signature: "ritesh kumar",
│ traits: ["published"],
│ child_count: 1,
│ session_id: "164eb05d-221a-4939-b180-8394e1a5515f",
│ session: #Ecto.Association.NotLoaded<association :session is not loaded>,
│ parent_id: nil,
│ parent: #Ecto.Association.NotLoaded<association :parent is not loaded>,
│ marks: [
│ %Vyasa.Sangh.Mark{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "marks">,
│ id: "ed98ad99-a394-4950-8083-b8f20ebe2d0f",
│ body: "",
│ order: 2,
│ state: :live,
│ verse_id: nil,
│ sheaf_id: "4ce67b86-f7db-48e4-8834-c03f6fec69fa",
│ sheaf: #Ecto.Association.NotLoaded<association :sheaf is not loaded>,
│ binding_id: nil,
│ binding: nil,
│ inserted_at: ~U[2024-10-29 03:09:05Z],
│ updated_at: ~U[2024-10-29 03:09:05Z]
│ },
│ %Vyasa.Sangh.Mark{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "marks">,
│ id: "ecbf7f17-1a5e-4ac4-b3b2-df0f00fdefb8",
│ body: "mark 2",
│ order: 1,
│ state: :live,
│ verse_id: nil,
│ sheaf_id: "4ce67b86-f7db-48e4-8834-c03f6fec69fa",
│ sheaf: #Ecto.Association.NotLoaded<association :sheaf is not loaded>,
│ binding_id: "27e6e81d-5512-4b5d-badc-eaa12554d4cd",
│ binding: %Vyasa.Adapters.Binding{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "bindings">,
│ id: "27e6e81d-5512-4b5d-badc-eaa12554d4cd",
│ w_type: nil,
│ field_key: [:body],
│ field: nil,
│ node_id: nil,
│ verse_id: "5c2c9d91-3843-4c37-a3a1-b0771f8d2b46",
│ verse: #Ecto.Association.NotLoaded<association :verse is not loaded>,
│ chapter_no: nil,
│ chapter: #Ecto.Association.NotLoaded<association :chapter is not loaded>,
│ source_id: nil,
│ source: #Ecto.Association.NotLoaded<association :source is not loaded>,
│ translation_id: nil,
│ translation: #Ecto.Association.NotLoaded<association :translation is not loaded>,
│ sheaf_id: nil,
│ sheaf: #Ecto.Association.NotLoaded<association :sheaf is not loaded>,
│ window: %Vyasa.Adapters.Binding.Window{
│ id: "c638fc0f-aca1-4693-974b-525cd005f2b2",
│ line_number: nil,
│ quote: "कुमार",
│ start_quote: 89,
│ end_quote: 104,
│ start_time: nil,
│ end_time: nil
│ }
│ },
│ inserted_at: ~U[2024-10-29 03:08:58Z],
│ updated_at: ~U[2024-10-29 03:09:00Z]
│ },
│ %Vyasa.Sangh.Mark{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "marks">,
│ id: "8152638c-91b4-4f89-b50c-a1522d22a560",
│ body: "mark1",
│ order: 0,
│ state: :live,
│ verse_id: nil,
│ sheaf_id: "4ce67b86-f7db-48e4-8834-c03f6fec69fa",
│ sheaf: #Ecto.Association.NotLoaded<association :sheaf is not loaded>,
│ binding_id: "048b4189-4490-42b8-95c6-05ac125c5129",
│ binding: %Vyasa.Adapters.Binding{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "bindings">,
│ id: "048b4189-4490-42b8-95c6-05ac125c5129",
│ w_type: nil,
│ field_key: [:target, :body_translit_meant],
│ field: nil,
│ node_id: nil,
│ verse_id: nil,
│ verse: #Ecto.Association.NotLoaded<association :verse is not loaded>,
│ chapter_no: nil,
│ chapter: #Ecto.Association.NotLoaded<association :chapter is not loaded>,
│ source_id: nil,
│ source: #Ecto.Association.NotLoaded<association :source is not loaded>,
│ translation_id: "97a7a662-a91b-486f-93e8-7ae932d01a1a",
│ translation: #Ecto.Association.NotLoaded<association :translation is not loaded>,
│ sheaf_id: nil,
│ sheaf: #Ecto.Association.NotLoaded<association :sheaf is not loaded>,
│ window: %Vyasa.Adapters.Binding.Window{
│ id: "f264692b-28ae-48fb-8b5f-d2ae55dee7ad",
│ line_number: nil,
│ quote: "the mirror of my heart with the dust of my Guru’s lotus feet, I recite the divine fame of the greatest king of Raghukul dynasty, ",
│ start_quote: 16,
│ end_quote: 147,
│ start_time: nil,
│ ...
│ }
│ },
│ inserted_at: ~U[2024-10-29 03:08:50Z],
│ updated_at: ~U[2024-10-29 03:08:50Z]
│ }
│ ],
│ inserted_at: ~N[2024-10-27 23:19:11],
│ updated_at: ~N[2024-10-29 03:09:27]
│ },
│ signature: "ritesh kumar",
│ body: "another day another dollar",
│ traits: ["published"]
│ }
│ CHECKPOINT: update_sheaf
│ CHECKPOINT: mutate_changeset: %{
│ attrs: %{
│ parent: %Vyasa.Sangh.Sheaf{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "sheafs">,
│ id: "4ce67b86-f7db-48e4-8834-c03f6fec69fa",
│ body: "Another day another PR",
│ active: true,
│ path: %EctoLtree.LabelTree{labels: ["4ce67b86"]},
│ signature: "ritesh kumar",
│ traits: ["published"],
│ child_count: 1,
│ session_id: "164eb05d-221a-4939-b180-8394e1a5515f",
│ session: #Ecto.Association.NotLoaded<association :session is not loaded>,
│ parent_id: nil,
│ parent: #Ecto.Association.NotLoaded<association :parent is not loaded>,
│ marks: [
│ %Vyasa.Sangh.Mark{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "marks">,
│ id: "ed98ad99-a394-4950-8083-b8f20ebe2d0f",
│ body: "",
│ order: 2,
│ state: :live,
│ verse_id: nil,
│ sheaf_id: "4ce67b86-f7db-48e4-8834-c03f6fec69fa",
│ sheaf: #Ecto.Association.NotLoaded<association :sheaf is not loaded>,
│ binding_id: nil,
│ binding: nil,
│ inserted_at: ~U[2024-10-29 03:09:05Z],
│ updated_at: ~U[2024-10-29 03:09:05Z]
│ },
│ %Vyasa.Sangh.Mark{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "marks">,
│ id: "ecbf7f17-1a5e-4ac4-b3b2-df0f00fdefb8",
│ body: "mark 2",
│ order: 1,
│ state: :live,
│ verse_id: nil,
│ sheaf_id: "4ce67b86-f7db-48e4-8834-c03f6fec69fa",
│ sheaf: #Ecto.Association.NotLoaded<association :sheaf is not loaded>,
│ binding_id: "27e6e81d-5512-4b5d-badc-eaa12554d4cd",
│ binding: %Vyasa.Adapters.Binding{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "bindings">,
│ id: "27e6e81d-5512-4b5d-badc-eaa12554d4cd",
│ w_type: nil,
│ field_key: [:body],
│ field: nil,
│ node_id: nil,
│ verse_id: "5c2c9d91-3843-4c37-a3a1-b0771f8d2b46",
│ verse: #Ecto.Association.NotLoaded<association :verse is not loaded>,
│ chapter_no: nil,
│ chapter: #Ecto.Association.NotLoaded<association :chapter is not loaded>,
│ source_id: nil,
│ source: #Ecto.Association.NotLoaded<association :source is not loaded>,
│ translation_id: nil,
│ translation: #Ecto.Association.NotLoaded<association :translation is not loaded>,
│ sheaf_id: nil,
│ sheaf: #Ecto.Association.NotLoaded<association :sheaf is not loaded>,
│ window: %Vyasa.Adapters.Binding.Window{
│ id: "c638fc0f-aca1-4693-974b-525cd005f2b2",
│ line_number: nil,
│ quote: "कुमार",
│ start_quote: 89,
│ end_quote: 104,
│ start_time: nil,
│ ...
│ }
│ },
│ inserted_at: ~U[2024-10-29 03:08:58Z],
│ updated_at: ~U[2024-10-29 03:09:00Z]
│ },
│ %Vyasa.Sangh.Mark{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "marks">,
│ id: "8152638c-91b4-4f89-b50c-a1522d22a560",
│ body: "mark1",
│ order: 0,
│ state: :live,
│ verse_id: nil,
│ sheaf_id: "4ce67b86-f7db-48e4-8834-c03f6fec69fa",
│ sheaf: #Ecto.Association.NotLoaded<association :sheaf is not loaded>,
│ binding_id: "048b4189-4490-42b8-95c6-05ac125c5129",
│ binding: %Vyasa.Adapters.Binding{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "bindings">,
│ id: "048b4189-4490-42b8-95c6-05ac125c5129",
│ w_type: nil,
│ field_key: [:target, :body_translit_meant],
│ field: nil,
│ node_id: nil,
│ verse_id: nil,
│ verse: #Ecto.Association.NotLoaded<association :verse is not loaded>,
│ chapter_no: nil,
│ chapter: #Ecto.Association.NotLoaded<association :chapter is not loaded>,
│ source_id: nil,
│ source: #Ecto.Association.NotLoaded<association :source is not loaded>,
│ translation_id: "97a7a662-a91b-486f-93e8-7ae932d01a1a",
│ translation: #Ecto.Association.NotLoaded<association :translation is not loaded>,
│ sheaf_id: nil,
│ sheaf: #Ecto.Association.NotLoaded<association :sheaf is not loaded>,
│ window: %Vyasa.Adapters.Binding.Window{
│ id: "f264692b-28ae-48fb-8b5f-d2ae55dee7ad",
│ line_number: nil,
│ quote: "the mirror of my heart with the dust of my Guru’s lotus feet, I recite the divine fame of the greatest king of Raghukul dynasty, ",
│ start_quote: 16,
│ end_quote: 147,
│ ...
│ }
│ },
│ inserted_at: ~U[2024-10-29 03:08:50Z],
│ updated_at: ~U[2024-10-29 03:08:50Z]
│ }
│ ],
│ inserted_at: ~N[2024-10-27 23:19:11],
│ updated_at: ~N[2024-10-29 03:09:27]
│ },
│ signature: "ritesh kumar",
│ body: "another day another dollar",
│ traits: ["published"]
│ },
│ sheaf: %Vyasa.Sangh.Sheaf{
│ __meta__: #Ecto.Schema.Metadata<:loaded, "sheafs">,
│ id: "32eecba8-966f-41ec-8b9b-048a2b2f0b43",
│ body: nil,
│ active: true,
│ path: %EctoLtree.LabelTree{labels: ["32eecba8"]},
│ signature: nil,
│ traits: ["draft"],
│ child_count: 0,
│ session_id: "164eb05d-221a-4939-b180-8394e1a5515f",
│ session: #Ecto.Association.NotLoaded<association :session is not loaded>,
│ parent_id: nil,
│ parent: #Ecto.Association.NotLoaded<association :parent is not loaded>,
│ marks: [
│ %Vyasa.Sangh.Mark{
│ __meta__: #Ecto.Schema.Metadata<:built, "marks">,
│ id: "fa5b9642-7d8a-483c-b4cc-bdd8859e877c",
│ body: nil,
│ order: 0,
│ state: :draft,
│ verse_id: nil,
│ sheaf_id: nil,
│ sheaf: #Ecto.Association.NotLoaded<association :sheaf is not loaded>,
│ binding_id: nil,
│ binding: #Ecto.Association.NotLoaded<association :binding is not loaded>,
│ inserted_at: nil,
│ updated_at: nil
│ }
│ ],
│ inserted_at: ~N[2024-11-18 04:01:43],
│ updated_at: ~N[2024-11-18 04:01:43]
│ }
│ }
│ CHECKPOINT: mutate changeset outcome changeset:: #Ecto.Changeset<
│ action: nil,
│ changes: %{
│ path: %EctoLtree.LabelTree{labels: ["4ce67b86", "32eecba8"]},
│ signature: "ritesh kumar",
│ body: "another day another dollar",
│ traits: ["published"],
│ parent_id: "4ce67b86-f7db-48e4-8834-c03f6fec69fa"
│ },
│ errors: [],
│ data: #Vyasa.Sangh.Sheaf<>,
│ valid?: true,
│ ...
│ >
│ [debug] QUERY OK source="sheafs" db=4.6ms queue=3.1ms idle=1960.1ms
│ UPDATE "sheafs" SET "path" = $1, "signature" = $2, "body" = $3, "traits" = $4, "parent_id" = $5, "updated_at" = $6 WHERE "id" = $7 [%EctoLtree.LabelTree{labels: ["4ce67b86", "32eecba8"]}, "ritesh kumar", "another day another dollar", ["published"], "4ce67b86-f7db-48e4-8834-c03f6fec69fa", ~N[2024-11-18 06:08:17], "32eecba8-966f-41ec-8b9b-048a2b2f0b43"]
│ ↳ VyasaWeb.Context.Discuss.handle_event/3, at: lib/vyasa_web/components/contexts/discuss.ex:758
│ SEE ME : cast_path, sheaf:: #Ecto.Changeset<
│ action: nil,
│ changes: %{
│ id: "cb93c1c2-5503-44b3-849c-0c5f0867a04d",
│ session_id: "164eb05d-221a-4939-b180-8394e1a5515f",
│ traits: ["draft"]
│ },
│ errors: [],
│ data: #Vyasa.Sangh.Sheaf<>,
│ valid?: true,
│ ...
│ >
│ [debug] QUERY OK source="sheafs" db=3.0ms queue=0.8ms idle=1968.5ms
│ INSERT INTO "sheafs" ("active","id","path","session_id","traits","inserted_at","updated_at") VALUES ($1,$2,$3,$4,$5,$6,$7) [true, "cb93c1c2-5503-44b3-849c-0c5f0867a04d", %EctoLtree.LabelTree{labels: ["cb93c1c2"]}, "164eb05d-221a-4939-b180-8394e1a5515f", ["draft"], ~N[2024-11-18 06:08:17], ~N[2024-11-18 06:08:17]]
│ ↳ Vyasa.Sangh.Sheaf.draft!/1, at: lib/vyasa/sangh/sheaf.ex:195
│ [debug] Replied in 46ms
│ iex(test@127.0.0.1)26>
└────
◊ 1.0.0.0.0.6 so this diff will actually fix it, but it’s hacky:
┌────
│ modified lib/vyasa_web/components/core_components.ex
│ @@ -988,27 +988,35 @@ defmodule VyasaWeb.CoreComponents do
│ end
│
│ def show_modal(js \\ %JS{}, id) when is_binary(id) do
│ - js
│ - |> JS.show(to: "##{id}")
│ - |> JS.show(
│ - to: "##{id}-bg",
│ - transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
│ - )
│ - |> show("##{id}-container")
│ - |> JS.add_class("overflow-hidden", to: "body")
│ - |> JS.focus_first(to: "##{id}-content")
│ + series =
│ + js
│ + |> JS.show(to: "##{id}")
│ + |> JS.show(
│ + to: "##{id}-bg",
│ + transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
│ + )
│ + |> show("##{id}-container")
│ + # |> JS.add_class("overflow-hidden", to: "body")
│ + |> JS.focus_first(to: "##{id}-content")
│ +
│ + IO.inspect(series, label: "CHECKPOINT: show modal")
│ + series
│ end
│
│ def hide_modal(js \\ %JS{}, id) do
│ - js
│ - |> JS.hide(
│ - to: "##{id}-bg",
│ - transition: {"transition-all transform ease-in duration-200", "opacity-100", "opacity-0"}
│ - )
│ - |> hide("##{id}-container")
│ - |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
│ - |> JS.remove_class("overflow-hidden", to: "body")
│ - |> JS.pop_focus()
│ + series =
│ + js
│ + |> JS.hide(
│ + to: "##{id}-bg",
│ + transition: {"transition-all transform ease-in duration-200", "opacity-100", "opacity-0"}
│ + )
│ + |> hide("##{id}-container")
│ + |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
│ + # |> JS.remove_class("overflow-hidden", to: "body")
│ + |> JS.pop_focus()
│ +
│ + IO.inspect(series, label: "CHECKPOINT: hide modal")
│ + series
│ end
└────
◊ 1.0.0.0.0.7 now investigating long term fix
I have no idea how to fix this for the longer term. I shall just
do the short term fix (no applying )
this should work, addingthe hide_modal fucntion to the
confirmation button should work: [this one]
the way to test whether the thing works is by checking what the
output of `document.body.classList' is
[this one]
<file:~/Projects/vyasa/lib/vyasa_web/components/contexts/components.ex::<button
type="button"
phx-click={VyasaWeb.CoreComponents.hide_modal(@on_cancel_callback,
@id)} class="w-2/5 text-bold mt-4 flex items-center justify-center
p-3 rounded-full border-2 border-brand text-grey-800 bg-brand-dark
hover:bg-brand-light transition-colors duration-200 shadow-lg
hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-brand
focus:ring-opacity-50" phx-target={@event_target} >>
This actually worked the instant i wired it up. amazing. Note: 1. similar subroutine needs to be there in the read mode publish handler! 2. i think the sorting by inserted at timeing for the lattice entries may not be working, weird
rtshkmr
changed the title
…discussion/sheaf-creation-modal
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
A bunch of changes here publishing this as the PR first
Testing Instructions
ensure your db is seeded for ease
1) Discuss Mode Quick Replies
go to discuss mode
create the following replies:
Example of outcome
note: a quick reply won't persist the reply to context, but a pin would. I'm thinking of changing the action button for pin to make
2) Pinning Behaviour to facilitate mode switches
In discuss mode, select a sheaf you wanna reply to, but want to gather marks for it first. Click pin on this like so:
change to read mode (use the control panel, or adjust url, doesn't matter)
attempt to reply to it from within read mode and you should see the same pinned comment in the reply to context
3) Verifying that the 3 level nesting limit is adhered to