Fix git graph page (#34948)

fix #34946
2025-07-21 01:21:18 +02:00 · 2025-07-04 23:41:19 +08:00
parent 41678e1a57
commit 70685a9489
10 changed files with 90 additions and 210 deletions
--- a/web_src/css/features/gitgraph.css
+++ b/web_src/css/features/gitgraph.css
@@ -10,14 +10,6 @@
  align-items: center;
 }

-#git-graph-container .color-buttons {
-  margin-right: 0;
-}
-
-#git-graph-container .ui.header.dividing {
-  padding-bottom: 10px;
-}
-
 #git-graph-container #flow-select-refs-dropdown {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
@@ -31,25 +23,6 @@
  align-items: center;
 }

-#git-graph-container #flow-select-refs-dropdown .ui.label .truncate {
-  display: inline-block;
-  max-width: 140px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: top;
-  white-space: nowrap;
-}
-
-#git-graph-container #flow-select-refs-dropdown .default.text {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-#git-graph-container #flow-select-refs-dropdown input.search {
-  position: relative;
-  top: 1px;
-}
-
 #git-graph-container li {
  list-style-type: none;
  height: 24px;
@@ -57,16 +30,20 @@
  white-space: nowrap;
  display: flex;
  align-items: center;
-  gap: 0.25em;
+  gap: 0.5em;
+}
+
+#git-graph-container li > span {
+  flex-shrink: 0;
+}
+
+#git-graph-container li > span.message {
+  flex-shrink: 1;
 }

 #git-graph-container li .ui.label.commit-id-short {
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
-#git-graph-container li .node-relation {
-  font-family: var(--fonts-monospace);
+  padding: 2px 4px;
+  height: 20px;
 }

 #git-graph-container li .author {
@@ -78,17 +55,6 @@
  font-size: 80%;
 }

-#git-graph-container li a:not(.ui):hover {
-  text-decoration: underline;
-}
-
-#git-graph-container li a em {
-  color: var(--color-red);
-  border-bottom: 1px dotted var(--color-secondary);
-  text-decoration: none;
-  font-style: normal;
-}
-
 #git-graph-container #rel-container {
  max-width: 30%;
  overflow-x: auto;
@@ -105,34 +71,23 @@
  width: 100%;
 }

-#git-graph-container #rev-list li.highlight.hover {
-  background-color: var(--color-secondary-alpha-30);
-}
-
-#git-graph-container #rev-list .commit-refs .button {
+#git-graph-container li .commit-refs .ui.button,
+#git-graph-container li .commit-refs .ui.label.tag-label {
  padding: 2px 4px;
  margin-right: 0.25em;
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
+  line-height: var(--line-height-default);
  min-height: 0;
 }

-#git-graph-container #graph-raw-list {
-  margin: 0;
-}
-
 #git-graph-container.monochrome #rel-container .flow-group {
  stroke: var(--color-secondary-dark-5);
  fill: var(--color-secondary-dark-5);
 }

-#git-graph-container.monochrome #rel-container .flow-group.highlight {
-  stroke: var(--color-secondary-dark-12);
-  fill: var(--color-secondary-dark-12);
-}
-
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 {
  stroke: #499a37;
  fill: #499a37;
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -4,6 +4,7 @@
 .ui.label {
  display: inline-flex;
  align-items: center;
+  vertical-align: middle;
  gap: var(--gap-inline);
  min-width: 0;
  max-width: 100%;
@@ -88,10 +89,6 @@ a.ui.label:hover {
  color: var(--color-label-text);
 }

-.ui.label.visible:not(.dropdown) {
-  display: inline-block !important;
-}
-
 .ui.basic.label {
  background: var(--color-button);
  border: 1px solid var(--color-light-border);
--- a/web_src/js/features/repo-graph.ts
+++ b/web_src/js/features/repo-graph.ts
@@ -1,4 +1,4 @@
-import {hideElem, showElem, type DOMEvent} from '../utils/dom.ts';
+import {toggleClass} from '../utils/dom.ts';
 import {GET} from '../modules/fetch.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';

@@ -6,87 +6,59 @@ export function initRepoGraphGit() {
  const graphContainer = document.querySelector<HTMLElement>('#git-graph-container');
  if (!graphContainer) return;

-  document.querySelector('#flow-color-monochrome')?.addEventListener('click', () => {
-    document.querySelector('#flow-color-monochrome').classList.add('active');
-    document.querySelector('#flow-color-colored')?.classList.remove('active');
-    graphContainer.classList.remove('colored');
-    graphContainer.classList.add('monochrome');
-    const params = new URLSearchParams(window.location.search);
-    params.set('mode', 'monochrome');
-    const queryString = params.toString();
-    if (queryString) {
-      window.history.replaceState({}, '', `?${queryString}`);
-    } else {
-      window.history.replaceState({}, '', window.location.pathname);
-    }
-    for (const link of document.querySelectorAll('.pagination a')) {
-      const href = link.getAttribute('href');
-      if (!href) continue;
-      const url = new URL(href, window.location.href);
-      const params = url.searchParams;
-      params.set('mode', 'monochrome');
-      url.search = `?${params.toString()}`;
-      link.setAttribute('href', url.href);
-    }
-  });
+  const elColorMonochrome = document.querySelector<HTMLElement>('#flow-color-monochrome');
+  const elColorColored = document.querySelector<HTMLElement>('#flow-color-colored');
+  const toggleColorMode = (mode: 'monochrome' | 'colored') => {
+    toggleClass(graphContainer, 'monochrome', mode === 'monochrome');
+    toggleClass(graphContainer, 'colored', mode === 'colored');

-  document.querySelector('#flow-color-colored')?.addEventListener('click', () => {
-    document.querySelector('#flow-color-colored').classList.add('active');
-    document.querySelector('#flow-color-monochrome')?.classList.remove('active');
-    graphContainer.classList.add('colored');
-    graphContainer.classList.remove('monochrome');
-    for (const link of document.querySelectorAll('.pagination a')) {
+    toggleClass(elColorMonochrome, 'active', mode === 'monochrome');
+    toggleClass(elColorColored, 'active', mode === 'colored');
+
+    const params = new URLSearchParams(window.location.search);
+    params.set('mode', mode);
+    window.history.replaceState(null, '', `?${params.toString()}`);
+    for (const link of document.querySelectorAll('#pagination .pagination a')) {
      const href = link.getAttribute('href');
      if (!href) continue;
      const url = new URL(href, window.location.href);
      const params = url.searchParams;
-      params.delete('mode');
+      params.set('mode', mode);
      url.search = `?${params.toString()}`;
      link.setAttribute('href', url.href);
    }
-    const params = new URLSearchParams(window.location.search);
-    params.delete('mode');
-    const queryString = params.toString();
-    if (queryString) {
-      window.history.replaceState({}, '', `?${queryString}`);
-    } else {
-      window.history.replaceState({}, '', window.location.pathname);
-    }
-  });
+  };
+  elColorMonochrome.addEventListener('click', () => toggleColorMode('monochrome'));
+  elColorColored.addEventListener('click', () => toggleColorMode('colored'));
+
+  const elGraphBody = document.querySelector<HTMLElement>('#git-graph-body');
  const url = new URL(window.location.href);
  const params = url.searchParams;
-  const updateGraph = () => {
+  const loadGitGraph = async () => {
    const queryString = params.toString();
    const ajaxUrl = new URL(url);
    ajaxUrl.searchParams.set('div-only', 'true');
-    window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname);
-    document.querySelector('#pagination').innerHTML = '';
-    hideElem('#rel-container');
-    hideElem('#rev-container');
-    showElem('#loading-indicator');
-    (async () => {
-      const response = await GET(String(ajaxUrl));
-      const html = await response.text();
-      const div = document.createElement('div');
-      div.innerHTML = html;
-      document.querySelector('#pagination').innerHTML = div.querySelector('#pagination').innerHTML;
-      document.querySelector('#rel-container').innerHTML = div.querySelector('#rel-container').innerHTML;
-      document.querySelector('#rev-container').innerHTML = div.querySelector('#rev-container').innerHTML;
-      hideElem('#loading-indicator');
-      showElem('#rel-container');
-      showElem('#rev-container');
-    })();
+    window.history.replaceState(null, '', queryString ? `?${queryString}` : window.location.pathname);
+
+    elGraphBody.classList.add('is-loading');
+    try {
+      const resp = await GET(ajaxUrl.toString());
+      elGraphBody.innerHTML = await resp.text();
+    } finally {
+      elGraphBody.classList.remove('is-loading');
+    }
  };
+
  const dropdownSelected = params.getAll('branch');
  if (params.has('hide-pr-refs') && params.get('hide-pr-refs') === 'true') {
    dropdownSelected.splice(0, 0, '...flow-hide-pr-refs');
  }

-  const flowSelectRefsDropdown = document.querySelector('#flow-select-refs-dropdown');
-  const $dropdown = fomanticQuery(flowSelectRefsDropdown);
-  $dropdown.dropdown({
-    clearable: true,
-    fullTextSeach: 'exact',
+  const $dropdown = fomanticQuery('#flow-select-refs-dropdown');
+  $dropdown.dropdown({clearable: true});
+  $dropdown.dropdown('set selected', dropdownSelected);
+  // must add the callback after setting the selected items, otherwise each "selected" item will trigger the callback
+  $dropdown.dropdown('setting', {
    onRemove(toRemove: string) {
      if (toRemove === '...flow-hide-pr-refs') {
        params.delete('hide-pr-refs');
@@ -99,7 +71,7 @@ export function initRepoGraphGit() {
          }
        }
      }
-      updateGraph();
+      loadGitGraph();
    },
    onAdd(toAdd: string) {
      if (toAdd === '...flow-hide-pr-refs') {
@@ -107,50 +79,7 @@ export function initRepoGraphGit() {
      } else {
        params.append('branch', toAdd);
      }
-      updateGraph();
+      loadGitGraph();
    },
  });
-  $dropdown.dropdown('set selected', dropdownSelected);
-
-  graphContainer.addEventListener('mouseenter', (e: DOMEvent<MouseEvent>) => {
-    if (e.target.matches('#rev-list li')) {
-      const flow = e.target.getAttribute('data-flow');
-      if (flow === '0') return;
-      document.querySelector(`#flow-${flow}`)?.classList.add('highlight');
-      e.target.classList.add('hover');
-      for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
-        item.classList.add('highlight');
-      }
-    } else if (e.target.matches('#rel-container .flow-group')) {
-      e.target.classList.add('highlight');
-      const flow = e.target.getAttribute('data-flow');
-      for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
-        item.classList.add('highlight');
-      }
-    } else if (e.target.matches('#rel-container .flow-commit')) {
-      const rev = e.target.getAttribute('data-rev');
-      document.querySelector(`#rev-list li#commit-${rev}`)?.classList.add('hover');
-    }
-  });
-
-  graphContainer.addEventListener('mouseleave', (e: DOMEvent<MouseEvent>) => {
-    if (e.target.matches('#rev-list li')) {
-      const flow = e.target.getAttribute('data-flow');
-      if (flow === '0') return;
-      document.querySelector(`#flow-${flow}`)?.classList.remove('highlight');
-      e.target.classList.remove('hover');
-      for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
-        item.classList.remove('highlight');
-      }
-    } else if (e.target.matches('#rel-container .flow-group')) {
-      e.target.classList.remove('highlight');
-      const flow = e.target.getAttribute('data-flow');
-      for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
-        item.classList.remove('highlight');
-      }
-    } else if (e.target.matches('#rel-container .flow-commit')) {
-      const rev = e.target.getAttribute('data-rev');
-      document.querySelector(`#rev-list li#commit-${rev}`)?.classList.remove('hover');
-    }
-  });
 }