Fix block info transitions

client/src/components/BlockInfo.svelte

@@ -62,18 +62,24 @@
     }
   }
 
+  let transitionDirection
   let flyIn
   let flyOut
   $: {
-    if ($blockTransitionDirection && $blockTransitionDirection === 'right') {
+    if (!$blockTransitionDirection || !visible || !block || !$blocksEnabled) {
+      transitionDirection = 'up'
+      flyIn = { y: (restoring ? -50 : 50), duration: (restoring ? 500 : 1000), easing: linear, delay: (restoring ? 0 : newBlockDelay) }
+      flyOut = { y: -50, duration: 2000, easing: linear }
+    } else if ($blockTransitionDirection && $blockTransitionDirection === 'right') {
+      transitionDirection = 'right'
       flyIn = { x: 100, easing: linear, delay: 1000, duration: 1000 }
       flyOut = { x: -100, easing: linear, delay: 0, duration: 1000  }
     } else if ($blockTransitionDirection && $blockTransitionDirection === 'left') {
+      transitionDirection = 'left'
       flyIn = { x: -100, easing: linear, delay: 1000, duration: 1000  }
       flyOut = { x: 100, easing: linear, delay: 0, duration: 1000  }
     } else {
-      flyIn = { y: (restoring ? -50 : 50), duration: (restoring ? 500 : 1000), easing: linear, delay: (restoring ? 0 : newBlockDelay) }
-      flyOut = { y: -50, duration: 2000, easing: linear }
+      transitionDirection = 'down'
     }
   }
 
@@ -155,6 +161,14 @@
     }
   }
 
+  .block-info-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
   .block-info {
     position: absolute;
     bottom: calc(100% + 0.25rem);
@@ -319,9 +333,10 @@
   }
 </style>
 
-{#key block}
-  {#if block != null && visible && $blocksEnabled }
-    <div class="block-info" out:fly={flyOut} in:fly={flyIn}>
+{#key transitionDirection}
+  {#each ((block != null && visible && $blocksEnabled) ? [block] : []) as block (block.id)}
+    <div class="block-info-container" out:fly|local={flyOut} in:fly|local={flyIn}>
+      <div class="block-info">
           <!-- <span class="data-field">Hash: { block.id }</span> -->
           <div class="full-size">
             <div class="data-row">
@@ -334,7 +349,7 @@
             </div>
             <div class="data-row">
               <span class="data-field">{ formatBytes(block.bytes) }</span>
-            <span class="data-field">{ formatCount(block.txnCount) } transactions</span>
+              <span class="data-field">{ formatCount(block.txnCount) } transaction{block.txnCount == 1 ? '' : 's'}</span>
             </div>
             <div class="data-row spacer">&nbsp;</div>
             <div class="data-row">
@@ -365,22 +380,24 @@
             </div>
           </div>
       </div>
+
       {#if hasPrevBlock }
-      <a href="/block/height/{block.height - 1}" on:click={explorePrevBlock} class="explore-button prev"  out:fly={flyOut} in:fly={flyIn}>
+        <a href="/block/height/{block.height - 1}" on:click={explorePrevBlock} class="explore-button prev">
           <svg class="chevron left" height="1.5em" width="1.5em" viewBox="0 0 512 512">
             <path d="M 107.628,257.54 327.095,38.078 404,114.989 261.506,257.483 404,399.978 327.086,476.89 Z" class="outline" />
           </svg>
         </a>
       {/if}
       {#if hasNextBlock }
-      <a href="/block/height/{block.height + 1}" on:click={exploreNextBlock} class="explore-button next"  out:fly={flyOut} in:fly={flyIn}>
+        <a href="/block/height/{block.height + 1}" on:click={exploreNextBlock} class="explore-button next">
           <svg class="chevron right" height="1.5em" width="1.5em" viewBox="0 0 512 512">
             <path d="M 107.628,257.54 327.095,38.078 404,114.989 261.506,257.483 404,399.978 327.086,476.89 Z" class="outline" />
           </svg>
         </a>
       {/if}
-    <button class="close-button standalone" on:click={hideBlock} out:fly={flyOut} in:fly={flyIn} >
+      <button class="close-button standalone" on:click={hideBlock}>
         <Icon icon={closeIcon} color="var(--palette-x)" />
       </button>
-  {/if}
+    </div>
+  {/each}
 {/key}

client/src/components/SearchBar.svelte

@@ -219,7 +219,7 @@ async function searchSubmit (e) {
 
 <div class="input-wrapper" transition:fly={{ y: -25 }}>
   <form class="search-form" action="" on:submit={searchSubmit}>
-    <input class="search-input" type="text" bind:value={query} placeholder="Enter a txid">
+    <input class="search-input" type="text" bind:value={query} placeholder="txid, block id or block height">
     <div class="clear-button" class:disabled={query == null || query === ''} on:click={clearInput} title="Clear">
       <Icon icon={CrossIcon}/>
     </div>

client/src/components/TransactionOverlay.svelte

@@ -3,12 +3,12 @@ import Overlay from '../components/Overlay.svelte'
 import Icon from './Icon.svelte'
 import BookmarkIcon from '../assets/icon/cil-bookmark.svg'
 import { longBtcFormat, numberFormat, feeRateFormat, dateFormat } from '../utils/format.js'
-import { exchangeRates, settings, sidebarToggle, newHighlightQuery, highlightingFull, detailTx, pageWidth, latestBlockHeight, highlightInOut, loading, urlPath } from '../stores.js'
+import { exchangeRates, settings, sidebarToggle, newHighlightQuery, highlightingFull, detailTx, pageWidth, latestBlockHeight, highlightInOut, loading, urlPath, currentBlock, overlay, explorerBlockData } from '../stores.js'
 import { formatCurrency } from '../utils/fx.js'
 import { hlToHex, mixColor, teal, purple } from '../utils/color.js'
 import { SPKToAddress } from '../utils/encodings.js'
 import api from '../utils/api.js'
-import { searchTx } from '../utils/search.js'
+import { searchTx, searchBlockHash, searchBlockHeight } from '../utils/search.js'
 import { fade } from 'svelte/transition'
 
 function onClose () {
@@ -259,14 +259,6 @@ function getMiterOffset (weight, dy, dx) {
 async function clickItem (item) {
   if (item.rest) {
     truncate = false
-  } else if (item.prev_txid && item.prev_vout != null) {
-    // $loading++
-    // await searchTx(item.prev_txid, null, item.prev_vout)
-    // $loading--
-  } else if (item.spend) {
-    // $loading++
-    // await searchTx(item.spend.txid, item.spend.vin)
-    // $loading--
   }
 }
 
@@ -283,6 +275,26 @@ async function goToOutput(e, output) {
   await searchTx(output.spend.txid, output.spend.vin)
   loading.decrement()
 }
+
+async function goToBlock(e) {
+  e.preventDefault()
+
+  // ignore click if it was triggered while selecting text, or if we don't have a block to go to
+  if (!$detailTx || !$detailTx.block || !!window.getSelection().toString()) return
+
+  let hash = $detailTx.block.hash || $detailTx.block.id
+  let height = $detailTx.block.height
+  if (hash === $currentBlock.id) {
+    $overlay = null
+  } else if (height == $latestBlockHeight) {
+    $explorerBlockData = null
+    $overlay = null
+  } else if (hash) {
+    loading.increment()
+    await searchBlockHash($detailTx.block.hash || $detailTx.block.id)
+    loading.decrement()
+  }
+}
 </script>
 
 <style type="text/scss">
@@ -362,6 +374,14 @@ async function goToOutput(e, output) {
           word-break: break-all;
         }
       }
+
+      &.clickable {
+        cursor: pointer;
+        user-select: text;
+        &:hover {
+          background: var(--palette-a);
+        }
+      }
     }
 
     .fields {
@@ -562,7 +582,7 @@ async function goToOutput(e, output) {
       {/if}
       <h2><span class="title">{#if $detailTx.isCoinbase }Coinbase{:else}Transaction{/if}</span> <span class="tx-id">{ $detailTx.id }</span></h2>
       {#if $detailTx.block}
-        <div class="pane fields">
+        <a class="pane fields clickable" href="/block/{$detailTx.block.hash || $detailTx.block.id}" draggable="false" on:click={goToBlock}>
           <div class="field">
             <span class="label">confirmed</span>
             <span class="value" style="color: {feeColor};">{ dateFormat.format($detailTx.block.time) }</span>
@@ -572,7 +592,7 @@ async function goToOutput(e, output) {
             <span class="label">block height</span>
             <span class="value" style="color: {feeColor};">{ numberFormat.format($detailTx.block.height) }</span>
           </div>
-        </div>
+        </a>
       {/if}
       {#if $detailTx.isCoinbase}
         <div class="pane fields">

client/src/controllers/TxController.js

@@ -8,6 +8,7 @@ import { FastVertexArray } from '../utils/memory.js'
 import { searchTx, fetchSpends, addSpends } from '../utils/search.js'
 import { overlay, txCount, mempoolCount, mempoolScreenHeight, blockVisible, currentBlock, selectedTx, detailTx, blockAreaSize, highlight, colorMode, blocksEnabled, latestBlockHeight, explorerBlockData, blockTransitionDirection, loading, urlPath } from '../stores.js'
 import config from "../config.js"
+import { tick } from 'svelte';
 
 export default class TxController {
   constructor ({ width, height }) {
@@ -188,6 +189,22 @@ export default class TxController {
 
     this.expiredTxs = {}
 
+    if (this.explorerBlockScene && this.explorerBlock && this.explorerBlock.id === block.id) {
+      this.block = this.explorerBlock
+      this.blockScene = this.explorerBlockScene
+      this.explorerBlockScene = null
+      this.explorerBlock = null
+      urlPath.set("/")
+
+      for (let i = 0; i < block.txns.length; i++) {
+        this.txs[block.txns[i].id].setData(block.txns[i])
+        this.poolScene.remove(block.txns[i].id)
+      }
+      this.poolScene.layoutAll()
+
+      return
+    }
+
     if (!this.explorerBlockScene) this.clearBlock()
 
     if (this.blocksEnabled) {
@@ -268,8 +285,14 @@ export default class TxController {
     return block
   }
 
-  exploreBlock (blockData) {
+  async exploreBlock (blockData) {
     const block = blockData.isBlock ? blockData : new BitcoinBlock(blockData)
+
+    if (this.block && this.block.id === block.id) {
+      this.showBlock()
+      return
+    }
+
     let enterFromRight = false
 
     // clean up previous block
@@ -311,10 +334,11 @@ export default class TxController {
     }
 
     blockVisible.set(true)
+    await tick()
     currentBlock.set(block)
   }
 
-  resumeLatest () {
+  async resumeLatest () {
     if (this.explorerBlock && this.explorerBlockScene) {
       const prevBlock = this.explorerBlock
       const prevBlockScene = this.explorerBlockScene
@@ -326,14 +350,16 @@ export default class TxController {
     }
     if (this.blockScene && this.block) {
       blockTransitionDirection.set('right')
+      await tick()
       this.blockScene.enterRight()
       currentBlock.set(this.block)
     }
   }
 
-  hideBlock () {
+  async hideBlock () {
     if (this.blockScene && !this.explorerBlockScene) {
       blockTransitionDirection.set(null)
+      await tick()
       this.blockScene.hide()
     }
   }

client/src/models/TxBlockScene.js

@@ -77,7 +77,7 @@ export default class TxBlockScene extends TxMondrianPoolScene {
       })
     }
 
-    this.savePixelsToScreenPosition(tx, 0, this.hidden ? 50 : 0)
+    this.savePixelsToScreenPosition(tx, 0, (this.hidden && !this.exited) ? 50 : 0)
     if (this.hidden) {
       tx.view.update({
         display: {
@@ -164,6 +164,7 @@ export default class TxBlockScene extends TxMondrianPoolScene {
 
   enter (right) {
     this.hidden = false
+    this.exited = false
     const ids = this.getActiveTxList()
     for (let i = 0; i < ids.length; i++) {
       this.enterTx(this.txs[ids[i]], right)
@@ -198,6 +199,7 @@ export default class TxBlockScene extends TxMondrianPoolScene {
 
   exit (right) {
     this.hidden = true
+    this.exited = true
     const ids = this.getActiveTxList()
     for (let i = 0; i < ids.length; i++) {
       this.exitTx(this.txs[ids[i]], right)

client/src/utils/search.js

@@ -226,6 +226,7 @@ export async function searchTx (txid, input, output) {
 
 export async function searchBlockHash (hash) {
   urlPath.set(`/block/${hash}`)
+  overlay.set(null)
   try {
     const searchResult = await fetchBlockByHash(hash)
     if (searchResult) {
@@ -244,6 +245,7 @@ export async function searchBlockHash (hash) {
 
 export async function searchBlockHeight (height) {
   urlPath.set(`/block/height/${height}`)
+  overlay.set(null)
   try {
     const searchResult = await fetchBlockByHeight(height)
     if (searchResult) {