FIX-2589 Add object count for the result in the query view (#2591)

Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/QueryView.tsx

@@ -11,6 +11,7 @@ import Icon from "styles/Icons";
 import { Box } from "@mui/material";
 import QueryDataGrid from "components/ContentViews/QueryDataGrid";
 import { QueryEditorTypes } from "components/ContentViews/QueryView/components/QueryOptions/QueryOptions";
+import ResultMeta from "components/ContentViews/QueryView/components/ResultMeta";
 import QueryOptions from "./components/QueryOptions";
 
 const QueryView = (): React.ReactElement => {
@@ -103,9 +104,16 @@ const QueryView = (): React.ReactElement => {
             />
           )}
         </Box>
-        <div>
+        <Box
+          display="grid"
+          gridTemplateRows="auto 1fr"
+          gap="1rem"
+          height="100%"
+          pr="2px"
+        >
+          <ResultMeta />
           <QueryEditor value={result} readonly />
-        </div>
+        </Box>
       </div>
     </Layout>
   );

Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/components/ResultMeta/ResultMeta.tsx

@@ -0,0 +1,42 @@
+import { Typography } from "@equinor/eds-core-react";
+import { QueryContext } from "contexts/queryContext";
+import { XMLParser } from "fast-xml-parser";
+import { FC, useContext } from "react";
+import styled from "styled-components";
+
+const ResultMeta: FC = () => {
+  const {
+    queryState: { queries, tabIndex }
+  } = useContext(QueryContext);
+
+  const { result } = queries[tabIndex];
+  const parser = new XMLParser();
+  const resultObj = parser.parse(result);
+  const templateObject = Object.keys(resultObj)?.[0]?.slice(0, -1);
+  const resultCount = countItemsAtDepth2(resultObj, templateObject);
+
+  return (
+    <Layout>
+      {resultCount > 0 && (
+        <Typography>{`Number of ${templateObject}s: ${resultCount}`}</Typography>
+      )}
+    </Layout>
+  );
+};
+
+const Layout = styled.div`
+  padding-left: 46px;
+`;
+
+function countItemsAtDepth2(obj: any, templateObject: string) {
+  try {
+    const depth1object = Object.values(obj)[0] as any;
+    const depth2objects = depth1object[templateObject];
+    const depth2length = depth2objects.length;
+    return depth2length;
+  } catch {
+    return null;
+  }
+}
+
+export default ResultMeta;

Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/components/ResultMeta/index.ts

@@ -0,0 +1 @@
+export { default } from "./ResultMeta";