1 files changed, 50 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/mixins/graph_width_mixin.js b/app/assets/javascripts/pipelines/mixins/graph_width_mixin.js
new file mode 100644
index 00000000000..2dbaa5a5c9a
--- /dev/null
+++ b/app/assets/javascripts/pipelines/mixins/graph_width_mixin.js
@@ -0,0 +1,50 @@
+import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
+import { LAYOUT_CHANGE_DELAY } from '~/pipelines/constants';
+
+export default {
+  debouncedResize: null,
+  sidebarMutationObserver: null,
+  data() {
+    return {
+      graphLeftPadding: 0,
+      graphRightPadding: 0,
+    };
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.$options.debouncedResize);
+
+    if (this.$options.sidebarMutationObserver) {
+      this.$options.sidebarMutationObserver.disconnect();
+    }
+  },
+  created() {
+    this.$options.debouncedResize = debounceByAnimationFrame(this.setGraphPadding);
+    window.addEventListener('resize', this.$options.debouncedResize);
+  },
+  mounted() {
+    this.setGraphPadding();
+
+    this.$options.sidebarMutationObserver = new MutationObserver(this.handleLayoutChange);
+    this.$options.sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
+      attributes: true,
+      childList: false,
+      subtree: false,
+    });
+  },
+  methods: {
+    setGraphPadding() {
+      // only add padding to main graph (not inline upstream/downstream graphs)
+      if (this.type && this.type !== 'main') return;
+
+      const container = document.querySelector('.js-pipeline-container');
+      if (!container) return;
+
+      this.graphLeftPadding = container.offsetLeft;
+      this.graphRightPadding = window.innerWidth - container.offsetLeft - container.offsetWidth;
+    },
+    handleLayoutChange() {
+      // wait until animations finish, then recalculate padding
+      window.setTimeout(this.setGraphPadding, LAYOUT_CHANGE_DELAY);
+    },
+  },
+};