Skip to content

Expand Pipeline Viewport #1380

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+53 −5
Open

Expand Pipeline Viewport #1380

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e3d06f4
Expand Pipeline Viewport
vaibhavK1199 Mar 28, 2025
164630a
Updated Commit
vaibhavK1199 Mar 28, 2025
38a4387
Updated JS
vaibhavK1199 Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 53 additions & 5 deletions templates/pipelines/pipeline_builder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
{% load static %}
{% block page_head %}
<link rel="stylesheet" href="{% static 'css/pipeline.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
Copy link
Contributor

@SmittieC SmittieC Apr 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

No need to include this here. We have alpineJS included through the webpack bundler (See here) and we already have font awesome loaded here

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
<style>
.react-flow__handle {
width: 16px;
Expand All @@ -18,25 +20,71 @@
top: 50%;
transform: translate(0, -50%);
}
.fullscreen-toggle {
transition: background-color 0.2s ease;
position: absolute;
top: 8px;
right: 8px;
padding: 8px;
background-color: #e5e7eb;
border-radius: 4px;
z-index: 10;
}
.fullscreen-toggle:hover {
background-color: #d1d5db;
}
:fullscreen #pipelines-container {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #1a202c;
}
:fullscreen #pipelineBuilder {
width: 100%;
height: 100%;
}
</style>
{% endblock page_head %}
{% block breadcrumbs %}
{% endblock %}
{% block app %}
<div class="max-w-7xl mx-auto" id="pipelineBuilder">
<div class="flex-1 relative" id="pipelines-container" x-data="{ isFullscreen: false }" x-init="
$watch('isFullscreen', (value) => {
if (value) {
$el.requestFullscreen().catch(err => console.error('Fullscreen failed:', err));
if (sidebar) sidebar.classList.add('hidden');
Copy link
Contributor

@SmittieC SmittieC Apr 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

The sidebar can be referenced using x-ref. For instance, you can put x-ref=sidebar on the sidebar element here. That said, in alpine there's an easy way to show/hide an element based on some value in data, and that is to use x-show=!isFullscreen (see the x-show docs).

In order to do this, you will have to put the data directive with the isFullscreen value on a level that contains both the sidebar and app elements. I think an alpine store might come in more handy here, since the store allows components on different parts of the page to communicate with each other without having to share a data directive. We can initialize the store in this file by including something like

    <script>
      document.addEventListener('alpine:init', () => {
          Alpine.store('fullscreen', {
              on: false,
              toggle() {
                  this.on = ! this.on
              }
          })
      })
    </script>

in the script. Note that this will only make the store available on pipeline pages, so if we reference it elsewhere we'd have to check its availability first. Anyhoo, after this, you can easily create bindings by simply referencing the store's value. For example, to show/hide the sidebar, add the following attributes on the sidebar element:

x-data x-show="!$store.fullscreen || ($store.fullscreen && !$store.fullscreen.on)"

(It's important to keep the x-data attirubte to indicate to alpineJS that this element wants to use Alpine).

P.S. If we don't want to check the store's availability first, we can always included the store code in the header in this file

} else {
document.exitFullscreen().catch(err => console.error('Exit fullscreen failed:', err));
if (sidebar) sidebar.classList.remove('hidden');
}
})
">
<button
class="fullscreen-toggle"
title="Toggle Full Screen"
@click="isFullscreen = !isFullscreen"
x-on:fullscreenchange="isFullscreen = !!document.fullscreenElement"
>
<i :class="isFullscreen ? 'fas fa-compress' : 'fas fa-expand'" class="w-5 h-5"></i>
</button>
<div class="max-w-7xl mx-auto" id="pipelineBuilder"></div>
</div>
<aside class="w-64 hidden" x-ref="sidebar">Sidebar content here</aside>
Copy link
Contributor

Choose a reason for hiding this comment

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

What is this side bar?

{% endblock %}
{% block page_js %}
{{ parameter_values|json_script:"parameter-values" }}
{{ default_values|json_script:"default-values" }}
{{ node_schemas|json_script:"node-schemas" }}
{{ flags_enabled|json_script:"flags-enabled" }}
Copy link
Contributor

Choose a reason for hiding this comment

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

This was probably removed by accident?

<script src="{% static 'js/pipeline-bundle.js' %}"></script>
<script type="module">
window.DOCUMENTATION_BASE_URL = '{{ docs_base_url }}';
document.addEventListener('DOMContentLoaded', () => {
SiteJS.pipeline.renderPipeline("#pipelineBuilder", "{{ request.team.slug }}", {{ pipeline_id }});
}
)
document.addEventListener('fullscreenchange', () => {
SiteJS.pipeline.renderPipeline("#pipelineBuilder", "{{ request.team.slug }}", {{ pipeline_id }});
});
});
</script>
{% endblock %}
{% endblock %}