@usssa/component-library 1.0.0-beta.9 → 1.0.0-rc.1

package/src/components/core/UBracket.vue

@@ -5,7 +5,7 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { UBtnIcon, UBtnStd, UChip, UMenuItem, USheet } from '../../components'
 import { useScreenType } from '../../composables/useScreenType'
 
-const emit = defineEmits(['open-expand'])
+const emit = defineEmits(['open-expand', 'schedule-click'])
 
 defineOptions({
   name: 'UBracket',
@@ -52,10 +52,15 @@ const props = defineProps({
   teamSheetApplyLabel: { type: String, default: 'Select Team' },
   teamSheetCancelLabel: { type: String, default: 'Cancel' },
   teamSheetHeading: { type: String, default: 'Select Team' },
+  venueSheetHeading: { type: String, default: 'Venue Detail' },
   vGap: {
     type: Number,
     default: 50,
   },
+  viewMatchupDetailText: {
+    type: String,
+    default: 'View Matchup Details',
+  },
   zoomInTooltip: {
     type: String,
     default: 'Zoom In',
@@ -73,6 +78,7 @@ const bracketSides = [
 ]
 const nodeHeight = 40
 const nodeWidth = 240
+
 const self = 'bottom middle'
 const svgWidth = 1400
 
@@ -80,6 +86,12 @@ const activeRound = ref({ roundNo: 1, columnNo: 3 })
 const bracketSheet = ref([])
 const currentTransform = ref(d3.zoomIdentity)
 const gRef = ref(null)
+const layoutCache = ref({
+  contentWidth: 0,
+  contentHeight: 0,
+  maxRow: 0,
+  numColumns: 0,
+})
 const nodeGridPositions = ref({})
 const openMenu = ref(false)
 const openRoundMenu = ref(false)
@@ -92,6 +104,7 @@ const tempSelectedTeamId = ref('')
 const teamSheet = ref([])
 const tooltipState = ref({ visible: false, x: 0, y: 0, text: '' })
 const zoomRef = ref(null)
+const locationSheet = ref([])
 
 const selectedTeamName = computed({
   get() {
@@ -109,67 +122,62 @@ const isTeamSelected = computed(() => selectedTeamName.value.length > 0)
 
 // Flatten for rendering logic
 const games = computed(() =>
-  props.bracketData.round.flatMap((r, i) =>
+  normalizedBracketData.value.round.flatMap((r, i) =>
     r.game.map((m) => ({ ...m, round: r.roundNo }))
   )
 )
 
+// Use normalized bracket data for all rendering and layout logic
+const normalizedBracketData = computed(() =>
+  normalizeBracketData(props.bracketData)
+)
+
 const roundLabelStyles = computed(() => {
   const t = currentTransform.value || d3.zoomIdentity
-
-  // 1. Group rounds by column number to handle multiple rounds in the same visual column
-  const roundsByColumn = props.bracketData.round.reduce((acc, round) => {
-    const col = round.columnNo
-    if (!acc[col]) {
-      acc[col] = []
-    }
-    acc[col].push(round)
-    return acc
-  }, {})
-
-  // 2. Get sorted column numbers
-  const sortedColumns = Object.keys(roundsByColumn).sort((a, b) => a - b)
-
+  // Group rounds by normalized column number
+  const roundsByColumn = normalizedBracketData.value.round.reduce(
+    (acc, round) => {
+      const col = Number(round.columnNo)
+      if (!acc[col]) {
+        acc[col] = []
+      }
+      acc[col].push(round)
+      return acc
+    },
+    {}
+  )
+  // Get sorted normalized column numbers
+  const sortedColumns = Object.keys(roundsByColumn)
+    .map(Number)
+    .sort((a, b) => a - b)
   const styles = []
-
-  // 3. Generate styles for each round
-  props.bracketData.round.forEach((round) => {
-    const col = round.columnNo
-    const columnIndex = sortedColumns.indexOf(col.toString())
+  // Generate styles for each round using normalized column
+  normalizedBracketData.value.round.forEach((round, idx) => {
+    const col = Number(round.columnNo)
+    const columnIndex = sortedColumns.indexOf(col)
     const isLastColumn = columnIndex === sortedColumns.length - 1
-
     // The base X position is the same for all rounds in the same column
     const baseX = (col - 1) * props.hGap
-
-    // The width of the label container should be the horizontal gap
     const baseWidth = props.hGap
-
     // Apply zoom and pan transformations
     const left = t.applyX(baseX)
     const width = baseWidth * t.k
-
     const style = {
       left: left + 'px',
       width: width + 'px',
     }
-
-    // Add a border to all but the last column
     if (!isLastColumn) {
       style.borderRight = '1px solid #B9E0FF'
     }
-
-    // Find the original index to push the style in the correct order for the template v-for
-    const originalIndex = props.bracketData.round.findIndex((r) => r === round)
-    styles[originalIndex] = style
+    styles[idx] = style
   })
-
   return styles
 })
 
-// Compute teams for toolbar selection from bracket data (selectionType: 'Seed')
+// Compute teams for toolbar selection from normalized bracket data (selectionType: 'Seed')
 const toolbarTeams = computed(() => {
   const seedTeams = []
-  props.bracketData.round.forEach((round) => {
+  normalizedBracketData.value.round.forEach((round) => {
     if (Array.isArray(round.game)) {
       round.game.forEach((game) => {
         if (Array.isArray(game.team)) {
@@ -200,7 +208,7 @@ const applyBracketSheetSelection = () => {
 
 const applyRoundSheetSelection = () => {
   const selectedRound = props.bracketData.round.find(
-    (r) => `${r.roundNo}-${r.columnNo}` === tempSelectedRoundId.value
+    (r) => `${r.roundNo}-${r.roundName}` === tempSelectedRoundId.value
   )
   if (selectedRound) scrollToRound(selectedRound)
   roundSheet.value = []
@@ -209,6 +217,7 @@ const applyRoundSheetSelection = () => {
 const applyTeamSheetSelection = () => {
   selectedTeamId.value = tempSelectedTeamId.value
   teamSheet.value = []
+  resetZoom()
   renderBracket()
 }
 
@@ -225,13 +234,12 @@ const cancelTeamSheetSelection = () => {
   tempSelectedTeamId.value = selectedTeamId.value
 }
 
-// Compute all node positions using a row/column approach
+// Compute all node positions and cache layout values
 const computeBracketLayout = () => {
   const newPositions = {}
 
   // Scan through all games to find every node with an explicit position
   games.value.forEach((game) => {
-    // 1. Position the source teams for the game
     game.team.forEach((team) => {
       if (typeof team === 'object' && team.teamName && team.position) {
         const compositeId = `${team.teamName}_${team.position.columnNo}_${team.position.rowNo}`
@@ -241,8 +249,6 @@ const computeBracketLayout = () => {
         }
       }
     })
-
-    // 2. Position the destination (winner) node for the game
     if (
       game.winnerDestination &&
       typeof game.winnerDestination === 'object' &&
@@ -261,8 +267,6 @@ const computeBracketLayout = () => {
         }
       }
     }
-
-    // 3. Position the loser destination node for the game
     if (
       game.loserDestination &&
       typeof game.loserDestination === 'object' &&
@@ -282,8 +286,6 @@ const computeBracketLayout = () => {
       }
     }
   })
-
-  // Add winnerPlace and loserPlace nodes from each round
   props.bracketData.round.forEach((round) => {
     if (Array.isArray(round.winnerPlace)) {
       round.winnerPlace.forEach((place) => {
@@ -308,8 +310,23 @@ const computeBracketLayout = () => {
       })
     }
   })
-
   nodeGridPositions.value = newPositions
+
+  // Cache layout values
+  const uniqueColumns = [
+    ...new Set(props.bracketData.round.map((r) => r.columnNo)),
+  ]
+  const numColumns = uniqueColumns.length
+  let maxRow = 0
+  Object.values(newPositions).forEach(({ row }) => {
+    if (row > maxRow) maxRow = row
+  })
+  layoutCache.value.numColumns = numColumns
+  layoutCache.value.maxRow = maxRow
+  layoutCache.value.contentWidth =
+    50 + (numColumns - 1) * props.hGap + nodeWidth + 50
+  layoutCache.value.contentHeight =
+    50 + (maxRow - 1) * props.vGap + nodeHeight + 50
 }
 
 const descriptiveRoundName = (round) => {
@@ -442,6 +459,136 @@ const getTeamPath = (teamId) => {
   }
 }
 
+const normalizeBracketData = (bracketData) => {
+  const minCol = bracketData.minColumn
+    ? Number(bracketData.minColumn)
+    : Math.min(...bracketData.round.map((r) => Number(r.columnNo)))
+  const minRow = bracketData.minRow
+    ? Number(bracketData.minRow)
+    : Math.min(
+        ...bracketData.round
+          .flatMap((r) =>
+            (r.game || []).flatMap((g) =>
+              (g.team || []).map((t) => Number(t.position?.rowNo) || 0)
+            )
+          )
+          .filter((n) => n > 0)
+      )
+
+  // Normalize all positions so columns/rows start from 1
+  const normRounds = []
+  for (const round of bracketData.round) {
+    const normGames = []
+    if (Array.isArray(round.game)) {
+      for (const game of round.game) {
+        const normTeams = []
+        if (Array.isArray(game.team)) {
+          for (const team of game.team) {
+            if (team.position) {
+              normTeams.push({
+                ...team,
+                position: {
+                  columnNo: Number(team.position.columnNo) - minCol + 1,
+                  rowNo: Number(team.position.rowNo) - minRow + 1,
+                },
+              })
+            } else {
+              normTeams.push(team)
+            }
+          }
+        }
+        let normWinnerDest = game.winnerDestination
+        if (
+          normWinnerDest &&
+          normWinnerDest.team &&
+          normWinnerDest.team.position
+        ) {
+          normWinnerDest = {
+            ...normWinnerDest,
+            team: {
+              ...normWinnerDest.team,
+              position: {
+                columnNo:
+                  Number(normWinnerDest.team.position.columnNo) - minCol + 1,
+                rowNo: Number(normWinnerDest.team.position.rowNo) - minRow + 1,
+              },
+            },
+          }
+        }
+        let normLoserDest = game.loserDestination
+        if (
+          normLoserDest &&
+          normLoserDest.team &&
+          normLoserDest.team.position
+        ) {
+          normLoserDest = {
+            ...normLoserDest,
+            team: {
+              ...normLoserDest.team,
+              position: {
+                columnNo:
+                  Number(normLoserDest.team.position.columnNo) - minCol + 1,
+                rowNo: Number(normLoserDest.team.position.rowNo) - minRow + 1,
+              },
+            },
+          }
+        }
+        normGames.push({
+          ...game,
+          team: normTeams,
+          winnerDestination: normWinnerDest,
+          loserDestination: normLoserDest,
+        })
+      }
+    }
+    // Normalize winnerPlace/loserPlace
+    const normWinnerPlace = []
+    if (Array.isArray(round.winnerPlace)) {
+      for (const place of round.winnerPlace) {
+        if (place.position) {
+          normWinnerPlace.push({
+            ...place,
+            position: {
+              columnNo: Number(place.position.columnNo) - minCol + 1,
+              rowNo: Number(place.position.rowNo) - minRow + 1,
+            },
+          })
+        } else {
+          normWinnerPlace.push(place)
+        }
+      }
+    }
+    const normLoserPlace = []
+    if (Array.isArray(round.loserPlace)) {
+      for (const place of round.loserPlace) {
+        if (place.position) {
+          normLoserPlace.push({
+            ...place,
+            position: {
+              columnNo: Number(place.position.columnNo) - minCol + 1,
+              rowNo: Number(place.position.rowNo) - minRow + 1,
+            },
+          })
+        } else {
+          normLoserPlace.push(place)
+        }
+      }
+    }
+    normRounds.push({
+      ...round,
+      columnNo: Number(round.columnNo) - minCol + 1,
+      roundName: round.roundName,
+      game: normGames,
+      winnerPlace: normWinnerPlace,
+      loserPlace: normLoserPlace,
+    })
+  }
+  return {
+    ...bracketData,
+    round: normRounds,
+  }
+}
+
 const openExpandView = () => {
   emit('open-expand')
 }
@@ -656,11 +803,8 @@ const renderBracket = () => {
   nodeGroups
     .append('text')
     .attr('class', 'node-label')
-    .attr('x', (d) => d.x + 54) // Move label right only for seed teams
+    .attr('x', (d) => d.x + (seedTeamIds.includes(d.id) ? 50 : 10)) // Move label right only for seed teams
     .attr('y', (d) => d.y + nodeHeight / 2 + 5)
-    .attr('text-anchor', (d) =>
-      seedTeamIds.includes(d.id) ? 'start' : 'middle'
-    )
     .text((d) => d.label)
 
   // Add '-' text to the right side for seed teams
@@ -700,44 +844,131 @@ const renderBracket = () => {
     const destPos = getNodePosition(destId)
 
     if (pos1 && pos2 && destPos) {
-      // Horizontally, it should be halfway between the end of the source node and the start of the destination node.
-      const x = pos1.x + nodeWidth / 2
-      // Vertically, it should be centered between the two source nodes.
-      const y = (pos1.y + nodeHeight + pos2.y) / 2
+      // Use the leftmost node's x for alignment
+      const nodeX1 = pos1.x
+      const nodeX2 = pos2.x
+      const nodeY1 = pos1.y
+      const nodeY2 = pos2.y
+
+      const startX = Math.min(nodeX1, nodeX2)
+      const topY = Math.min(nodeY1, nodeY2)
+      const bottomY = Math.max(nodeY1, nodeY2) + nodeHeight
+      // Move details upward by 12px so it doesn't touch the node
+      const centerY = (topY + bottomY) / 2 - 12
+
+      const detailsGroup = g.append('g').attr('transform', `translate(${startX}, ${centerY})`)
 
-      const dateGroup = g.append('g').attr('transform', `translate(${x}, ${y})`)
+      // Remove the white background rect (unwanted)
+      // detailsGroup.append('rect') ... (removed)
 
-      // Add the date text first
-      dateGroup
+      // Add the date text
+      detailsGroup
         .append('text')
         .attr('class', 'match-date text-overline-xs text-description')
-        .attr('x', 30) // Position text to end just left of center
-        .attr('y', 2)
-        .attr('text-anchor', 'end') // Anchor text from the end
+        .attr('x', 0)
+        .attr('y', -6)
+        .attr('text-anchor', 'start')
         .attr('dominant-baseline', 'middle')
         .text(game.date)
 
-      // Add the icon after the text
-      const locationIcon = dateGroup
+      // Add venue text below date text from the 'venue' key
+      if (game.venue) {
+        // We'll use a <foreignObject> with a div, and check for overflow after rendering
+        const venueFO = detailsGroup
+          .append('foreignObject')
+          .attr('x', 0)
+          .attr('y', 2)
+          .attr('width', 200)
+          .attr('height', 30)
+          .append('xhtml:div')
+          .attr('class', 'text-body-xxs text-description match-venue venue-ellipsis')
+          .style('word-break', 'break-word')
+          .style('white-space', 'normal')
+          .style('text-align', 'start')
+          .style('width', '100%')
+          .style('overflow', 'hidden')
+          .style('display', '-webkit-box')
+          .style('-webkit-line-clamp', 2)
+          .style('-webkit-box-orient', 'vertical')
+          .text(game.venue);
+
+        // After nextTick, check for vertical overflow and add tooltip if needed
+        nextTick(() => {
+          // venueFO is a D3 selection, so .node() gives us the div
+          const div = venueFO.node();
+          if (div && div.scrollHeight > div.clientHeight + 1) {
+            // Add ellipsis via CSS (already set), and tooltip on hover
+            d3.select(div)
+              .on('mouseover', function (event) {
+                const rect = this.getBoundingClientRect()
+                const svgRect = svgRef.value.getBoundingClientRect()
+                tooltipState.value = {
+                  visible: true,
+                  x: rect.left - svgRect.left + rect.width / 2,
+                  y: rect.top - svgRect.top - 40,
+                  text: game.venue,
+                }
+              })
+              .on('mouseout', function () {
+                tooltipState.value = { ...tooltipState.value, visible: false }
+              })
+          }
+        });
+      }
+
+      const locationIcon = detailsGroup
         .append('image')
         .attr('href', '/icons/field-location.svg')
-        .attr('x', 95)
-        .attr('y', -12)
+        .attr('x', 200)
+        .attr('y', -8)
         .attr('width', 24)
         .attr('height', 24)
         .attr('class', 'location-icon')
         .style('cursor', 'pointer')
 
+      const scheduleIcon = detailsGroup
+        .append('image')
+        .attr('href', '/icons/scoreboard.svg')
+        .attr('x', 240)
+        .attr('y', -8)
+        .attr('width', 24)
+        .attr('height', 24)
+        .attr('class', 'info-icon')
+        .style('cursor', 'pointer')
+
       locationIcon.on('click', function (event) {
-        const iconRect = this.getBoundingClientRect()
-        const svgRect = svgRef.value.getBoundingClientRect()
-        tooltipState.value = {
-          visible: true,
-          x: iconRect.left - svgRect.left + iconRect.width / 2,
-          y: iconRect.top - svgRect.top - 40,
-          text: game.location || 'Dallas, TX',
+        if ($screen.value.isMobile) {
+          locationSheet.value.push({ open: true, height: 150 })
+        } else {
+          const iconRect = this.getBoundingClientRect()
+          const svgRect = svgRef.value.getBoundingClientRect()
+          tooltipState.value = {
+            visible: true,
+            x: iconRect.left - svgRect.left + iconRect.width / 2,
+            y: iconRect.top - svgRect.top - 40,
+            text: game.location || 'Dallas, TX',
+          }
         }
       })
+
+      // Tooltip on hover for schedule icon
+      scheduleIcon
+        .on('mouseover', function (event) {
+          const iconRect = this.getBoundingClientRect()
+          const svgRect = svgRef.value.getBoundingClientRect()
+          tooltipState.value = {
+            visible: true,
+            x: iconRect.left - svgRect.left + iconRect.width / 2,
+            y: iconRect.top - svgRect.top - 40,
+            text: props.viewMatchupDetailText,
+          }
+        })
+        .on('mouseout', function () {
+          tooltipState.value = { ...tooltipState.value, visible: false }
+        })
+        .on('click', function (event) {
+          emit('schedule-click', game)
+        })
     }
   })
 
@@ -765,6 +996,39 @@ const renderBracket = () => {
         (winnerNodePosition.x !== 0 || winnerNodePosition.y !== 0)
       ) {
         const { x: mx, y: my } = winnerNodePosition
+
+        let labelPlaced = false
+
+        const sourcePositions = (game.team || [])
+          .map((source) => {
+            if (
+              typeof source === 'object' &&
+              source.teamName &&
+              source.position
+            ) {
+              const id = `${source.teamName}_${source.position.columnNo}_${source.position.rowNo}`
+              return getNodePosition(id)
+            }
+            return null
+          })
+          .filter(Boolean)
+
+        let triX = 0, triY = 0
+        if (sourcePositions.length === 2) {
+          if (mx > sourcePositions[0].x) {
+            // Winner to the right
+            triX = (sourcePositions[0].x + nodeWidth + mx - edgeMargin) / 2
+          } else {
+            // Winner to the left
+            triX = (sourcePositions[0].x - edgeMargin + mx + nodeWidth) / 2
+          }
+          // Always use the vertical center of the destination node
+          triY = my + nodeHeight / 2
+        } else if (sourcePositions.length === 1) {
+          triX = (sourcePositions[0].x + mx) / 2
+          triY = my + nodeHeight / 2
+        }
+
         game.team.forEach((source) => {
           let sourceNodeId
           if (
@@ -807,6 +1071,47 @@ const renderBracket = () => {
             .attr('d', path.toString())
             .attr('stroke-linecap', 'round')
         })
+
+        // Place the gameAliasName at the trisection point (only once per edge group)
+        if (game.gameAliasName && !labelPlaced && sourcePositions.length) {
+          const aliasText = game.gameAliasName.replace(/-/g, '').trim();
+          const padding = 6   // px, padding inside the square
+          const tempText = g.append('text')
+            .attr('class', 'text-caption-xs game-number')
+            .attr('x', triX)
+            .attr('y', triY)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .style('visibility', 'hidden')
+            .text(aliasText)
+          const bbox = tempText.node().getBBox()
+          tempText.remove()
+          const size = Math.max(bbox.width, bbox.height) + padding
+
+          // Draw white square background with edge color border
+          g.append('rect')
+            .attr('x', triX - size / 2)
+            .attr('y', triY - size / 2)
+            .attr('width', size)
+            .attr('height', size)
+            .attr('rx', 4)
+            .attr('fill', '#fff')
+            .attr('stroke', getComputedStyle(document.documentElement)
+              .getPropertyValue('--q-color-neutral-4') || '#b9e0ff')
+            .attr('stroke-width', 4)
+            .attr('class', 'edge-alias-bg')
+
+          // Draw the label text
+          g.append('text')
+            .attr('class', 'text-caption-xs text-description game-alias-label')
+            .attr('x', triX)
+            .attr('y', triY)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .style('pointer-events', 'none')
+            .text(aliasText)
+          labelPlaced = true
+        }
       }
     }
 
@@ -831,6 +1136,32 @@ const renderBracket = () => {
         (loserNodePosition.x !== 0 || loserNodePosition.y !== 0)
       ) {
         const { x: lx, y: ly } = loserNodePosition
+
+        let labelPlaced = false
+
+        const sourcePositions = (game.team || [])
+          .map((source) => {
+            if (
+              typeof source === 'object' &&
+              source.teamName &&
+              source.position
+            ) {
+              const id = `${source.teamName}_${source.position.columnNo}_${source.position.rowNo}`
+              return getNodePosition(id)
+            }
+            return null
+          })
+          .filter(Boolean)
+
+        let triX = 0, triY = 0
+        if (sourcePositions.length === 2) {
+          triX = (sourcePositions[0].x - edgeMargin + lx + nodeWidth) / 2
+          triY = ly + nodeHeight / 2
+        } else if (sourcePositions.length === 1) {
+          triX = (sourcePositions[0].x + lx) / 2
+          triY = ly + nodeHeight / 2
+        }
+
         game.team.forEach((source) => {
           let sourceNodeId
           if (
@@ -861,39 +1192,141 @@ const renderBracket = () => {
             .attr('d', path.toString())
             .attr('stroke-linecap', 'round') // Changed to rounded end
         })
+
+        // Place the gameAliasName at the trisection point (only once per edge group)
+        if (game.gameAliasName && !labelPlaced && sourcePositions.length) {
+          // Remove hyphens from gameAliasName
+          const aliasText = game.gameAliasName.replace(/-/g, '').trim();
+          // Calculate text size for the background rect
+          const fontSize = 13 // px, matches .edge-alias-label font-size
+          const padding = 6   // px, padding inside the square
+          // Temporary text element to measure width
+          const tempText = g.append('text')
+            .attr('class', 'text-caption-xs text-description')
+            .attr('x', triX)
+            .attr('y', triY)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .style('visibility', 'hidden')
+            .text(aliasText)
+          const bbox = tempText.node().getBBox()
+          tempText.remove()
+          const size = Math.max(bbox.width, bbox.height) + padding
+
+          // Draw white square background with edge color border
+          g.append('rect')
+            .attr('x', triX - size / 2)
+            .attr('y', triY - size / 2)
+            .attr('width', size)
+            .attr('height', size)
+            .attr('rx', 5)
+            .attr('fill', '#fff')
+            .attr('stroke', getComputedStyle(document.documentElement)
+              .getPropertyValue('--q-color-neutral-4') || '#b9e0ff')
+            .attr('stroke-width', 4)
+            .attr('class', 'edge-alias-bg')
+
+          // Draw the label text
+          g.append('text')
+            .attr('class', 'text-caption-xs text-description game-alias-label')
+            .attr('x', triX)
+            .attr('y', triY)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .style('pointer-events', 'none')
+            .text(aliasText)
+          labelPlaced = true
+        }
       }
-    }
-  })
+    } // <-- FIX: close the LOSER edges block here
+
+  }) // <-- close games.value.forEach
 
   // After all edges are drawn, move highlighted edges to top
   nextTick(() => {
     const gEl = gRef.value
     if (gEl) {
+      // Move highlighted edges to top
       const highlightedEdges = gEl.querySelectorAll('.edge-path.highlighted')
       highlightedEdges.forEach((el) => {
         gEl.appendChild(el)
       })
+      // Move game-alias boxes (rects and texts) to top after edges
+      const aliasRects = gEl.querySelectorAll('.edge-alias-bg')
+      const aliasLabels = gEl.querySelectorAll('.game-alias-label')
+      aliasRects.forEach((el) => {
+        gEl.appendChild(el)
+      })
+      aliasLabels.forEach((el) => {
+        gEl.appendChild(el)
+      })
     }
   })
 }
 
-const scrollToBracketSide = (side) => {
-  if (!props.bracketData || !props.bracketData.round) return
+function resetZoom() {
+  const svg = d3.select(svgRef.value)
+  if (zoomRef.value && svgRef.value) {
+    const svgElement = svgRef.value
+    const { width, height } = svgElement.getBoundingClientRect()
+    const centerY = height / 2
+
+    const k = 1
+    const contentWidth = layoutCache.value.contentWidth
+    const contentHeight = layoutCache.value.contentHeight
+    const viewportWidth = svgElement.clientWidth
+    const viewportHeight = svgElement.clientHeight
+    const minTx = viewportWidth - contentWidth * k
+    const maxTx = 0
+    const minTy = viewportHeight - contentHeight * k
+    const maxTy = 0
+
+    // Center on selected team if available, else round 1
+    let tx, ty
+    let targetX = null,
+      targetY = null
+    if (selectedTeamId.value) {
+      const pos = getNodePosition(selectedTeamId.value)
+      targetX = pos.x + nodeWidth / 2
+      targetY = pos.y + nodeHeight / 2
+    } else {
+      const firstRound = props.bracketData.round?.[0]
+      if (firstRound) {
+        targetX = (firstRound.columnNo - 1) * props.hGap + props.hGap / 2
+        targetY = centerY
+      } else {
+        targetX = viewportWidth / 2
+        targetY = centerY
+      }
+    }
+    tx = viewportWidth / 2 - targetX * k
+    ty = viewportHeight / 2 - targetY * k
+    tx = minTx > 0 ? minTx / 2 : Math.max(minTx, Math.min(maxTx, tx))
+    ty = minTy > 0 ? minTy / 2 : Math.max(minTy, Math.min(maxTy, ty))
+    const clampedTransform = d3.zoomIdentity.translate(tx, ty).scale(k)
+    svg
+      .transition()
+      .duration(400)
+      .ease(d3.easeCubic)
+      .call(zoomRef.value.transform, clampedTransform)
+    d3.select(gRef.value).attr('transform', clampedTransform)
+    currentTransform.value = clampedTransform
+  }
+}
 
-  const firstRound = props.bracketData.round[0]
+const scrollToBracketSide = (side) => {
+  if (!normalizedBracketData.value || !normalizedBracketData.value.round) return
+  const firstRound = normalizedBracketData.value.round[0]
   if (!firstRound || !firstRound.game || firstRound.game.length === 0) return
-
   const firstMatch = firstRound.game[0]
   let targetColumn = null
-
   if (side === 'winner' && firstMatch.winnerDestination) {
     targetColumn = firstMatch.winnerDestination.team.position.columnNo
   } else if (side === 'loser' && firstMatch.loserDestination) {
     targetColumn = firstMatch.loserDestination.team.position.columnNo
   }
-
   if (targetColumn) {
-    const targetRound = props.bracketData.round.find(
+    const targetRound = normalizedBracketData.value.round.find(
       (r) => r.columnNo === targetColumn
     )
     if (targetRound) {
@@ -904,41 +1337,26 @@ const scrollToBracketSide = (side) => {
 
 const scrollToRound = (round) => {
   activeRound.value = { roundNo: round.roundNo, columnNo: round.columnNo }
-  openRoundMenu.value = false // Close the menu on selection
+  openRoundMenu.value = false
   const svg = d3.select(svgRef.value)
   const zoomBehavior = zoomRef.value
   if (!zoomBehavior || !svgRef.value) return
 
-  // Calculate the x-coordinate of the target round's center.
-  const roundX = (round.columnNo - 1) * props.hGap + props.hGap / 2
+  const normalizedRound = normalizedBracketData.value.round
 
-  // Get the current viewport width.
-  const viewportWidth = svgRef.value.clientWidth
+  const mainRound = normalizedRound.find(
+    (r) => r.roundName == round.roundName && r.roundNo == round.roundNo
+  )
 
-  // Get the LIVE transform directly from the SVG node for accuracy.
-  // This is the key fix: currentTransform.value can be stale during transitions.
+  const roundX = (mainRound.columnNo - 1) * props.hGap + props.hGap / 2
+  const viewportWidth = svgRef.value.clientWidth
   const liveTransform = d3.zoomTransform(svg.node())
   const { k: currentK, y: currentY } = liveTransform
-
-  // Determine content dimensions.
-  const uniqueColumns = [
-    ...new Set(props.bracketData.round.map((r) => r.columnNo)),
-  ]
-  const numColumns = uniqueColumns.length
-  const contentWidth = 50 + (numColumns - 1) * props.hGap + nodeWidth + 50
-
-  // Calculate the new x-translate to center the round's center in the viewport.
   const targetX = viewportWidth / 2 - roundX * currentK
-
   const clampedX = targetX
-
-  // Create the new transform, keeping the current scale and y-pan.
-
   const newTransform = d3.zoomIdentity
     .translate(clampedX, currentY)
     .scale(currentK)
-
-  // Apply the new transform with a smooth transition.
   svg.transition().duration(750).call(zoomBehavior.transform, newTransform)
 }
 
@@ -953,10 +1371,20 @@ const setSelectedTeamId = (teamId) => {
   const team = toolbarTeams.value.find((t) => t.id === teamId)
   if (team) {
     selectedTeamId.value = team.id
+    // Reset zoom to initial scale and center
+    resetZoom()
   }
   openMenu.value = false
 }
 
+const toggleBracketSideInSheet = (side) => {
+  tempSelectedBracketSide.value = side
+}
+
+const toggleRoundInSheet = (round) => {
+  tempSelectedRoundId.value = `${round.roundNo}-${round.roundName}`
+}
+
 const toggleTeamInSheet = (teamId) => {
   if (teamId === tempSelectedTeamId.value) {
     tempSelectedTeamId.value = ''
@@ -965,41 +1393,59 @@ const toggleTeamInSheet = (teamId) => {
   tempSelectedTeamId.value = teamId
 }
 
-const toggleBracketSideInSheet = (side) => {
-  tempSelectedBracketSide.value = side
-}
-
-const toggleRoundInSheet = (round) => {
-  tempSelectedRoundId.value = `${round.roundNo}-${round.columnNo}`
-}
-
 const zoomIn = () => {
   const svg = d3.select(svgRef.value)
-  if (zoomRef.value) {
+  if (zoomRef.value && svgRef.value) {
+    const svgElement = svgRef.value
+    const { width, height } = svgElement.getBoundingClientRect()
+    const centerX = width / 2
+    const centerY = height / 2
+
     // Increase scale by 20%
-    const newScale = Math.min((currentTransform.value.k || 1) * 1.2, 2.5)
-    const newTransform = d3.zoomIdentity
-      .scale(newScale)
-      .translate(
-        currentTransform.value.x / newScale,
-        currentTransform.value.y / newScale
-      )
-    svg.transition().duration(200).call(zoomRef.value.transform, newTransform)
+    const prevScale = currentTransform.value.k || 1
+    const newScale = Math.min(prevScale * 1.2, 2.5)
+
+    // Calculate new translation to keep center in view
+    const newX =
+      centerX - (centerX - currentTransform.value.x) * (newScale / prevScale)
+    const newY =
+      centerY - (centerY - currentTransform.value.y) * (newScale / prevScale)
+
+    const newTransform = d3.zoomIdentity.translate(newX, newY).scale(newScale)
+
+    svg
+      .transition()
+      .duration(200)
+      .ease(d3.easeCubic)
+      .call(zoomRef.value.transform, newTransform)
   }
 }
 
 const zoomOut = () => {
   const svg = d3.select(svgRef.value)
-  if (zoomRef.value) {
+  if (zoomRef.value && svgRef.value) {
+    const svgElement = svgRef.value
+    const { width, height } = svgElement.getBoundingClientRect()
+    const centerX = width / 2
+    const centerY = height / 2
+
     // Decrease scale by 20%
-    const newScale = Math.max((currentTransform.value.k || 1) / 1.2, 0.5)
-    const newTransform = d3.zoomIdentity
-      .scale(newScale)
-      .translate(
-        currentTransform.value.x / newScale,
-        currentTransform.value.y / newScale
-      )
-    svg.transition().duration(200).call(zoomRef.value.transform, newTransform)
+    const prevScale = currentTransform.value.k || 1
+    const newScale = Math.max(prevScale / 1.2, 0.5)
+
+    // Calculate new translation to keep center in view
+    const newX =
+      centerX - (centerX - currentTransform.value.x) * (newScale / prevScale)
+    const newY =
+      centerY - (centerY - currentTransform.value.y) * (newScale / prevScale)
+
+    const newTransform = d3.zoomIdentity.translate(newX, newY).scale(newScale)
+
+    svg
+      .transition()
+      .duration(200)
+      .ease(d3.easeCubic)
+      .call(zoomRef.value.transform, newTransform)
   }
 }
 
@@ -1013,6 +1459,7 @@ watch(
     reinitZoomAndLayout()
   }
 )
+
 watch(
   () => props.vGap,
   () => {
@@ -1060,7 +1507,7 @@ onMounted(() => {
 
   // Determine content dimensions
   const uniqueColumns = [
-    ...new Set(props.bracketData.round.map((r) => r.columnNo)),
+    ...new Set(normalizedBracketData.value.round.map((r) => r.columnNo)),
   ]
   const numColumns = uniqueColumns.length
   const contentWidth = 50 + (numColumns + 2) * props.hGap + nodeWidth + 50
@@ -1075,35 +1522,55 @@ onMounted(() => {
   const zoomBehavior = d3
     .zoom()
     .scaleExtent([0.5, 2.5])
-    // Filter events to prevent page scroll on wheel events (pan/zoom)
-    // while allowing other events like mouse clicks to pass through.
+    // Custom filter to intercept wheel events and always zoom centered
     .filter((event) => {
       if (event.type === 'wheel') {
         event.preventDefault()
+        // Manually handle wheel zoom centered on SVG
+        const svgElement = svgRef.value
+        const { width, height } = svgElement.getBoundingClientRect()
+        const centerX = width / 2
+        const centerY = height / 2
+        const prevScale = currentTransform.value.k || 1
+        let newScale = prevScale
+        // D3 uses event.deltaY for wheel direction
+        if (event.deltaY < 0) {
+          newScale = Math.min(prevScale * 1.2, 2.5)
+        } else {
+          newScale = Math.max(prevScale / 1.2, 0.5)
+        }
+        // Calculate new translation to keep center in view
+        const newX =
+          centerX -
+          (centerX - currentTransform.value.x) * (newScale / prevScale)
+        const newY =
+          centerY -
+          (centerY - currentTransform.value.y) * (newScale / prevScale)
+        const newTransform = d3.zoomIdentity
+          .translate(newX, newY)
+          .scale(newScale)
+        d3.select(svgRef.value)
+          .transition()
+          .duration(200)
+          .ease(d3.easeCubic)
+          .call(zoomBehavior.transform, newTransform)
+        return false // Prevent default D3 wheel zoom
       }
-      // Allow click-and-drag panning
       return !event.ctrlKey || event.type === 'wheel'
     })
-    // We clamp manually in the zoom event instead of using translateExtent
     .on('zoom', (event) => {
       let { transform } = event
       const { k } = transform
-      tooltipState.value.visible = false // Hide tooltip on zoom/pan
-
-      // Calculate boundaries for clamping.
+      tooltipState.value.visible = false
       const minTx = viewportWidth - contentWidth * k
       const maxTx = 0
       const minTy = viewportHeight - contentHeight * k
       const maxTy = 0
-
       const tx =
         minTx > 0 ? minTx / 2 : Math.max(minTx, Math.min(maxTx, transform.x))
       const ty =
         minTy > 0 ? minTy / 2 : Math.max(minTy, Math.min(maxTy, transform.y))
-
-      // Create a new clamped transform
       const clampedTransform = d3.zoomIdentity.translate(tx, ty).scale(k)
-
       g.attr('transform', clampedTransform)
       currentTransform.value = clampedTransform
     })
@@ -1111,19 +1578,40 @@ onMounted(() => {
   svg.call(zoomBehavior)
   zoomRef.value = zoomBehavior
 
-  // Focus on round 1 when bracket loads
-  const firstRound = props.bracketData.round?.[0]
+  // Focus on first normalized round when bracket loads
+  const firstRound = normalizedBracketData.value.round?.[0]
   if (firstRound) scrollToRound(firstRound)
 
   renderBracket()
 
-  // Add window resize listener
   window.addEventListener('resize', reinitZoomAndLayout)
 })
 
 onUnmounted(() => {
   window.removeEventListener('resize', reinitZoomAndLayout)
-  document.removeEventListener('click', () => {})
+})
+
+watch(
+  () => props.bracketData,
+  () => {
+    // Reset selections on bracket data change
+    selectedTeamId.value = ''
+    tempSelectedTeamId.value = ''
+    tempSelectedRoundId.value = ''
+    tempSelectedBracketSide.value = ''
+    bracketSheet.value = []
+    roundSheet.value = []
+    computeBracketLayout()
+    renderBracket()
+  },
+  { deep: true }
+)
+
+watch(currentTransform, (newVal) => {
+  // Only update on explicit user zoom/pan, not on initial mount
+  if (gRef.value) {
+    d3.select(gRef.value).attr('transform', newVal)
+  }
 })
 </script>
 
@@ -1152,20 +1640,20 @@ onUnmounted(() => {
             :ripple="false"
             size="sm"
             @click="selectedTeamName = ''"
-          ></UBtnStd>
+          />
         </div>
       </div>
     </div>
     <div class="sticky-round-labels">
       <div
         v-for="(round, i) in bracketData.round"
-        :key="`${round.roundNo}-${round.columnNo}`"
         class="round-label text-body-sm"
         :class="{
           'active-round':
             activeRound.roundNo === round.roundNo &&
             activeRound.columnNo === round.columnNo,
         }"
+        :key="`${round.roundNo}-${round.columnNo}`"
         :style="roundLabelStyles[i]"
         @click="scrollToRound(round)"
       >
@@ -1187,7 +1675,7 @@ onUnmounted(() => {
             width="24"
           >
             <rect fill="#F5F7F9" height="24" width="24" x="0" y="0" />
-            <circle cx="12" cy="12" fill="#d3d3d3" r="1.5" class="dot" />
+            <circle class="dot" cx="12" cy="12" fill="#d3d3d3" r="1.5" />
           </pattern>
         </defs>
         <rect
@@ -1217,27 +1705,27 @@ onUnmounted(() => {
       >
         <UBtnIcon
           iconClass="fa-kit-duotone fa-zoom-out"
-          ariaLabel="Zoom Out"
           :anchor="anchor"
+          ariaLabel="Zoom Out"
           :self="self"
           size="md"
           :tooltip="zoomOutTooltip"
           @click="zoomOut"
-        ></UBtnIcon>
+        />
         <UBtnIcon
           iconClass="fa-kit-duotone fa-zoom"
-          ariaLabel="Zoom In"
           :anchor="anchor"
+          ariaLabel="Zoom In"
           :self="self"
           size="md"
           :tooltip="zoomInTooltip"
           @click="zoomIn"
-        ></UBtnIcon>
+        />
         <UBtnIcon
           v-if="!$screen.isMobile"
           iconClass="fa-kit-duotone fa-bracket"
-          ariaLabel="Rounds"
           :anchor="anchor"
+          ariaLabel="Rounds"
           :self="self"
           size="md"
           :tooltip="roundTooltip"
@@ -1258,9 +1746,9 @@ onUnmounted(() => {
                   :key="`${round.roundNo}-${round.columnNo}`"
                   @click="scrollToRound(round)"
                 >
-                  <q-item-section>{{
-                    descriptiveRoundName(round)
-                  }}</q-item-section>
+                  <q-item-section>
+                    {{ descriptiveRoundName(round) }}
+                  </q-item-section>
                 </q-item>
               </q-list>
             </q-menu>
@@ -1269,18 +1757,18 @@ onUnmounted(() => {
         <UBtnIcon
           v-if="$screen.isMobile"
           iconClass="fa-kit-duotone fa-bracket"
-          ariaLabel="Rounds"
           :anchor="anchor"
+          ariaLabel="Rounds"
           :self="self"
           size="md"
           :tooltip="roundTooltip"
           @click="openRoundSheet"
         />
         <UBtnIcon
-          v-if="!$screen.isMobile"
+          v-if="!$screen.isMobile && toolbarTeams.length"
           iconClass="fa-kit-duotone fa-jersey"
-          ariaLabel="Select Team"
           :anchor="anchor"
+          ariaLabel="Select Team"
           :self="self"
           size="md"
           :tooltip="teamSelectTooltip"
@@ -1306,7 +1794,7 @@ onUnmounted(() => {
           </template>
         </UBtnIcon>
         <UBtnIcon
-          v-if="$screen.isMobile"
+          v-if="$screen.isMobile && toolbarTeams.length"
           iconClass="fa-kit-duotone fa-jersey"
           :anchor="anchor"
           ariaLabel="Select Team"
@@ -1314,8 +1802,7 @@ onUnmounted(() => {
           size="md"
           :tooltip="teamSelectTooltip"
           @click="openTeamOptions"
-        >
-        </UBtnIcon>
+        />
         <UBtnIcon
           v-if="!props.isExpandedView"
           iconClass="fa-kit-duotone fa-expand"
@@ -1325,7 +1812,7 @@ onUnmounted(() => {
           size="md"
           :tooltip="expandTooltip"
           @click="openExpandView"
-        ></UBtnIcon>
+        />
       </div>
     </div>
   </div>
@@ -1395,14 +1882,14 @@ onUnmounted(() => {
             in-sheet
             :label="descriptiveRoundName(round)"
             :selected="
-              tempSelectedRoundId === `${round.roundNo}-${round.columnNo}`
+              tempSelectedRoundId === `${round.roundNo}-${round.roundName}`
             "
             @onClick="toggleRoundInSheet(round)"
           >
             <template #trailing_slot>
               <q-icon
                 v-if="
-                  tempSelectedRoundId === `${round.roundNo}-${round.columnNo}`
+                  tempSelectedRoundId === `${round.roundNo}-${round.roundName}`
                 "
                 class="fa-kit-duotone fa-circle-check"
                 color="primary"
@@ -1471,6 +1958,26 @@ onUnmounted(() => {
       />
     </template>
   </USheet>
+  <USheet
+    v-model:dialogs="locationSheet"
+    dialog-class="bracket-sheet"
+    :heading="venueSheetHeading"
+    show-action-buttons
+  >
+    <template #content>
+      <div class="text-body-xl text-dark">
+          Dallas, TX
+      </div>
+    </template>
+    <template #action_primary_one>
+      <UBtnStd
+        class="full-width"
+        color="primary"
+        label="Close"
+        @onClick="locationSheet = []"
+      />
+    </template>
+  </USheet>
 </template>
 
 <style scoped lang="sass">
@@ -1509,7 +2016,7 @@ onUnmounted(() => {
   font-weight: normal
   color: $primary
   background: #EEF8FF
-  height: 2rem
+  height: $md
   user-select: none
   cursor: pointer
   z-index: 10
@@ -1531,17 +2038,17 @@ svg
   .main-content-dialog
     padding-top: $ba !important
   .q-item
-    margin-bottom: $xs
+    margin-bottom: $xs !important
 
 .bracket-toolbar
-  bottom: 1rem /* Position from the bottom */
+  bottom: $ba /* Position from the bottom */
   left: 50% /* Center horizontally */
   transform: translateX(-50%) /* Adjust for centering */
   display: flex
   justify-content: center
   align-items: center
   gap: $xs
-  height: 2.5rem
+  height: $lg
   background: $neutral-1
   border: 1px solid #e0e0e0
   border-radius: $sm /* Rounded corners */
@@ -1587,6 +2094,15 @@ svg
 :deep(.match-date)
   fill: #566176
 
+:deep(.match-venue)
+  fill: #566176
+
+:deep(.game-number)
+  fill: #566176
+
+:deep(.game-alias-label)
+  fill: #566176
+
 :deep(.edge-path)
   fill: none !important
   stroke: $neutral-4
@@ -1598,6 +2114,7 @@ svg
     opacity: 1
 
 :deep(.dot)
+ 
   opacity: 0.6
 
 :deep(.remove-team .button-label)
@@ -1648,4 +2165,17 @@ svg
   pointer-events: auto
   box-shadow: 0 2px 8px rgba(0,0,0,0.15)
   overflow: hidden
+
+:deep(.edge-alias-bg)
+  shape-rendering: inherit
+  stroke: $neutral-4 !important
+  stroke-width: 2 !important
+  fill: #fff !important
+
+:deep(.venue-ellipsis)
+  overflow: hidden
+  text-overflow: ellipsis
+  display: -webkit-box
+  -webkit-line-clamp: 2
+  -webkit-box-orient: vertical
 </style>