Adding bigInt support (#165)

* Update axios version and add bigIntJSON support on console page * Fix View point page * fix: prop type warning * Update history and savedCode components to use bigIntJSON for localStorage * add bigInt support filtereditorwindow in visual vector * Add bigInt support in json parsing. Fix JSON. -> bigIntJSON. * fmt * Update JSON parsing in RequesFromCode.js * Update @qdrant/js-client-rest to version 1.8.1 * Fix parsing issue in RequesFromCode.js
qdrant · Mar 9, 2024 · de1284a · de1284a
1 parent b753c05
commit de1284a
Show file tree

Hide file tree

Showing 21 changed files with 139 additions and 81 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.15",
     "@mui/x-data-grid": "^6.0.4",
-    "@qdrant/js-client-rest": "^1.7.0",
+    "@qdrant/js-client-rest": "^1.8.1",
     "@saehrimnir/druidjs": "^0.6.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -26,7 +26,7 @@
     "@uppy/xhr-upload": "^3.3.1",
     "@vitejs/plugin-react": "^4.0.0",
     "autocomplete-openapi": "^0.1.1",
-    "axios": "^1.3.4",
+    "axios": "^1.6.7",
     "chart.js": "^4.3.0",
     "chroma-js": "^2.4.2",
     "jsonc-parser": "^3.2.0",

diff --git a/src/common/axios.js b/src/common/axios.js
@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { getBaseURL } from './utils';
+import { bigIntJSON } from './bigIntJSON';
 
 function setupAxios({ apiKey }) {
   if (process.env.NODE_ENV === 'development') {
@@ -10,6 +11,20 @@ function setupAxios({ apiKey }) {
   if (apiKey) {
     axios.defaults.headers.common['api-key'] = apiKey;
   }
+  axios.defaults.transformRequest = [
+    function (data, headers) {
+      if (data instanceof FormData) {
+        return data;
+      }
+      headers['Content-Type'] = 'application/json';
+      return bigIntJSON.stringify(data);
+    },
+  ];
+  axios.defaults.transformResponse = [
+    function (data) {
+      return bigIntJSON.parse(data);
+    },
+  ];
 }
 
 export default setupAxios;
diff --git a/src/common/bigIntJSON.js b/src/common/bigIntJSON.js
@@ -0,0 +1,30 @@
+let bigintReviver;
+let bigintReplacer;
+
+if ('rawJSON' in JSON) {
+  bigintReviver = function (_key, val, context) {
+    if (Number.isInteger(val) && !Number.isSafeInteger(val)) {
+      try {
+        return BigInt(context?.source);
+      } catch {
+        return val;
+      }
+    }
+    return val;
+  };
+  bigintReplacer = function (_key, val) {
+    if (typeof val === 'bigint') {
+      return JSON.rawJSON(String(val));
+    }
+    return val;
+  };
+}
+
+export const bigIntJSON = {
+  parse: function (text, reviver) {
+    return JSON.parse(text, reviver || bigintReviver);
+  },
+  stringify: function (value, replacer, space) {
+    return JSON.stringify(value, replacer || bigintReplacer, space);
+  },
+};
diff --git a/src/components/CodeEditorWindow/Menu/history.jsx b/src/components/CodeEditorWindow/Menu/history.jsx
@@ -4,26 +4,27 @@ import { SwipeableDrawer, Button, Box, Stack, Typography } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditorCommon from '../../EditorCommon';
+import { bigIntJSON } from '../../../common/bigIntJSON';
 
 function History({ state, code, handleEditorChange, toggleDrawer }) {
   const [viewCode, setViewCode] = React.useState('//Selected Code');
   const [history, setHistory] = useState(
-    localStorage.getItem('history') ? JSON.parse(localStorage.getItem('history')) : []
+    localStorage.getItem('history') ? bigIntJSON.parse(localStorage.getItem('history')) : []
   );
 
   useEffect(() => {
-    setHistory(localStorage.getItem('history') ? JSON.parse(localStorage.getItem('history')) : []);
+    setHistory(localStorage.getItem('history') ? bigIntJSON.parse(localStorage.getItem('history')) : []);
   }, [state]);
 
   function formatJSON(val = {}) {
     if (val && Object.keys(val).length !== 0) {
       try {
-        return JSON.stringify(val, null, 2);
+        return bigIntJSON.stringify(val, null, 2);
       } catch {
         const errorJson = {
           error: `HERE ${val}`,
         };
-        return JSON.stringify(errorJson, null, 2);
+        return bigIntJSON.stringify(errorJson, null, 2);
       }
     } else {
       return '';
@@ -72,8 +73,8 @@ function History({ state, code, handleEditorChange, toggleDrawer }) {
         onClick={() => {
           const updatedHistory = history.filter((item) => item.idx != data.idx);
 
-          localStorage.setItem('history', JSON.stringify(updatedHistory));
-          setHistory(JSON.parse(localStorage.getItem('history')));
+          localStorage.setItem('history', bigIntJSON.stringify(updatedHistory));
+          setHistory(bigIntJSON.parse(localStorage.getItem('history')));
         }}
       >
         <DeleteIcon />

diff --git a/src/components/CodeEditorWindow/Menu/savedCode.jsx b/src/components/CodeEditorWindow/Menu/savedCode.jsx
@@ -4,16 +4,17 @@ import { SwipeableDrawer, Button, Box, Stack, TextField, Typography } from '@mui
 import { DataGrid } from '@mui/x-data-grid';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditorCommon from '../../EditorCommon';
+import { bigIntJSON } from '../../../common/bigIntJSON';
 
 function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
   const [viewCode, setViewCode] = React.useState(`//Current Editor Code: \n${code}`);
   const [saveNameText, setSaveNameText] = useState('');
   const [savedCodes, setSavedCodes] = useState(
-    localStorage.getItem('savedCodes') ? JSON.parse(localStorage.getItem('savedCodes')) : []
+    localStorage.getItem('savedCodes') ? bigIntJSON.parse(localStorage.getItem('savedCodes')) : []
   );
 
   useEffect(() => {
-    setSavedCodes(localStorage.getItem('savedCodes') ? JSON.parse(localStorage.getItem('savedCodes')) : []);
+    setSavedCodes(localStorage.getItem('savedCodes') ? bigIntJSON.parse(localStorage.getItem('savedCodes')) : []);
     setViewCode(`//Current Editor Code: \n${code}`);
   }, [state]);
 
@@ -29,8 +30,8 @@ function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
           date: new Date().toLocaleDateString(),
         },
       ];
-      localStorage.setItem('savedCodes', JSON.stringify(data));
-      setSavedCodes(JSON.parse(localStorage.getItem('savedCodes')));
+      localStorage.setItem('savedCodes', bigIntJSON.stringify(data));
+      setSavedCodes(bigIntJSON.parse(localStorage.getItem('savedCodes')));
       setSaveNameText('');
     }
   }
@@ -72,8 +73,8 @@ function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
           const index = savedCodes.indexOf(data);
           const updateCode = [...savedCodes];
           updateCode.splice(index, 1);
-          localStorage.setItem('savedCodes', JSON.stringify(updateCode));
-          setSavedCodes(JSON.parse(localStorage.getItem('savedCodes')));
+          localStorage.setItem('savedCodes', bigIntJSON.stringify(updateCode));
+          setSavedCodes(bigIntJSON.parse(localStorage.getItem('savedCodes')));
         }}
       >
         <DeleteIcon />

diff --git a/src/components/CodeEditorWindow/config/RequesFromCode.js b/src/components/CodeEditorWindow/config/RequesFromCode.js
@@ -1,6 +1,7 @@
 import axios from 'axios';
-import { parse as jsoncParse } from 'jsonc-parser';
+import { stripComments } from 'jsonc-parser';
 import { updateHistory } from '../../../lib/update-history';
+import { bigIntJSON } from '../../../common/bigIntJSON';
 
 export function requestFromCode(text, withHistory = true) {
   const data = codeParse(text);
@@ -19,6 +20,7 @@ export function requestFromCode(text, withHistory = true) {
         return response.data;
       })
       .catch((err) => {
+        console.log(err);
         return err.response?.data?.status ? err.response?.data?.status : err;
       });
   }
@@ -34,16 +36,10 @@ export function codeParse(codeText) {
   const method = headerLine.split(' ')[0];
   const endpoint = headerLine.split(' ')[1];
 
-  const parserConfig = {
-    allowTrailingComma: false,
-    disallowComments: false,
-    allowEmptyContent: false,
-  };
-
   let reqBody = {};
   if (body) {
     try {
-      reqBody = body === '\n' ? {} : jsoncParse(body, null, parserConfig);
+      reqBody = body === '\n' ? {} : bigIntJSON.parse(stripComments(body));
     } catch (e) {
       return {
         method: null,

diff --git a/src/components/CodeEditorWindow/index.jsx b/src/components/CodeEditorWindow/index.jsx
@@ -7,6 +7,7 @@ import { ErrorMarker, errChecker } from './config/ErrorMarker';
 import { codeParse, requestFromCode } from './config/RequesFromCode';
 import './editor.css';
 import EditorCommon from '../EditorCommon';
+import { bigIntJSON } from '../../common/bigIntJSON';
 
 const CodeEditorWindow = ({ onChange, code, onChangeResult, setRequestCount }) => {
   const editorRef = useRef(null);
@@ -43,7 +44,7 @@ const CodeEditorWindow = ({ onChange, code, onChangeResult, setRequestCount }) =
         setRequestCount((prev) => prev + 1);
         const data = args[0];
         const result = await requestFromCode(data);
-        onChangeResult('code', JSON.stringify(result));
+        onChangeResult('code', bigIntJSON.stringify(result));
         setRequestCount((prev) => prev - 1);
       },
       ''
@@ -55,7 +56,7 @@ const CodeEditorWindow = ({ onChange, code, onChangeResult, setRequestCount }) =
         const codeBlock = args[0];
         const data = codeParse(codeBlock.blockText);
         if (data.reqBody && Object.keys(data.reqBody).length > 0) {
-          const newCodeBlockText = JSON.stringify(data.reqBody, null, 2);
+          const newCodeBlockText = bigIntJSON.stringify(data.reqBody, null, 2);
           editor.executeEdits('beautify', [
             {
               forceMoveMarkers: true,
@@ -109,7 +110,7 @@ const CodeEditorWindow = ({ onChange, code, onChangeResult, setRequestCount }) =
           setRequestCount((prev) => prev + 1);
           const data = selectedCodeBlock.blockText;
           const result = await requestFromCode(data);
-          onChangeResult('code', JSON.stringify(result));
+          onChangeResult('code', bigIntJSON.stringify(result));
           setRequestCount((prev) => prev - 1);
         });
       }

diff --git a/src/components/Collections/CollectionCluster/ClusterInfo.jsx b/src/components/Collections/CollectionCluster/ClusterInfo.jsx
@@ -4,6 +4,7 @@ import { Card, CardHeader, Table, TableBody } from '@mui/material';
 import { CopyButton } from '../../Common/CopyButton';
 import ClusterInfoHead from './ClusterInfoHead';
 import ClusterShardRow from './ClusterShardRow';
+import { bigIntJSON } from '../../../common/bigIntJSON';
 
 const ClusterInfo = ({ collectionCluster, ...other }) => {
   const shards = [
@@ -27,7 +28,7 @@ const ClusterInfo = ({ collectionCluster, ...other }) => {
         sx={{
           flexGrow: 1,
         }}
-        action={<CopyButton text={JSON.stringify(collectionCluster)} />}
+        action={<CopyButton text={bigIntJSON.stringify(collectionCluster)} />}
       />
       <Table>
         <ClusterInfoHead />

diff --git a/src/components/Collections/CollectionInfo.jsx b/src/components/Collections/CollectionInfo.jsx
@@ -8,6 +8,7 @@ import { Dot } from '../Common/Dot';
 import ClusterInfo from './CollectionCluster/ClusterInfo';
 import { useSnackbar } from 'notistack';
 import { getSnackbarOptions } from '../Common/utils/snackbarOptions';
+import { bigIntJSON } from '../../common/bigIntJSON';
 
 export const CollectionInfo = ({ collectionName }) => {
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
@@ -49,7 +50,7 @@ export const CollectionInfo = ({ collectionName }) => {
           sx={{
             flexGrow: 1,
           }}
-          action={<CopyButton text={JSON.stringify(collection)} />}
+          action={<CopyButton text={bigIntJSON.stringify(collection)} />}
         />
         <CardContent>
           <DataGridList

diff --git a/src/components/FilterEditorWindow/config/RequestFromCode.js b/src/components/FilterEditorWindow/config/RequestFromCode.js
@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { bigIntJSON } from '../../../common/bigIntJSON';
 
 export async function requestFromCode(text, collectionName) {
   const data = codeParse(text);
@@ -112,7 +113,7 @@ export function codeParse(codeText) {
   // Parse JSON
   if (codeText) {
     try {
-      reqBody = JSON.parse(codeText);
+      reqBody = bigIntJSON.parse(codeText);
     } catch (e) {
       return {
         reqBody: codeText,