From 5b0748b13f6660798c74132ba97f5bba3bd1b0da Mon Sep 17 00:00:00 2001 From: Ritesh Kumar Date: Sat, 16 Nov 2024 21:13:17 +0800 Subject: [PATCH 1/9] Minor changes, requires ecto support --- lib/vyasa/sangh.ex | 4 +++ lib/vyasa/sangh/sheaf.ex | 26 ++++++++++++++------ lib/vyasa_web/components/contexts/discuss.ex | 9 +++++-- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/lib/vyasa/sangh.ex b/lib/vyasa/sangh.ex index e6df6301..7370a43d 100644 --- a/lib/vyasa/sangh.ex +++ b/lib/vyasa/sangh.ex @@ -403,6 +403,8 @@ defmodule Vyasa.Sangh do # """ def update_sheaf(%Sheaf{} = sheaf, attrs) do + IO.puts("CHECKPOINT: update_sheaf") + sheaf |> Sheaf.mutate_changeset(attrs) |> Repo.update() @@ -421,6 +423,8 @@ defmodule Vyasa.Sangh do # """ def update_sheaf!(%Sheaf{} = sheaf, attrs) do + IO.puts("CHECKPOINT: update_sheaf!") + sheaf |> Sheaf.mutate_changeset(attrs) |> Repo.update!() diff --git a/lib/vyasa/sangh/sheaf.ex b/lib/vyasa/sangh/sheaf.ex index 759ce83b..e06d5eb8 100644 --- a/lib/vyasa/sangh/sheaf.ex +++ b/lib/vyasa/sangh/sheaf.ex @@ -67,13 +67,19 @@ defmodule Vyasa.Sangh.Sheaf do end def mutate_changeset(%Sheaf{} = sheaf, attrs) do - sheaf - |> Vyasa.Repo.preload([:marks]) - |> cast(attrs, [:id, :body, :active, :signature, :traits]) - |> cast_path(attrs) - |> assoc_marks(attrs) - |> Map.put(:repo_opts, on_conflict: {:replace_all_except, [:id]}, conflict_target: :id) - |> validate_include_subset(:traits, ["personal", "draft", "published"]) + IO.inspect(%{sheaf: sheaf, attrs: attrs}, label: "CHECKPOINT: mutate_changeset") + + cs = + sheaf + |> Vyasa.Repo.preload([:marks]) + |> cast(attrs, [:id, :body, :active, :signature, :traits]) + |> cast_path(attrs) + |> assoc_marks(attrs) + |> Map.put(:repo_opts, on_conflict: {:replace_all_except, [:id]}, conflict_target: :id) + |> validate_include_subset(:traits, ["personal", "draft", "published"]) + + IO.inspect(cs, label: "CHECKPOINT: mutate changeset outcome changeset:") + cs end defp assoc_marks(sheaf, %{marks: [%Mark{} | _] = marks}) do @@ -87,13 +93,17 @@ defmodule Vyasa.Sangh.Sheaf do end defp cast_path(%{changes: %{id: sheaf_id}} = sheaf, %{ - parent: %Sheaf{id: p_sheaf_id, path: lpath} + parent: %Sheaf{id: p_sheaf_id, path: lpath} = parent }) do + IO.inspect(parent, label: "SEE ME : cast_path, parent:") + sheaf |> cast(%{parent_id: p_sheaf_id, path: encode_path(sheaf_id, lpath)}, [:parent_id, :path]) end defp cast_path(%{changes: %{id: sheaf_id}} = sheaf, _) do + IO.inspect(sheaf, label: "SEE ME : cast_path, sheaf:") + sheaf |> cast(%{path: encode_path(sheaf_id)}, [:path]) end diff --git a/lib/vyasa_web/components/contexts/discuss.ex b/lib/vyasa_web/components/contexts/discuss.ex index a2ef5830..e3601222 100644 --- a/lib/vyasa_web/components/contexts/discuss.ex +++ b/lib/vyasa_web/components/contexts/discuss.ex @@ -597,8 +597,13 @@ defmodule VyasaWeb.Context.Discuss do end # 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") + updated_draft_sheaf = draft_sheaf |> Sangh.update_sheaf!(%{ From 43bbc58149ab38aff262f8d995ca33da5b7a2935 Mon Sep 17 00:00:00 2001 From: ks0m1c_dharma Date: Sat, 16 Nov 2024 23:16:54 +0800 Subject: [PATCH 2/9] casting paths for replies --- lib/vyasa/sangh/sheaf.ex | 4 ++++ lib/vyasa_web/components/contexts/discuss.ex | 1 + 2 files changed, 5 insertions(+) diff --git a/lib/vyasa/sangh/sheaf.ex b/lib/vyasa/sangh/sheaf.ex index e06d5eb8..aa4c905d 100644 --- a/lib/vyasa/sangh/sheaf.ex +++ b/lib/vyasa/sangh/sheaf.ex @@ -108,6 +108,10 @@ defmodule Vyasa.Sangh.Sheaf do |> cast(%{path: encode_path(sheaf_id)}, [:path]) end + defp cast_path(%{data: %{id: sheaf_id}} = sheaf, %{parent: %Sheaf{id: p_sheaf_id, path: lpath}}) do + cast(sheaf, %{parent_id: p_sheaf_id, path: encode_path(sheaf_id, lpath)}, [:parent_id, :path]) + end + defp cast_path(sheaf, _) do sheaf end diff --git a/lib/vyasa_web/components/contexts/discuss.ex b/lib/vyasa_web/components/contexts/discuss.ex index e3601222..cf812526 100644 --- a/lib/vyasa_web/components/contexts/discuss.ex +++ b/lib/vyasa_web/components/contexts/discuss.ex @@ -584,6 +584,7 @@ defmodule VyasaWeb.Context.Discuss do reply_to_lattice_key = Jason.decode!(new_reply_to_target) reply_to_sheaf = sheaf_lattice |> SheafLattice.get_sheaf_from_lattice(reply_to_lattice_key) draft_sheaf = sheaf_lattice |> SheafLattice.get_sheaf_from_lattice(draft_sheaf_lattice_key) + # why not sheaf_lattice["reply_to_path"] -> quite explicit new_reply_to_path = case reply_to_sheaf do From b444b43ba026bdc80966ce22cbb4483164ca1132 Mon Sep 17 00:00:00 2001 From: Ritesh Kumar Date: Sun, 17 Nov 2024 23:02:05 +0800 Subject: [PATCH 3/9] Fix tree-rendering issues Basically the props for @level were not being passed correctly --- .../components/contexts/discuss/sheaf_tree.ex | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/lib/vyasa_web/components/contexts/discuss/sheaf_tree.ex b/lib/vyasa_web/components/contexts/discuss/sheaf_tree.ex index 8c85e5da..1f2810e7 100644 --- a/lib/vyasa_web/components/contexts/discuss/sheaf_tree.ex +++ b/lib/vyasa_web/components/contexts/discuss/sheaf_tree.ex @@ -148,7 +148,12 @@ defmodule VyasaWeb.Context.Discuss.SheafTree do class={["border-l-2 border-gray-200", @container_class]} id={"collapsible-sheaf-container-" <> @id} > - + <.debug_dump + label="collapsible sheaf container" + id={@id} + level={@level} + num_children={@sheafs |> Enum.count()} + /> <%= if is_nil(@sheafs) or !@sheafs or Enum.empty?(@sheafs) do %>

No child sheafs available.

@@ -169,8 +174,8 @@ defmodule VyasaWeb.Context.Discuss.SheafTree do children={ SheafLattice.read_published_from_sheaf_lattice( @sheaf_lattice, - @level, - @sheaf.path.labels ++ [nil] + @level + 2, + child.path.labels ++ [nil] ) } /> @@ -251,13 +256,13 @@ defmodule VyasaWeb.Context.Discuss.SheafTree do id={"level" <> to_string(@level) <> "-sheaf-component_container-" <> @id} class="flex flex-col" > - + level={@level} + num_children={@children |> Enum.count()} + /> <.sheaf_summary id={"sheaf-tree-node-sheaf-summary-"<> @id} level={@level} @@ -291,7 +296,7 @@ defmodule VyasaWeb.Context.Discuss.SheafTree do sheafs={@children} sheaf_lattice={@sheaf_lattice} sheaf_ui_lattice={@sheaf_ui_lattice} - level={@level + 1} + level={@level} on_replies_click={@on_replies_click} on_set_reply_to={@on_set_reply_to} on_quick_reply={@on_quick_reply} From c37d48d3d32ac5629ed1499c85ca7013887d1be2 Mon Sep 17 00:00:00 2001 From: Ritesh Kumar Date: Mon, 18 Nov 2024 07:47:59 +0800 Subject: [PATCH 4/9] Support sheaf creation in discuss mode minor changes --- lib/vyasa_web/components/contexts/discuss.ex | 89 +++++++++++++++++-- .../components/contexts/discuss/sheaf_tree.ex | 8 +- 2 files changed, 88 insertions(+), 9 deletions(-) diff --git a/lib/vyasa_web/components/contexts/discuss.ex b/lib/vyasa_web/components/contexts/discuss.ex index cf812526..93bd2b95 100644 --- a/lib/vyasa_web/components/contexts/discuss.ex +++ b/lib/vyasa_web/components/contexts/discuss.ex @@ -105,6 +105,21 @@ defmodule VyasaWeb.Context.Discuss do ) end + @doc """ + For a particular sheaf, re-registers it by deleting its old entry in the lattice and inserting the new entry. + This is useful for manipulating the lattices in events such as promoting a sheaf from draft to published. + """ + def reregister_sheaf( + %Socket{} = socket, + %Sheaf{id: old_id} = old_sheaf, + %Sheaf{id: new_id} = new_sheaf + ) + when old_id == new_id do + socket + |> deregister_sheaf(old_sheaf) + |> register_sheaf(new_sheaf) + end + def deregister_sheaf( %Socket{ assigns: %{ @@ -490,7 +505,7 @@ defmodule VyasaWeb.Context.Discuss do • we don’t want to persist the reply_to in the db (by updating the current active draft sheaf). • we won’t do an update query on the draft_sheaf form the - sheaf::quick_reply + sheaf::toggle_quick_reply • we will only change the reply_to_path that is kept in state within the discuss context • the user should expect that since this is a quick reply, this @@ -501,7 +516,7 @@ defmodule VyasaWeb.Context.Discuss do depth, and desires to go and gather marks (e.g. by clicking some kind of “nav to read mode”), then this transient case will change to case 2, permanent. - ^ this event is will be different from the sheaf::quick_reply event though + ^ this event is will be different from the sheaf::toggle_quick_reply event though 2. if “permanent/intentional” • we update both the reply_to_path in the local socket state as @@ -511,7 +526,7 @@ defmodule VyasaWeb.Context.Discuss do 1.1 Conclusions: ──────────────── - 1. `sheaf::quick_reply' will not do any db write to the current draft + 1. `sheaf::toggle_quick_reply' will not do any db write to the current draft sheaf’s parent field. Will only update the local state (for `reply_to_path') 2. `sheaf::publish' will be updated so that regardless of the upstream @@ -520,7 +535,7 @@ defmodule VyasaWeb.Context.Discuss do current draft sheaf no matter what. """ def handle_event( - "sheaf::quick_reply", + "sheaf::toggle_quick_reply", %{ "sheaf_path_labels" => immediate_reply_to_sheaf_labels } = _params, @@ -680,6 +695,70 @@ defmodule VyasaWeb.Context.Discuss do } end + def handle_event( + "sheaf::publish", + %{ + "body" => body, + "is_private" => _is_private + } = _params, + %Socket{ + assigns: %{ + session: %VyasaWeb.Session{ + name: username, + sangh: %Vyasa.Sangh.Session{ + id: sangh_id + } + }, + draft_reflector_path: %Ltree{ + labels: draft_sheaf_lattice_key + }, + reply_to_path: %Ltree{ + labels: reply_to_latice_key + }, + sheaf_lattice: %{} = sheaf_lattice, + sheaf_ui_lattice: %{} = sheaf_ui_lattice + } + } = socket + ) + when is_binary(body) do + reply_to_sheaf = sheaf_lattice[reply_to_latice_key] + draft_sheaf = sheaf_lattice[draft_sheaf_lattice_key] + + payload_precursor = %{ + body: body, + traits: ["published"], + signature: username + } + + update_payload = + case(is_nil(draft_sheaf)) do + true -> + payload_precursor + + false -> + Map.put(payload_precursor, :parent, reply_to_sheaf) + end + + {:ok, updated_sheaf} = Vyasa.Sangh.update_sheaf(draft_sheaf, update_payload) + + %Sheaf{ + path: %Ltree{} = new_draft_reflector_path + } = new_draft_reflector = Sheaf.draft!(sangh_id) + + { + :noreply, + socket + |> assign( + sheaf_ui_lattice: + sheaf_ui_lattice |> SheafLattice.toggle_show_sheaf_modal?(draft_sheaf_lattice_key) + ) + |> reregister_sheaf(draft_sheaf, updated_sheaf) + |> register_sheaf(new_draft_reflector) + |> assign(draft_reflector_path: new_draft_reflector_path) + |> assign(reply_to_path: nil) + } + end + @impl true # TODO @ks0m1c this is an example of what binding/permalinking should handle # we need to do a push-patch direction from this function @@ -867,7 +946,7 @@ defmodule VyasaWeb.Context.Discuss do sheaf_lattice={@sheaf_lattice} sheaf_ui_lattice={@sheaf_ui_lattice} on_replies_click={JS.push("ui::toggle_sheaf_is_expanded?", target: "#content-display")} - on_quick_reply={JS.push("sheaf::quick_reply", target: "#content-display")} + on_quick_reply={JS.push("sheaf::toggle_quick_reply", target: "#content-display")} on_set_reply_to={JS.push("sheaf::set_reply_to_context", target: "#content-display")} /> diff --git a/lib/vyasa_web/components/contexts/discuss/sheaf_tree.ex b/lib/vyasa_web/components/contexts/discuss/sheaf_tree.ex index 1f2810e7..85b342a1 100644 --- a/lib/vyasa_web/components/contexts/discuss/sheaf_tree.ex +++ b/lib/vyasa_web/components/contexts/discuss/sheaf_tree.ex @@ -148,12 +148,12 @@ defmodule VyasaWeb.Context.Discuss.SheafTree do class={["border-l-2 border-gray-200", @container_class]} id={"collapsible-sheaf-container-" <> @id} > - <.debug_dump + <%= if is_nil(@sheafs) or !@sheafs or Enum.empty?(@sheafs) do %>

No child sheafs available.

@@ -256,13 +256,13 @@ defmodule VyasaWeb.Context.Discuss.SheafTree do id={"level" <> to_string(@level) <> "-sheaf-component_container-" <> @id} class="flex flex-col" > - <.debug_dump + <.sheaf_summary id={"sheaf-tree-node-sheaf-summary-"<> @id} level={@level} From 8567a469a9a3b58ab98366861c9c621ef3a30ab4 Mon Sep 17 00:00:00 2001 From: Ritesh Kumar Date: Mon, 18 Nov 2024 19:20:33 +0800 Subject: [PATCH 5/9] Fix UI bug on sheaf creation disabling scrolling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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, │ parent_id: nil, │ parent: #Ecto.Association.NotLoaded, │ 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, │ 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, │ 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, │ chapter_no: nil, │ chapter: #Ecto.Association.NotLoaded, │ source_id: nil, │ source: #Ecto.Association.NotLoaded, │ translation_id: nil, │ translation: #Ecto.Association.NotLoaded, │ sheaf_id: nil, │ sheaf: #Ecto.Association.NotLoaded, │ 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, │ 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, │ chapter_no: nil, │ chapter: #Ecto.Association.NotLoaded, │ source_id: nil, │ source: #Ecto.Association.NotLoaded, │ translation_id: "97a7a662-a91b-486f-93e8-7ae932d01a1a", │ translation: #Ecto.Association.NotLoaded, │ sheaf_id: nil, │ sheaf: #Ecto.Association.NotLoaded, │ 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, │ parent_id: nil, │ parent: #Ecto.Association.NotLoaded, │ 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, │ 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, │ 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, │ chapter_no: nil, │ chapter: #Ecto.Association.NotLoaded, │ source_id: nil, │ source: #Ecto.Association.NotLoaded, │ translation_id: nil, │ translation: #Ecto.Association.NotLoaded, │ sheaf_id: nil, │ sheaf: #Ecto.Association.NotLoaded, │ 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, │ 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, │ chapter_no: nil, │ chapter: #Ecto.Association.NotLoaded, │ source_id: nil, │ source: #Ecto.Association.NotLoaded, │ translation_id: "97a7a662-a91b-486f-93e8-7ae932d01a1a", │ translation: #Ecto.Association.NotLoaded, │ sheaf_id: nil, │ sheaf: #Ecto.Association.NotLoaded, │ 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, │ parent_id: nil, │ parent: #Ecto.Association.NotLoaded, │ 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, │ binding_id: nil, │ binding: #Ecto.Association.NotLoaded, │ 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] > --- lib/vyasa_web/components/contexts/components.ex | 5 +++-- mix.exs | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/vyasa_web/components/contexts/components.ex b/lib/vyasa_web/components/contexts/components.ex index 79ed0277..12e2906a 100644 --- a/lib/vyasa_web/components/contexts/components.ex +++ b/lib/vyasa_web/components/contexts/components.ex @@ -4,6 +4,7 @@ defmodule VyasaWeb.Context.Components do """ use VyasaWeb, :html alias Vyasa.Sangh.{Sheaf} + alias VyasaWeb.CoreComponents alias VyasaWeb.Context.Components.UiState.Mark, as: MarkUiState alias VyasaWeb.Context.Components.UiState.Sheaf, as: SheafUiState @@ -323,7 +324,7 @@ defmodule VyasaWeb.Context.Components do
<.form for={%{}} - phx-submit={JS.push("sheaf::publish")} + phx-submit={CoreComponents.hide_modal(JS.push("sheaf::publish"), @id)} phx-target={@event_target} class="flex items-center" > @@ -377,7 +378,7 @@ defmodule VyasaWeb.Context.Components do