Expand array limit when search result is beyond the visible items

src/JSONEditor.svelte

@@ -1,17 +1,22 @@
 <script>
   import { tick } from 'svelte'
-  import { EXPANDED_PROPERTY, SCROLL_DURATION } from './constants.js'
+  import {
+    DEFAULT_LIMIT,
+    EXPANDED_PROPERTY,
+    LIMIT_PROPERTY,
+    SCROLL_DURATION
+  } from './constants.js'
   import SearchBox from './SearchBox.svelte'
   import Icon from 'svelte-awesome'
   import { faSearch, faUndo, faRedo } from '@fortawesome/free-solid-svg-icons'
   import { createHistory } from './history.js'
   import Node from './JSONNode.svelte'
-  import { existsIn, setIn } from './utils/immutabilityHelpers.js'
+  import { existsIn, getIn, setIn } from './utils/immutabilityHelpers.js'
   import { compileJSONPointer } from './utils/jsonPointer.js'
   import { keyComboFromEvent } from './utils/keyBindings.js'
   import { flattenSearch, search } from './utils/search.js'
   import { immutableJSONPatch } from './utils/immutableJSONPatch'
-  import { isEqual } from 'lodash-es'
+  import { isEqual, isNumber } from 'lodash-es'
   import jump from './assets/jump.js/src/jump.js'
 
   let divContents
@@ -194,13 +199,33 @@
     state = setIn(state, path.concat(EXPANDED_PROPERTY), expanded)
   }
 
+  /**
+   * Change limit
+   * @param {Path} path
+   * @param {boolean} limit
+   */
+  function handleLimit (path, limit) {
+    state = setIn(state, path.concat(LIMIT_PROPERTY), limit)
+  }
+
   /**
    * Expand all nodes on given path
    * @param {Path} path
    */
   function expandPath (path) {
     for (let i = 1; i < path.length; i++) {
-      state = setIn(state, path.slice(0, i).concat(EXPANDED_PROPERTY), true)
+      const partialPath = path.slice(0, i)
+      state = setIn(state, partialPath.concat(EXPANDED_PROPERTY), true)
+
+      // if needed, enlarge the limit such that the search result becomes visible
+      const key = path[i]
+      if (isNumber(key)) {
+        const limit = getIn(state, partialPath.concat(LIMIT_PROPERTY)) || DEFAULT_LIMIT
+        if (key > limit) {
+          const newLimit = Math.ceil(key / DEFAULT_LIMIT) * DEFAULT_LIMIT
+          state = setIn(state, partialPath.concat(LIMIT_PROPERTY), newLimit)
+        }
+      }
     }
   }
 
@@ -299,6 +324,7 @@
       onChangeKey={handleChangeKey}
       onPatch={handlePatch}
       onExpand={handleExpand}
+      onLimit={handleLimit}
     />
     <div class='bottom'></div>
   </div>

src/JSONNode.svelte

@@ -1,6 +1,7 @@
 <script>
   import {
-    EXPANDED_PROPERTY,
+    DEBOUNCE_DELAY, DEFAULT_LIMIT,
+    EXPANDED_PROPERTY, LIMIT_PROPERTY,
     SEARCH_PROPERTY,
     SEARCH_VALUE
   } from './constants.js'
@@ -22,15 +23,13 @@
   export let onPatch
   export let onChangeKey
   export let onExpand
+  export let onLimit
 
   $: expanded = state && state[EXPANDED_PROPERTY]
+  $: limit = state && state[LIMIT_PROPERTY] || DEFAULT_LIMIT
 
-  const DEBOUNCE_DELAY = 300 // milliseconds TODO: make the debounce delay configurable?
-  const DEFAULT_LIMIT = 100
   const escapeUnicode = false // TODO: pass via options
 
-  let limit = DEFAULT_LIMIT
-
   let domKey 
   let domValue
 
@@ -208,7 +207,7 @@
   }
 
   function handleShowAll () {
-    limit = Infinity
+    onLimit(path, Infinity)
   }
 </script>
 
@@ -254,6 +253,7 @@
             onChangeKey={handleChangeKey}
             onPatch={onPatch}
             onExpand={onExpand}
+            onLimit={onLimit}
           />
         {/each}
         {#if limited}
@@ -307,6 +307,7 @@
             onChangeKey={handleChangeKey}
             onPatch={onPatch}
             onExpand={onExpand}
+            onLimit={onLimit}
           />
         {/each}
       </div>

src/SearchBox.svelte

@@ -2,10 +2,9 @@
   import { debounce } from 'lodash-es'
   import Icon from 'svelte-awesome'
   import { faSearch, faChevronDown, faChevronUp, faTimes } from '@fortawesome/free-solid-svg-icons'
+  import { DEBOUNCE_DELAY } from './constants.js'
   import { keyComboFromEvent } from './utils/keyBindings.js'
 
-  const DEBOUNCE_DELAY = 300 // milliseconds TODO: make the debounce delay configurable?
-
   export let text = ''
   let inputText = ''
   export let resultCount = 0

src/constants.js

@@ -1,6 +1,9 @@
 
 export const EXPANDED_PROPERTY = '$jse:expanded'
+export const LIMIT_PROPERTY = '$jse:limit'
 export const SEARCH_PROPERTY = '$jse:search:property'
 export const SEARCH_VALUE = '$jse:search:value'
 
 export const SCROLL_DURATION = 300 // ms
+export const DEBOUNCE_DELAY = 300
+export const DEFAULT_LIMIT = 100

src/utils/search.js

@@ -1,3 +1,4 @@
+import { isNumber } from 'lodash-es'
 import { SEARCH_PROPERTY, SEARCH_VALUE } from '../constants.js'
 import { valueType } from './typeUtils.js'
 
@@ -53,7 +54,7 @@ export function flattenSearch (searchResult) {
 
     const type = valueType(value)
     if (type === 'array') {
-      searchResult.forEach((item, index) => {
+      value.forEach((item, index) => {
         _flattenSearch(item, path.concat(index))
       })
     } else if (type === 'object') {
@@ -72,12 +73,18 @@ function createOrAdd(object, key, value) {
   if (object) {
     object[key] = value
     return object
+  } else {
+    if (isNumber(key)) {
+      const array = []
+      array[key] = value
+      return array
     } else {
       return {
         [key]: value
       }
     }
   }
+}
 
 /**
  * Do a case insensitive search for a search text in a text