May 13, 2024 · Apr 24, 2024 · Apr 25, 2024 · Apr 25, 2024 · Apr 25, 2024 · Apr 26, 2024
diff --git a/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js b/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js
 import { Controller } from "@hotwired/stimulus";

 export default class extends Controller {
  static targets = [
    "link",
  ];

  // When page reloads we need to set the left nav to the current window
  // location since left nave is turbo permanent. Trigger this on event
  // rather than on connect since on connect() will fire prior to backend
  // redirects.
  connect() {
    this.callback = () => {
      this.setLeftNavToLocation();
    }

    document.addEventListener("turbo:load", this.callback);
  }

  setLeftNavToLocation() {
    this.removeAllActive();

    let tag = "a[href='" + window.location.pathname + "']";
    console.log("tag: " + tag)
    let elements = this.element.querySelectorAll(tag);

    if (elements.length > 0) {
      console.log("found element " + elements[0].href)
      elements[0].classList.add("active");
    }
  }

  // Helper function to quickly remove all state styling
  removeAllActive() {
    for (let i = 0; i < this.linkTargets.length; i++) {
      this.linkTargets[i].classList.remove("active");
    }
  }

  disconnect() {
    document.removeEventListener("turbo:load", this.callback);
  }
 }
diff --git a/pgml-dashboard/src/components/left_nav_menu/template.html b/pgml-dashboard/src/components/left_nav_menu/template.html
        <% if !link.hide_for_lg_screens { %>
        <li class="menu-item leftnav-collapse-affect expanded <% if link.disabled { %>disabled<% } %>" >
            <a
            data-left-nav-menu-target="<%-link.name.to_lowercase() %>"
            data-left-nav-menu-target="link"
            class="d-flex align-items-center justify-content-start gap-2 <% if link.disabled  { %> disabled <% } %> <% if link.active { %> active <% } %>"
            href="<%= link.href %>"
            >
diff --git a/pgml-dashboard/src/components/navigation/left_nav/docs/template.html b/pgml-dashboard/src/components/navigation/left_nav/docs/template.html
  <nav class="navbar px-0">
    <div class="card nav guides rounded-0 w-100">
      <div class="card-body py-2 py-xl-4">
        <a class="my-1 d-flex justify-content-between align-items-center text-white" role="button" data-bs-toggle="collapse" href="#guides" aria-expanded="false" aria-congrols="guides">
        <a class="my-1 d-flex justify-content-between align-items-center text-white" role="button" data-bs-toggle="collapse" href="#guides" aria-expanded="false" aria-controls="guides">
          <span>Docs</span><span class="material-symbols-outlined rotate-on-aria-expanded">expand_more</span>
        </a>
        <div class="collapse border-top pt-2" id="guides">
diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/mod.rs b/pgml-dashboard/src/components/navigation/left_nav/web_app/mod.rs
    pub upper_nav: StaticNav,
    pub lower_nav: StaticNav,
    pub dropdown_nav: StaticNav,
    pub id: Option<String>,
 }

 impl WebApp {
            upper_nav,
            lower_nav,
            dropdown_nav,
            id: None
        }
    }

    pub fn id(mut self, id: &str) -> WebApp {
        self.id = Some(id.to_string());
        self
    }
 }

 component!(WebApp);
diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html b/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html

 <% use crate::components::{LeftNavMenu, Dropdown}; %>
 <div class="leftnav-container py-3 font-family-primary" data-controller="navigation-left-nav-web-app">
 <div class="leftnav-container py-3 font-family-primary" data-controller="navigation-left-nav-web-app" data-turbo-permanent id='<%- id.unwrap_or_else(|| String::from("defaultId"))%>'>
  <nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
    <div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect expanded">
      <div class="d-flex flex-column">
diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app_controller.js b/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app_controller.js
 import { Controller } from "@hotwired/stimulus";

 export default class extends Controller {
  static targets = [];

  connect() {}

 }
diff --git a/pgml-dashboard/src/components/static_nav/mod.rs b/pgml-dashboard/src/components/static_nav/mod.rs
 use crate::components::StaticNavLink;
 use std::hash::{DefaultHasher, Hash, Hasher};

 #[derive(Debug, Clone, Default)]
 pub struct StaticNav {
            None => StaticNavLink::default(),
        }
    }

    pub fn unique_id(&self) -> String {
        let mut id = String::new();
        for link in &self.links {
            id.push_str(&link.name);
            id.push_str(&link.disabled.to_string());
            id.push_str(&link.href);
        }

        let mut s = DefaultHasher::new();
        id.hash(&mut s);
        format!("nav{}", s.finish().to_string())
    }
 }
diff --git a/pgml-dashboard/static/css/scss/components/_navs.scss b/pgml-dashboard/static/css/scss/components/_navs.scss
        }
    }

    &:active, &:focus, &:target, .active {
    &:active:not(.disabled), &:focus:not(.disabled), &:target:not(.disabled), .active:not(.disabled) {
        background-color: #{$neon-tint-100};
        color: #{$gray-100};
        border-radius: calc($border-radius / 2);
diff --git a/pgml-dashboard/static/js/extend-bs-collapse.js b/pgml-dashboard/static/js/extend-bs-collapse.js
 // extends bootstraps collapse component by adding collapse state class to any
 // html element you like.  This is useful for adding style changes to elements
 // that do not need to collapse, when a collapse state changeoccures.
 // that do not need to collapse, when a collapse state changeoccurs.
 import {
    Controller
 } from '@hotwired/stimulus'
        this.navStates = ['collapsing', 'collapsed', 'expanding', 'expanded']
        this.events = ['hide.bs.collapse', 'hidden.bs.collapse', 'show.bs.collapse', 'shown.bs.collapse']

        this.callback = () =>  {
            this.getAllAffected().forEach(item => this.toggle(item))
        }

        this.events.forEach(event => {
            this.stateReferenceTarget.addEventListener(event, () => {
                this.getAllAffected().forEach(item => this.toggle(item))
            })
            this.stateReferenceTarget.addEventListener(event, this.callback)
        })
    }

        item.classList.add(eClass)
    }

    disconnect() {
        this.events.forEach(event => {
            this.stateReferenceTarget.removeEventListener(event, this.callback)
        })
    }
 }
diff --git a/pgml-dashboard/templates/layout/web_app_base.html b/pgml-dashboard/templates/layout/web_app_base.html
                    <%+ WebAppNavbar::new(left_nav_links, account_management_nav) %>

                    <div class="d-flex">
                        <%+ WebAppLeftNav::new( upper_left_nav, lower_left_nav, dropdown_nav ) %>
                        <%+ WebAppLeftNav::new( upper_left_nav.clone(), lower_left_nav, dropdown_nav).id(&upper_left_nav.unique_id()) %>

                        <div class="clear-from-under-navbar flex-grow-1 min-vw-0">
                            <div class="px-4 px-sm-5 py-3" style="position: absolute">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,43 @@
		import { Controller } from "@hotwired/stimulus";

		export default class extends Controller {
		static targets = [
		"link",
		];

		// When page reloads we need to set the left nav to the current window
		// location since left nave is turbo permanent. Trigger this on event
		// rather than on connect since on connect() will fire prior to backend
		// redirects.
		connect() {
		this.callback = () => {
		this.setLeftNavToLocation();
		}

		document.addEventListener("turbo:load", this.callback);
		}

		setLeftNavToLocation() {
		this.removeAllActive();

		let tag = "a[href='" + window.location.pathname + "']";
		console.log("tag: " + tag)
		let elements = this.element.querySelectorAll(tag);

		if (elements.length > 0) {
		console.log("found element " + elements[0].href)
		elements[0].classList.add("active");
		}
		}

		// Helper function to quickly remove all state styling
		removeAllActive() {
		for (let i = 0; i < this.linkTargets.length; i++) {
		this.linkTargets[i].classList.remove("active");
		}
		}

		disconnect() {
		document.removeEventListener("turbo:load", this.callback);
		}
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,7 +4,7 @@
		<% if !link.hide_for_lg_screens { %>
		<li class="menu-item leftnav-collapse-affect expanded <% if link.disabled { %>disabled<% } %>" >
		<a
		data-left-nav-menu-target="<%-link.name.to_lowercase() %>"
		data-left-nav-menu-target="link"
		class="d-flex align-items-center justify-content-start gap-2 <% if link.disabled { %> disabled <% } %> <% if link.active { %> active <% } %>"
		href="<%= link.href %>"
		>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -52,7 +52,7 @@
		<nav class="navbar px-0">
		<div class="card nav guides rounded-0 w-100">
		<div class="card-body py-2 py-xl-4">
		<a class="my-1 d-flex justify-content-between align-items-center text-white" role="button" data-bs-toggle="collapse" href="#guides" aria-expanded="false" aria-congrols="guides">
		<a class="my-1 d-flex justify-content-between align-items-center text-white" role="button" data-bs-toggle="collapse" href="#guides" aria-expanded="false" aria-controls="guides">
		<span>Docs</span><span class="material-symbols-outlined rotate-on-aria-expanded">expand_more</span>
		</a>
		<div class="collapse border-top pt-2" id="guides">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,6 +8,7 @@ pub struct WebApp {
		pub upper_nav: StaticNav,
		pub lower_nav: StaticNav,
		pub dropdown_nav: StaticNav,
		pub id: Option<String>,
		}

		impl WebApp {
Expand All		@@ -16,8 +17,14 @@ impl WebApp {
		upper_nav,
		lower_nav,
		dropdown_nav,
		id: None
		}
		}

		pub fn id(mut self, id: &str) -> WebApp {
		self.id = Some(id.to_string());
		self
		}
		}

		component!(WebApp);
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@

		<% use crate::components::{LeftNavMenu, Dropdown}; %>
		<div class="leftnav-container py-3 font-family-primary" data-controller="navigation-left-nav-web-app">
		<div class="leftnav-container py-3 font-family-primary" data-controller="navigation-left-nav-web-app" data-turbo-permanent id='<%- id.unwrap_or_else(\|\| String::from("defaultId"))%>'>
		<nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
		<div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect expanded">
		<div class="d-flex flex-column">
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,8 @@
		import { Controller } from "@hotwired/stimulus";

		export default class extends Controller {
		static targets = [];

		connect() {}

		}
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,5 @@
		use crate::components::StaticNavLink;
		use std::hash::{DefaultHasher, Hash, Hasher};

		#[derive(Debug, Clone, Default)]
		pub struct StaticNav {
Expand All		@@ -16,4 +17,17 @@ impl StaticNav {
		None => StaticNavLink::default(),
		}
		}

		pub fn unique_id(&self) -> String {
		let mut id = String::new();
		for link in &self.links {
		id.push_str(&link.name);
		id.push_str(&link.disabled.to_string());
		id.push_str(&link.href);
		}

		let mut s = DefaultHasher::new();
		id.hash(&mut s);
		format!("nav{}", s.finish().to_string())
		}
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -184,7 +184,7 @@
		}
		}

		&:active, &:focus, &:target, .active {
		&:active:not(.disabled), &:focus:not(.disabled), &:target:not(.disabled), .active:not(.disabled) {
		background-color: #{$neon-tint-100};
		color: #{$gray-100};
		border-radius: calc($border-radius / 2);
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		// extends bootstraps collapse component by adding collapse state class to any
		// html element you like. This is useful for adding style changes to elements
		// that do not need to collapse, when a collapse state changeoccures.
		// that do not need to collapse, when a collapse state changeoccurs.
		import {
		Controller
		} from '@hotwired/stimulus'
Expand All		@@ -19,10 +19,12 @@ export default class extends Controller {
		this.navStates = ['collapsing', 'collapsed', 'expanding', 'expanded']
		this.events = ['hide.bs.collapse', 'hidden.bs.collapse', 'show.bs.collapse', 'shown.bs.collapse']

		this.callback = () => {
		this.getAllAffected().forEach(item => this.toggle(item))
		}

		this.events.forEach(event => {
		this.stateReferenceTarget.addEventListener(event, () => {
		this.getAllAffected().forEach(item => this.toggle(item))
		})
		this.stateReferenceTarget.addEventListener(event, this.callback)
		})
		}

Expand All		@@ -44,4 +46,9 @@ export default class extends Controller {
		item.classList.add(eClass)
		}

		disconnect() {
		this.events.forEach(event => {
		this.stateReferenceTarget.removeEventListener(event, this.callback)
		})
		}
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -27,7 +27,7 @@
		<%+ WebAppNavbar::new(left_nav_links, account_management_nav) %>

		<div class="d-flex">
		<%+ WebAppLeftNav::new( upper_left_nav, lower_left_nav, dropdown_nav ) %>
		<%+ WebAppLeftNav::new( upper_left_nav.clone(), lower_left_nav, dropdown_nav).id(&upper_left_nav.unique_id()) %>

		<div class="clear-from-under-navbar flex-grow-1 min-vw-0">
		<div class="px-4 px-sm-5 py-3" style="position: absolute">
Expand Down