From 523975f4cff0877d03bbb00df102ae24196175ea Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Mon, 2 Oct 2023 13:28:38 +0800
Subject: [PATCH 01/11] ZI-14702 jsoncrush urlstate

---
 package.json                        |  1 +
 src/components/hooks/useUrlState.js | 12 +++++++++---
 yarn.lock                           |  5 +++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index c228ef7..9e8c2d9 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "file-saver": "^2.0.5",
     "formik": "^2.2.6",
     "javascript-stringify": "^2.1.0",
+    "jsoncrush": "^1.1.8",
     "ka-table": "^7.1.3",
     "litepicker": "^2.0.11",
     "lodash.get": "^4.4.2",
diff --git a/src/components/hooks/useUrlState.js b/src/components/hooks/useUrlState.js
index 7a51c82..b6e9884 100644
--- a/src/components/hooks/useUrlState.js
+++ b/src/components/hooks/useUrlState.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
-
+import JSONCrush from "jsoncrush";
 import moment from "moment";
 
 export function useUrlState({ queryKey, defaultValue, disable = false }) {
@@ -21,10 +21,13 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
   const getQueryStringValue = useMemo(() => {
     const qs = new URLSearchParams(window.location.search);
     const pValue = qs.get(queryKey) || state || null
+    const uncrush = JSONCrush.uncrush(decodeURIComponent(window.location.search))?.substring(1);
+
     let convertedValue = pValue;
     if (pValue) {
       try {
-        convertedValue = JSON.parse(pValue);
+        const getParam = uncrush ? JSON.parse(uncrush) : {};    
+        convertedValue = JSON.parse(getParam?.[queryKey]);
         const calltype = Object.prototype.toString.call(convertedValue)
         if (calltype === '[object String]') {
           try {
@@ -57,7 +60,10 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
       }
       const newQs = new URLSearchParams(mergedValues);
       const newQsValue = newQs.toString()
-      setQueryString(`?${newQsValue}`);
+
+      const crushValue = JSONCrush.crush(JSON.stringify(mergedValues));
+
+      setQueryString(`?${crushValue}`);
       setState(returnValue);
     },
     [queryKey, setQueryString]
diff --git a/yarn.lock b/yarn.lock
index b83d7dd..e565095 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11192,6 +11192,11 @@ json5@^2.1.2, json5@^2.2.0, json5@^2.2.2:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+jsoncrush@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/jsoncrush/-/jsoncrush-1.1.8.tgz#5dd9389df1979592df8c89ab99ba69b029a030be"
+  integrity sha512-lvIMGzMUA0fjuqwNcxlTNRq2bibPZ9auqT/LyGdlR5hvydJtA/BasSgkx4qclqTKVeTidrJvsS/oVjlTCPQ4Nw==
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"

From cb44c00a521afc6a783a1ba03f438bc9ed1be630 Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Mon, 2 Oct 2023 14:11:11 +0800
Subject: [PATCH 02/11] ZI-14702 lzwa compression

---
 package.json                                |  1 +
 src/components/hooks/useUrlState.js         | 21 ++++---
 src/components/hooks/useUrlState.stories.js | 23 +++++---
 yarn.lock                                   | 65 ++++++++++++++++++++-
 4 files changed, 91 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 9e8c2d9..d8434e7 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "file-saver": "^2.0.5",
     "formik": "^2.2.6",
     "javascript-stringify": "^2.1.0",
+    "json-url": "^3.1.0",
     "jsoncrush": "^1.1.8",
     "ka-table": "^7.1.3",
     "litepicker": "^2.0.11",
diff --git a/src/components/hooks/useUrlState.js b/src/components/hooks/useUrlState.js
index b6e9884..f46c270 100644
--- a/src/components/hooks/useUrlState.js
+++ b/src/components/hooks/useUrlState.js
@@ -1,11 +1,12 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import JSONCrush from "jsoncrush";
+import _JSONUrl from "json-url";
 import moment from "moment";
 
 export function useUrlState({ queryKey, defaultValue, disable = false }) {
+  const JSONUrl = _JSONUrl('lzma');
   const [state, setState] = useState(defaultValue);
   const ref = useRef(state);
-
+  const [url, setUrl] = useState('');
   const setQueryString = useCallback((qsValue) => {
     const newurl =
       window.location.protocol +
@@ -13,19 +14,22 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
       window.location.host +
       window.location.pathname +
       qsValue;
+    setUrl(newurl)
     if (!disable) {
       window?.history?.replaceState({ path: newurl }, "", newurl);
     }
   }, [disable]);
 
-  const getQueryStringValue = useMemo(() => {
+  const getQueryStringValue = useMemo(
+    async () => {
     const qs = new URLSearchParams(window.location.search);
     const pValue = qs.get(queryKey) || state || null
-    const uncrush = JSONCrush.uncrush(decodeURIComponent(window.location.search))?.substring(1);
-
+    // const uncrush = JSONCrush.uncrush(decodeURIComponent(window.location.search))?.substring(1);
+    
     let convertedValue = pValue;
     if (pValue) {
       try {
+        const uncrush = await JSONUrl.decompress(window.location.search.substring(1))
         const getParam = uncrush ? JSON.parse(uncrush) : {};    
         convertedValue = JSON.parse(getParam?.[queryKey]);
         const calltype = Object.prototype.toString.call(convertedValue)
@@ -45,7 +49,7 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
   }, [queryKey, state]);
 
   const dispatchFromUrl = useCallback(
-    function (val) {
+    async function (val) {
       const returnValue = typeof val === "function" ? val(ref.current) : val;
       const parsedValue = typeof returnValue === "object" ? JSON.stringify(returnValue) : returnValue;
 
@@ -61,7 +65,8 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
       const newQs = new URLSearchParams(mergedValues);
       const newQsValue = newQs.toString()
 
-      const crushValue = JSONCrush.crush(JSON.stringify(mergedValues));
+      // const crushValue = JSONCrush.crush(JSON.stringify(mergedValues));
+      const crushValue = await JSONUrl.compress(JSON.stringify(mergedValues));
 
       setQueryString(`?${crushValue}`);
       setState(returnValue);
@@ -78,6 +83,6 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
   if (disable) {
     return [state, dispatch, ref]
   } else {
-    return [getQueryStringValue, dispatchFromUrl, ref];
+    return [getQueryStringValue, dispatchFromUrl, ref, url];
   }
 }
diff --git a/src/components/hooks/useUrlState.stories.js b/src/components/hooks/useUrlState.stories.js
index fc272ed..8a9abf2 100644
--- a/src/components/hooks/useUrlState.stories.js
+++ b/src/components/hooks/useUrlState.stories.js
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { action, actions } from "@storybook/addon-actions";
 
 import ReactJsonView from 'react-json-view';
-import { TextField } from "@mui/material";
+import { TextField, Typography } from "@mui/material";
 import { DateTimeRangePicker } from "../DateTimeRangePicker";
 import { useUrlState } from "./useUrlState";
 
@@ -13,7 +13,7 @@ const useURLStateStory = {
 export default useURLStateStory;
 
 export const Default = ({ ...args }) => {
-  const [queryTerm, setQueryTerm, queryTermRef] = useUrlState({queryKey:'queryTerm'});
+  const [queryTerm, setQueryTerm, queryTermRef, url] = useUrlState({queryKey:'queryTerm'});
   return (
     <div>
       <TextField
@@ -22,12 +22,13 @@ export const Default = ({ ...args }) => {
         value={queryTerm}
         onChange={(e) => setQueryTerm(e.target.value)} />
       {queryTerm}
+      <Typography variant='subtitle2'>{url}</Typography>
     </div>
   );
 };
 
 export const Disable = ({ ...args }) => {
-  const [queryTerm, setQueryTerm, queryTermRef] = useUrlState({queryKey:'queryTerm', disable: true});
+  const [queryTerm, setQueryTerm, queryTermRef, url] = useUrlState({queryKey:'queryTerm', disable: true});
   return (
     <div>
       <TextField
@@ -36,13 +37,14 @@ export const Disable = ({ ...args }) => {
         value={queryTerm}
         onChange={(e) => setQueryTerm(e.target.value)} />
       {queryTerm}
+      <Typography variant='subtitle2'>{url}</Typography>
     </div>
   );
 };
 
 export const Multiple = ({ ...args }) => {
-  const [queryTerm, setQueryTerm, queryTermRef] = useUrlState({queryKey:'queryTerm'});
-  const [queryTerm2, setQueryTerm2, queryTerm2Ref] = useUrlState({queryKey:'queryTerm2'});
+  const [queryTerm, setQueryTerm, queryTermRef, url] = useUrlState({queryKey:'queryTerm'});
+  const [queryTerm2, setQueryTerm2, queryTerm2Ref, url2] = useUrlState({queryKey:'queryTerm2'});
   useEffect(() => {
     console.log('should only be called once per load', queryTerm, queryTerm2)
   }, [queryTerm, queryTerm2]);
@@ -59,12 +61,14 @@ export const Multiple = ({ ...args }) => {
         value={queryTerm2}
         onChange={(e) => setQueryTerm2(e.target.value)} />
       <ReactJsonView src={{queryTerm, queryTerm2}}/>
+      <Typography variant='subtitle2'>{url}</Typography>
+      <Typography variant='subtitle2'>{url2}</Typography>
     </div>
   );
 };
 
 export const JSON = ({ ...args }) => {
-  const [queryTerm, setQueryTerm, queryTermRef] = useUrlState({queryKey:'jsonTerm'});
+  const [queryTerm, setQueryTerm, queryTermRef, url] = useUrlState({queryKey:'jsonTerm'});
   return (
     <div>
       <TextField
@@ -73,27 +77,30 @@ export const JSON = ({ ...args }) => {
         value={queryTerm?.wrap?.value}
         onChange={(e) => setQueryTerm({ wrap: { value: e.target.value } })} />
       <ReactJsonView src={{ queryTerm }} />
+      <Typography variant='subtitle2'>{url}</Typography>
     </div>
   );
 }
 
 export const DateRange = ({ ...args }) => {
-  const [queryTerm, setQueryTerm, queryTermRef] = useUrlState({queryKey:'dateRangeTerm'});
+  const [queryTerm, setQueryTerm, queryTermRef, url] = useUrlState({queryKey:'dateRangeTerm'});
   return (
     <div>
       <DateTimeRangePicker value={queryTerm} onChange={v => setQueryTerm(v)} />
       <ReactJsonView src={{ queryTerm }} />
+      <Typography variant='subtitle2'>{url}</Typography>
     </div>
   )
 }
 export const Date = ({ ...args }) => {
-  const [queryTerm, setQueryTerm, queryTermRef] = useUrlState({queryKey:'dateTerm'});
+  const [queryTerm, setQueryTerm, queryTermRef, url] = useUrlState({queryKey:'dateTerm'});
   return (
     <div>
       <input type={"date"} value={queryTerm} onChange={v => {
         setQueryTerm(v.target.value)
       }} />
       <ReactJsonView src={{ queryTerm }} />
+      <Typography variant='subtitle2'>{url}</Typography>
     </div>
   )
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index e565095..5f04a70 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1093,6 +1093,14 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
+"@babel/runtime-corejs2@^7.0.0":
+  version "7.23.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.23.1.tgz#f3a25c24d455be4e0309a56e56f0d2ef1a91c567"
+  integrity sha512-eY39r8IIgbcDfILJqsflwMImjccvK3QdgBRKo5v6lDPd5SiAsyfl3SJuAYWJ5hgbz7kfQmZ9ueirnhq0e9176Q==
+  dependencies:
+    core-js "^2.6.12"
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.18.9", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200"
@@ -6304,6 +6312,14 @@ binjumper@^0.1.4:
   resolved "https://registry.yarnpkg.com/binjumper/-/binjumper-0.1.4.tgz#4acc0566832714bd6508af6d666bd9e5e21fc7f8"
   integrity sha512-Gdxhj+U295tIM6cO4bJO1jsvSjBVHNpj2o/OwW7pqDEtaqF6KdOxjtbo93jMMKAkP7+u09+bV8DhSqjIv4qR3w==
 
+bl@^2.0.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-2.2.1.tgz#8c11a7b730655c5d56898cdc871224f40fd901d5"
+  integrity sha512-6Pesp1w0DEX1N550i/uGV/TqucVL4AM/pgThFSN/Qq9si1/DF9aIHs1BxD8V/QU0HoeHO6cQRTAuYnLPKq1e4g==
+  dependencies:
+    readable-stream "^2.3.5"
+    safe-buffer "^5.1.1"
+
 bl@^4.0.3, bl@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -6313,7 +6329,7 @@ bl@^4.0.3, bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
-bluebird@^3.5.5:
+bluebird@^3.0.6, bluebird@^3.5.5:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -7140,7 +7156,7 @@ core-js-pure@^3.23.3:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.30.1.tgz#7d93dc89e7d47b8ef05d7e79f507b0e99ea77eec"
   integrity sha512-nXBEVpmUnNRhz83cHd9JRQC52cTMcuXAmR56+9dSMpRdpeA4I1PX6yjmhd71Eyc/wXNsdBdUDIj1QTIeZpU5Tg==
 
-core-js@^2.4.0:
+core-js@^2.4.0, core-js@^2.6.12:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
@@ -11180,6 +11196,19 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+json-url@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/json-url/-/json-url-3.1.0.tgz#dcd70a19eb098d88bd00917b3253e414f434f0dc"
+  integrity sha512-fhmtxBOQYJCshMV/omtzjBLv0ruLBz4dt+28y2+959fM45Oc8s+uL1jdLu/4yGeKATylgV022gAPfxCwQ5KgFA==
+  dependencies:
+    "@babel/runtime-corejs2" "^7.0.0"
+    bluebird "^3.0.6"
+    lz-string "^1.4.4"
+    lzma "^2.3.2"
+    msgpack5 "^4.2.1"
+    node-lzw "^0.3.1"
+    urlsafe-base64 "^1.0.0"
+
 json5@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
@@ -11671,6 +11700,11 @@ lz-string@^1.4.4:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
+lzma@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/lzma/-/lzma-2.3.2.tgz#3783b24858b9c0e747a0df3cbf1fb5fcaa92c441"
+  integrity sha512-DcfiawQ1avYbW+hsILhF38IKAlnguc/fjHrychs9hdxe4qLykvhT5VTGNs5YRWgaNePh7NTxGD4uv4gKsRomCQ==
+
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@@ -12396,6 +12430,16 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+msgpack5@^4.2.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/msgpack5/-/msgpack5-4.5.1.tgz#2da4dba4ea20c09fd4309c9c04f046e38cb4975e"
+  integrity sha512-zC1vkcliryc4JGlL6OfpHumSYUHWFGimSI+OgfRCjTFLmKA2/foR9rMTOhWiqfOrfxJOctrpWPvrppf8XynJxw==
+  dependencies:
+    bl "^2.0.1"
+    inherits "^2.0.3"
+    readable-stream "^2.3.6"
+    safe-buffer "^5.1.2"
+
 multicast-dns@^7.2.5:
   version "7.2.5"
   resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
@@ -12516,6 +12560,11 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
 
+node-lzw@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/node-lzw/-/node-lzw-0.3.1.tgz#f50e37968976aca83320028b91f101df4a436b2d"
+  integrity sha512-BGjQRR92HJsEsm1Ebp3Qvn2Jq+tlXEGY8zorNdal+FxOWpLMyyZBHoQWeyOc/TxsCzCvGbcCG4mU0u/RBSWxjQ==
+
 node-polyfill-webpack-plugin@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/node-polyfill-webpack-plugin/-/node-polyfill-webpack-plugin-2.0.1.tgz#141d86f177103a8517c71d99b7c6a46edbb1bb58"
@@ -14618,7 +14667,7 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.2.2, readable-stream@^2.3.5, readable-stream@~2.3.6:
+readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.2.2, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
   integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
@@ -14738,6 +14787,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.7, regenerator-runtime@^
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.15.1:
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
@@ -16576,6 +16630,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+urlsafe-base64@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/urlsafe-base64/-/urlsafe-base64-1.0.0.tgz#23f89069a6c62f46cf3a1d3b00169cefb90be0c6"
+  integrity sha512-RtuPeMy7c1UrHwproMZN9gN6kiZ0SvJwRaEzwZY0j9MypEkFqyBaKv176jvlPtg58Zh36bOkS0NFABXMHvvGCA==
+
 use-composed-ref@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"

From 287b57028e05f76cbe63dba121692d7d3d09a950 Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Mon, 2 Oct 2023 14:32:59 +0800
Subject: [PATCH 03/11] ZI-14702 lzwa compression async

---
 src/components/hooks/useUrlState.js | 38 +++++++++++++++++------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/components/hooks/useUrlState.js b/src/components/hooks/useUrlState.js
index f46c270..3948b09 100644
--- a/src/components/hooks/useUrlState.js
+++ b/src/components/hooks/useUrlState.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import _JSONUrl from "json-url";
 import moment from "moment";
 
@@ -7,6 +7,8 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
   const [state, setState] = useState(defaultValue);
   const ref = useRef(state);
   const [url, setUrl] = useState('');
+  const [qsValue, setQsValue] = useState();
+
   const setQueryString = useCallback((qsValue) => {
     const newurl =
       window.location.protocol +
@@ -20,18 +22,19 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
     }
   }, [disable]);
 
-  const getQueryStringValue = useMemo(
+  const getQueryStringValue = useCallback(
     async () => {
     const qs = new URLSearchParams(window.location.search);
     const pValue = qs.get(queryKey) || state || null
     // const uncrush = JSONCrush.uncrush(decodeURIComponent(window.location.search))?.substring(1);
     
-    let convertedValue = pValue;
+    let convertedValue = '';
+    let getParam = ''
     if (pValue) {
       try {
-        const uncrush = await JSONUrl.decompress(window.location.search.substring(1))
-        const getParam = uncrush ? JSON.parse(uncrush) : {};    
-        convertedValue = JSON.parse(getParam?.[queryKey]);
+        const uncrush = await JSONUrl.decompress(pValue)
+        getParam = uncrush ? JSON.parse(uncrush) : {};    
+        convertedValue = JSON.parse(getParam);
         const calltype = Object.prototype.toString.call(convertedValue)
         if (calltype === '[object String]') {
           try {
@@ -41,17 +44,24 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
           }
         }
       } catch (error) {
-        convertedValue = pValue;
+        convertedValue = getParam;
       }
       ref.current = convertedValue;
     }
-    return ref.current;
-  }, [queryKey, state]);
+    setQsValue(convertedValue);
+  }, [JSONUrl, queryKey, state]);
+  
+  useEffect(
+    () => {
+      getQueryStringValue()
+    }, [window?.location?.search]
+  );
 
   const dispatchFromUrl = useCallback(
     async function (val) {
       const returnValue = typeof val === "function" ? val(ref.current) : val;
       const parsedValue = typeof returnValue === "object" ? JSON.stringify(returnValue) : returnValue;
+      const crushValue = await JSONUrl.compress(JSON.stringify(parsedValue));
 
       const qs = new URLSearchParams(window.location.search);
       let values = {};
@@ -60,15 +70,11 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
       }
       const mergedValues = {
         ...values,
-        [queryKey]: parsedValue
+        [queryKey]: crushValue
       }
       const newQs = new URLSearchParams(mergedValues);
       const newQsValue = newQs.toString()
-
-      // const crushValue = JSONCrush.crush(JSON.stringify(mergedValues));
-      const crushValue = await JSONUrl.compress(JSON.stringify(mergedValues));
-
-      setQueryString(`?${crushValue}`);
+      setQueryString(`?${newQsValue}`);
       setState(returnValue);
     },
     [queryKey, setQueryString]
@@ -83,6 +89,6 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
   if (disable) {
     return [state, dispatch, ref]
   } else {
-    return [getQueryStringValue, dispatchFromUrl, ref, url];
+    return [qsValue, dispatchFromUrl, ref, url];
   }
 }

From 44cf5ecd44393c2a159e6a5c33ef603dbaf6253d Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Mon, 2 Oct 2023 14:39:24 +0800
Subject: [PATCH 04/11] ZI-14702 no op on w.l.s

---
 src/components/hooks/useUrlState.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/hooks/useUrlState.js b/src/components/hooks/useUrlState.js
index 3948b09..558b804 100644
--- a/src/components/hooks/useUrlState.js
+++ b/src/components/hooks/useUrlState.js
@@ -24,9 +24,9 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
 
   const getQueryStringValue = useCallback(
     async () => {
-    const qs = new URLSearchParams(window.location.search);
+    const qs = new URLSearchParams(window?.location?.search);
     const pValue = qs.get(queryKey) || state || null
-    // const uncrush = JSONCrush.uncrush(decodeURIComponent(window.location.search))?.substring(1);
+    // const uncrush = JSONCrush.uncrush(decodeURIComponent(window?.location?.search))?.substring(1);
     
     let convertedValue = '';
     let getParam = ''
@@ -63,7 +63,7 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
       const parsedValue = typeof returnValue === "object" ? JSON.stringify(returnValue) : returnValue;
       const crushValue = await JSONUrl.compress(JSON.stringify(parsedValue));
 
-      const qs = new URLSearchParams(window.location.search);
+      const qs = new URLSearchParams(window?.location?.search);
       let values = {};
       for (var value of qs.keys()) {
         values[value] = qs.get(value);

From a097579bdade09fb07a61727f9cb440b45ca8ffc Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Mon, 2 Oct 2023 15:10:24 +0800
Subject: [PATCH 05/11] ZI-14702 crushcomparison

---
 package.json                                |  1 +
 src/components/hooks/useUrlState.js         |  9 ++++++++-
 src/components/hooks/useUrlState.stories.js | 17 +++++------------
 yarn.lock                                   |  5 +++++
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index d8434e7..1aacda2 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "file-saver": "^2.0.5",
     "formik": "^2.2.6",
     "javascript-stringify": "^2.1.0",
+    "js-base64": "^3.7.5",
     "json-url": "^3.1.0",
     "jsoncrush": "^1.1.8",
     "ka-table": "^7.1.3",
diff --git a/src/components/hooks/useUrlState.js b/src/components/hooks/useUrlState.js
index 558b804..0de55c7 100644
--- a/src/components/hooks/useUrlState.js
+++ b/src/components/hooks/useUrlState.js
@@ -1,6 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import _JSONUrl from "json-url";
+import JSONCrush from "jsoncrush";
 import moment from "moment";
+import { base64ArrayBuffer } from "../DocumentGallery/b64util";
+import { encode } from "js-base64";
 
 export function useUrlState({ queryKey, defaultValue, disable = false }) {
   const JSONUrl = _JSONUrl('lzma');
@@ -16,7 +19,6 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
       window.location.host +
       window.location.pathname +
       qsValue;
-    setUrl(newurl)
     if (!disable) {
       window?.history?.replaceState({ path: newurl }, "", newurl);
     }
@@ -63,6 +65,11 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
       const parsedValue = typeof returnValue === "object" ? JSON.stringify(returnValue) : returnValue;
       const crushValue = await JSONUrl.compress(JSON.stringify(parsedValue));
 
+      setUrl({
+        LZMA_compression: await JSONUrl.compress(JSON.stringify(parsedValue)),
+        JS_Crush: JSONCrush.crush(JSON.stringify(parsedValue)),
+        B64: encode(JSON.stringify(parsedValue)),
+      })
       const qs = new URLSearchParams(window?.location?.search);
       let values = {};
       for (var value of qs.keys()) {
diff --git a/src/components/hooks/useUrlState.stories.js b/src/components/hooks/useUrlState.stories.js
index 8a9abf2..479c076 100644
--- a/src/components/hooks/useUrlState.stories.js
+++ b/src/components/hooks/useUrlState.stories.js
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { action, actions } from "@storybook/addon-actions";
 
 import ReactJsonView from 'react-json-view';
-import { TextField, Typography } from "@mui/material";
+import { TextField } from "@mui/material";
 import { DateTimeRangePicker } from "../DateTimeRangePicker";
 import { useUrlState } from "./useUrlState";
 
@@ -22,7 +22,6 @@ export const Default = ({ ...args }) => {
         value={queryTerm}
         onChange={(e) => setQueryTerm(e.target.value)} />
       {queryTerm}
-      <Typography variant='subtitle2'>{url}</Typography>
     </div>
   );
 };
@@ -37,7 +36,6 @@ export const Disable = ({ ...args }) => {
         value={queryTerm}
         onChange={(e) => setQueryTerm(e.target.value)} />
       {queryTerm}
-      <Typography variant='subtitle2'>{url}</Typography>
     </div>
   );
 };
@@ -60,9 +58,7 @@ export const Multiple = ({ ...args }) => {
         label="Query Term 2"
         value={queryTerm2}
         onChange={(e) => setQueryTerm2(e.target.value)} />
-      <ReactJsonView src={{queryTerm, queryTerm2}}/>
-      <Typography variant='subtitle2'>{url}</Typography>
-      <Typography variant='subtitle2'>{url2}</Typography>
+      <ReactJsonView src={{queryTerm, queryTerm2, url}}/>
     </div>
   );
 };
@@ -76,8 +72,7 @@ export const JSON = ({ ...args }) => {
         label="Query Term"
         value={queryTerm?.wrap?.value}
         onChange={(e) => setQueryTerm({ wrap: { value: e.target.value } })} />
-      <ReactJsonView src={{ queryTerm }} />
-      <Typography variant='subtitle2'>{url}</Typography>
+      <ReactJsonView src={{ queryTerm, url }} />
     </div>
   );
 }
@@ -87,8 +82,7 @@ export const DateRange = ({ ...args }) => {
   return (
     <div>
       <DateTimeRangePicker value={queryTerm} onChange={v => setQueryTerm(v)} />
-      <ReactJsonView src={{ queryTerm }} />
-      <Typography variant='subtitle2'>{url}</Typography>
+      <ReactJsonView src={{ queryTerm, url }} />
     </div>
   )
 }
@@ -99,8 +93,7 @@ export const Date = ({ ...args }) => {
       <input type={"date"} value={queryTerm} onChange={v => {
         setQueryTerm(v.target.value)
       }} />
-      <ReactJsonView src={{ queryTerm }} />
-      <Typography variant='subtitle2'>{url}</Typography>
+      <ReactJsonView src={{ queryTerm, url }} />
     </div>
   )
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 5f04a70..4df8001 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11042,6 +11042,11 @@ jiti@^1.18.2:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
   integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
 
+js-base64@^3.7.5:
+  version "3.7.5"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.5.tgz#21e24cf6b886f76d6f5f165bfcd69cc55b9e3fca"
+  integrity sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==
+
 js-beautify@^1.8.9:
   version "1.14.7"
   resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.14.7.tgz#9206296de33f86dc106d3e50a35b7cf8729703b2"

From 6e96f1574411fd9d2679f69b4b58f3288583d6fe Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Mon, 2 Oct 2023 15:24:33 +0800
Subject: [PATCH 06/11] ZI-14702 add crushencoding option

---
 src/components/hooks/useUrlState.js | 44 +++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/hooks/useUrlState.js b/src/components/hooks/useUrlState.js
index 0de55c7..38923bc 100644
--- a/src/components/hooks/useUrlState.js
+++ b/src/components/hooks/useUrlState.js
@@ -3,9 +3,14 @@ import _JSONUrl from "json-url";
 import JSONCrush from "jsoncrush";
 import moment from "moment";
 import { base64ArrayBuffer } from "../DocumentGallery/b64util";
-import { encode } from "js-base64";
+import { Base64 } from "js-base64";
 
-export function useUrlState({ queryKey, defaultValue, disable = false }) {
+const ENCODE_TYPES = {
+  crush: 'crush',
+  b64: 'b64',
+  lzma: 'lzma',
+}
+export function useUrlState({ queryKey, defaultValue, disable = false, encode=ENCODE_TYPES.crush }) {
   const JSONUrl = _JSONUrl('lzma');
   const [state, setState] = useState(defaultValue);
   const ref = useRef(state);
@@ -32,9 +37,22 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
     
     let convertedValue = '';
     let getParam = ''
+    let uncrush = '';
     if (pValue) {
       try {
-        const uncrush = await JSONUrl.decompress(pValue)
+        switch (encode) {
+          case ENCODE_TYPES.crush:
+            uncrush = JSONCrush.uncrush(decodeURIComponent(pValue))
+            break;
+          case ENCODE_TYPES.b64:
+            uncrush = Base64.decode(pValue)
+            break;
+          case ENCODE_TYPES.lzma:
+            uncrush = await JSONUrl.decompress(pValue)
+            break;
+          default:
+            break;
+        }
         getParam = uncrush ? JSON.parse(uncrush) : {};    
         convertedValue = JSON.parse(getParam);
         const calltype = Object.prototype.toString.call(convertedValue)
@@ -61,14 +79,28 @@ export function useUrlState({ queryKey, defaultValue, disable = false }) {
 
   const dispatchFromUrl = useCallback(
     async function (val) {
+      const JSONUrl = _JSONUrl('lzma');
       const returnValue = typeof val === "function" ? val(ref.current) : val;
       const parsedValue = typeof returnValue === "object" ? JSON.stringify(returnValue) : returnValue;
-      const crushValue = await JSONUrl.compress(JSON.stringify(parsedValue));
-
+      let crushValue = '';
+      switch (encode) {
+        case ENCODE_TYPES.crush:
+          crushValue = JSONCrush.crush(parsedValue)
+          break;
+        case ENCODE_TYPES.b64:
+          crushValue = Base64.encode(JSON.stringify(parsedValue))
+          break;
+        case ENCODE_TYPES.lzma:
+          crushValue = await JSONUrl.compress(JSON.stringify(parsedValue))
+          break;
+        default:
+          break;
+      }
+      
       setUrl({
         LZMA_compression: await JSONUrl.compress(JSON.stringify(parsedValue)),
         JS_Crush: JSONCrush.crush(JSON.stringify(parsedValue)),
-        B64: encode(JSON.stringify(parsedValue)),
+        B64: Base64.encode(JSON.stringify(parsedValue)),
       })
       const qs = new URLSearchParams(window?.location?.search);
       let values = {};

From 6d27982f4d09e9aa03042ebf34d5ad131603f2ee Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Mon, 2 Oct 2023 15:36:24 +0800
Subject: [PATCH 07/11] ZI-14702 encoding revealed an internal infinite loop

---
 src/components/VirtuosoDataGrid/DataGridToolbar.jsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/VirtuosoDataGrid/DataGridToolbar.jsx b/src/components/VirtuosoDataGrid/DataGridToolbar.jsx
index a04cf15..5f58ca6 100644
--- a/src/components/VirtuosoDataGrid/DataGridToolbar.jsx
+++ b/src/components/VirtuosoDataGrid/DataGridToolbar.jsx
@@ -151,21 +151,15 @@ const DataGridToolbar = ({
 
   const [dataGridState, dataGridDispatch] = useContext(DataGridContext);
 
-  const [filterValues, setFilterValues] = useUrlState({ queryKey: `${gridId}-filters`, disable: !useUrlAsState });
   const [filterDisplay, setFilterDisplay] = useState({});
-
-  const [searchField, setSearchField] = useState("");
-
-  useEffect(() => {
-    setSearchField(filterValues?.search);
-  }, [filterValues?.search]);
-
+  
+  
+  const [filterValues, setFilterValues] = useUrlState({ queryKey: `${gridId}-filters`, disable: !useUrlAsState });
 
   const changeFilter = useCallback(
     debounce((filterKey, filterValue) => {
       const filterV = { ...filterValues, [filterKey]: filterValue }
       setFilterValues(filterV);
-      // setSearchField(filterV?.search ?? "")
       onFilterChange(filterV)
     }, 500),
     [filterValues],

From 0d9ed32576019644216c160001b410577e7ddbd4 Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Mon, 2 Oct 2023 16:14:12 +0800
Subject: [PATCH 08/11] ZI-14702 test: is uriencoding even needed

---
 package.json                        |  2 +-
 src/components/hooks/useUrlState.js | 96 ++++++++++++++++-------------
 yarn.lock                           | 10 +--
 3 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index 1aacda2..1859f48 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "javascript-stringify": "^2.1.0",
     "js-base64": "^3.7.5",
     "json-url": "^3.1.0",
-    "jsoncrush": "^1.1.8",
+    "jsoncrush": "1.1.6",
     "ka-table": "^7.1.3",
     "litepicker": "^2.0.11",
     "lodash.get": "^4.4.2",
diff --git a/src/components/hooks/useUrlState.js b/src/components/hooks/useUrlState.js
index 38923bc..9a6c145 100644
--- a/src/components/hooks/useUrlState.js
+++ b/src/components/hooks/useUrlState.js
@@ -10,7 +10,7 @@ const ENCODE_TYPES = {
   b64: 'b64',
   lzma: 'lzma',
 }
-export function useUrlState({ queryKey, defaultValue, disable = false, encode=ENCODE_TYPES.crush }) {
+export function useUrlState({ queryKey, defaultValue, disable = false, encode = ENCODE_TYPES.crush }) {
   const JSONUrl = _JSONUrl('lzma');
   const [state, setState] = useState(defaultValue);
   const ref = useRef(state);
@@ -31,46 +31,46 @@ export function useUrlState({ queryKey, defaultValue, disable = false, encode=EN
 
   const getQueryStringValue = useCallback(
     async () => {
-    const qs = new URLSearchParams(window?.location?.search);
-    const pValue = qs.get(queryKey) || state || null
-    // const uncrush = JSONCrush.uncrush(decodeURIComponent(window?.location?.search))?.substring(1);
-    
-    let convertedValue = '';
-    let getParam = ''
-    let uncrush = '';
-    if (pValue) {
-      try {
-        switch (encode) {
-          case ENCODE_TYPES.crush:
-            uncrush = JSONCrush.uncrush(decodeURIComponent(pValue))
-            break;
-          case ENCODE_TYPES.b64:
-            uncrush = Base64.decode(pValue)
-            break;
-          case ENCODE_TYPES.lzma:
-            uncrush = await JSONUrl.decompress(pValue)
-            break;
-          default:
-            break;
-        }
-        getParam = uncrush ? JSON.parse(uncrush) : {};    
-        convertedValue = JSON.parse(getParam);
-        const calltype = Object.prototype.toString.call(convertedValue)
-        if (calltype === '[object String]') {
-          try {
-            const isDate = moment(new Date(convertedValue)).isValid();
-            convertedValue = isDate ? moment(convertedValue).toDate() : convertedValue;
-          } catch (dateparseError) {
+      const qs = new URLSearchParams(window?.location?.search);
+      const pValue = qs.get(queryKey) || state || null
+      // const uncrush = JSONCrush.uncrush(decodeURIComponent(window?.location?.search))?.substring(1);
+
+      let convertedValue = '';
+      let getParam = ''
+      let uncrush = '';
+      if (pValue) {
+        try {
+          switch (encode) {
+            case ENCODE_TYPES.crush:
+              uncrush = JSONCrush.uncrush(decodeURIComponent(pValue))
+              break;
+            case ENCODE_TYPES.b64:
+              uncrush = Base64.decode(pValue)
+              break;
+            case ENCODE_TYPES.lzma:
+              uncrush = await JSONUrl.decompress(pValue)
+              break;
+            default:
+              break;
+          }
+          getParam = uncrush ? JSON.parse(uncrush) : {};
+          convertedValue = JSON.parse(getParam);
+          const calltype = Object.prototype.toString.call(convertedValue)
+          if (calltype === '[object String]') {
+            try {
+              const isDate = moment(new Date(convertedValue)).isValid();
+              convertedValue = isDate ? moment(convertedValue).toDate() : convertedValue;
+            } catch (dateparseError) {
+            }
           }
+        } catch (error) {
+          convertedValue = getParam;
         }
-      } catch (error) {
-        convertedValue = getParam;
+        ref.current = convertedValue;
       }
-      ref.current = convertedValue;
-    }
-    setQsValue(convertedValue);
-  }, [JSONUrl, queryKey, state]);
-  
+      setQsValue(convertedValue);
+    }, [JSONUrl, queryKey, state]);
+
   useEffect(
     () => {
       getQueryStringValue()
@@ -96,11 +96,20 @@ export function useUrlState({ queryKey, defaultValue, disable = false, encode=EN
         default:
           break;
       }
-      
+
       setUrl({
-        LZMA_compression: await JSONUrl.compress(JSON.stringify(parsedValue)),
-        JS_Crush: JSONCrush.crush(JSON.stringify(parsedValue)),
-        B64: Base64.encode(JSON.stringify(parsedValue)),
+        LZMA_compression: {
+          raw: await JSONUrl.compress(JSON.stringify(parsedValue)),
+          urlencoded: new URLSearchParams(await JSONUrl.compress(JSON.stringify(parsedValue)))?.toString(),
+        },
+        JS_Crush: {
+          raw: JSONCrush.crush(JSON.stringify(parsedValue)),
+          urlencoded: new URLSearchParams(JSONCrush.crush(JSON.stringify(parsedValue)))?.toString(),
+        },
+        B64: {
+          raw: Base64.encode(JSON.stringify(parsedValue)),
+          urlencoded: new URLSearchParams(Base64.encode(JSON.stringify(parsedValue)))?.toString(),
+        },
       })
       const qs = new URLSearchParams(window?.location?.search);
       let values = {};
@@ -113,7 +122,8 @@ export function useUrlState({ queryKey, defaultValue, disable = false, encode=EN
       }
       const newQs = new URLSearchParams(mergedValues);
       const newQsValue = newQs.toString()
-      setQueryString(`?${newQsValue}`);
+      // setQueryString(`?${newQsValue}`);
+      setQueryString(JSON.stringify(mergedValues))
       setState(returnValue);
     },
     [queryKey, setQueryString]
diff --git a/yarn.lock b/yarn.lock
index 4df8001..d5f2d9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11201,7 +11201,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
-json-url@^3.1.0:
+json-url@^3.1.:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/json-url/-/json-url-3.1.0.tgz#dcd70a19eb098d88bd00917b3253e414f434f0dc"
   integrity sha512-fhmtxBOQYJCshMV/omtzjBLv0ruLBz4dt+28y2+959fM45Oc8s+uL1jdLu/4yGeKATylgV022gAPfxCwQ5KgFA==
@@ -11226,10 +11226,10 @@ json5@^2.1.2, json5@^2.2.0, json5@^2.2.2:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-jsoncrush@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/jsoncrush/-/jsoncrush-1.1.8.tgz#5dd9389df1979592df8c89ab99ba69b029a030be"
-  integrity sha512-lvIMGzMUA0fjuqwNcxlTNRq2bibPZ9auqT/LyGdlR5hvydJtA/BasSgkx4qclqTKVeTidrJvsS/oVjlTCPQ4Nw==
+jsoncrush@1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/jsoncrush/-/jsoncrush-1.1.6.tgz#37efda77124746fd6e1e0a0e8692dbd0b79272a6"
+  integrity sha512-oLNi8zgT872yK7BBNM9r2Q3BAUf8Uuq+fbP0KZU5GISA87thlzHRqWkk3FcetUmMeW7MrPNLPtpZ0h/AZFFrNw==
 
 jsonfile@^6.0.1:
   version "6.1.0"

From 6661970cd39d5c9d54eb87276a2ed1ff7457ddff Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Mon, 2 Oct 2023 16:28:32 +0800
Subject: [PATCH 09/11] ZI-14702 isolate querykey values from generated
 querystring

---
 src/components/hooks/useUrlState.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/hooks/useUrlState.js b/src/components/hooks/useUrlState.js
index 9a6c145..2554e2c 100644
--- a/src/components/hooks/useUrlState.js
+++ b/src/components/hooks/useUrlState.js
@@ -4,6 +4,7 @@ import JSONCrush from "jsoncrush";
 import moment from "moment";
 import { base64ArrayBuffer } from "../DocumentGallery/b64util";
 import { Base64 } from "js-base64";
+import isEmpty from "lodash.isempty";
 
 const ENCODE_TYPES = {
   crush: 'crush',
@@ -114,16 +115,26 @@ export function useUrlState({ queryKey, defaultValue, disable = false, encode =
       const qs = new URLSearchParams(window?.location?.search);
       let values = {};
       for (var value of qs.keys()) {
+        if (value === queryKey) continue; // skip the queryKey parameter
         values[value] = qs.get(value);
       }
       const mergedValues = {
         ...values,
         [queryKey]: crushValue
       }
-      const newQs = new URLSearchParams(mergedValues);
-      const newQsValue = newQs.toString()
-      // setQueryString(`?${newQsValue}`);
-      setQueryString(JSON.stringify(mergedValues))
+
+      let qsString = ''
+      if (isEmpty(values)) {
+        qsString = `?${queryKey}=${crushValue}`
+      } else {
+        const preQs = new URLSearchParams(values);
+        const preQsValue = preQs.toString()
+        qsString = `?${preQsValue}&${queryKey}=${crushValue}`
+      }
+
+      // const newQs = new URLSearchParams(mergedValues);
+      // const newQsValue = newQs.toString()
+      setQueryString(qsString)
       setState(returnValue);
     },
     [queryKey, setQueryString]

From c3169dfe8a3fc6f44a0a008349f429b635fefec5 Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Mon, 2 Oct 2023 16:46:40 +0800
Subject: [PATCH 10/11] ZI-14702 rework type matching for fetch from url

---
 src/components/hooks/useUrlState.js | 30 ++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/hooks/useUrlState.js b/src/components/hooks/useUrlState.js
index 2554e2c..3faa43e 100644
--- a/src/components/hooks/useUrlState.js
+++ b/src/components/hooks/useUrlState.js
@@ -54,23 +54,43 @@ export function useUrlState({ queryKey, defaultValue, disable = false, encode =
             default:
               break;
           }
-          getParam = uncrush ? JSON.parse(uncrush) : {};
-          convertedValue = JSON.parse(getParam);
-          const calltype = Object.prototype.toString.call(convertedValue)
-          if (calltype === '[object String]') {
+          try {
+            getParam = uncrush ? JSON.parse(uncrush) : {};
+          } catch (error) {
+            convertedValue = uncrush;
+
+            try {
+              const isDate = moment(new Date(convertedValue)).isValid();
+              convertedValue = isDate ? moment(convertedValue).toDate() : convertedValue;
+            } catch (dateparseError) {
+            }
+
+            ref.current = convertedValue;
+            setQsValue(convertedValue);
+            return
+          }
+
+          try {
+            convertedValue = JSON.parse(getParam);            
+          } catch (error) {
+            convertedValue = getParam;
             try {
               const isDate = moment(new Date(convertedValue)).isValid();
               convertedValue = isDate ? moment(convertedValue).toDate() : convertedValue;
             } catch (dateparseError) {
             }
+            ref.current = convertedValue
+            setQsValue(convertedValue);
+            return
           }
+          
         } catch (error) {
           convertedValue = getParam;
         }
         ref.current = convertedValue;
       }
       setQsValue(convertedValue);
-    }, [JSONUrl, queryKey, state]);
+    }, [JSONUrl, encode, queryKey, state]);
 
   useEffect(
     () => {

From 348ba142004096d3c9325d0c17ad915c287cd8f1 Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Mon, 2 Oct 2023 17:06:08 +0800
Subject: [PATCH 11/11] ZI-14702 add specific example

---
 src/components/hooks/useUrlState.stories.js | 22 +++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/components/hooks/useUrlState.stories.js b/src/components/hooks/useUrlState.stories.js
index 479c076..0e29dfb 100644
--- a/src/components/hooks/useUrlState.stories.js
+++ b/src/components/hooks/useUrlState.stories.js
@@ -96,4 +96,26 @@ export const Date = ({ ...args }) => {
       <ReactJsonView src={{ queryTerm, url }} />
     </div>
   )
+}
+
+export const MedicalGridFilterExample = ({...args}) => {
+  const [queryTerm, setQueryTerm, queryTermRef, url] = useUrlState({queryKey:'medicalGridFilter'});
+  useEffect(
+    () => {
+      setQueryTerm({
+        laboratory: [
+          9,
+          1,
+        ],
+        startDate: "2023-08-01T08:51:52.000Z",
+        endDate: "2023-09-30T08:51:52.000Z",
+      })
+    }, []
+  );
+  return (
+    <div>
+      <ReactJsonView src={{ parameters: queryTerm }} name="Internal Query Parameters"/>
+      <ReactJsonView src={{ rendered_url_params: url }} name="External Parameters in URL"/>
+    </div>
+  );
 }
\ No newline at end of file