add new interface

package.json

@@ -30,12 +30,14 @@
     "i18next-http-backend": "^1.4.4",
     "import-js": "^5.0.0",
     "numeric": "^1.2.6",
+    "or": "^0.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.4",
     "react-dropzone": "^12.0.4",
     "react-hook-form": "^7.30.0",
     "react-i18next": "^11.18.6",
+    "react-icons": "^4.10.1",
     "react-redux": "^7.2.6",
     "react-responsive": "^9.0.0-beta.6",
     "react-router-dom": "^6.2.1",

src/App/App.tsx

@@ -3,6 +3,8 @@ import styles from './App.module.scss';
 import { Route, Routes } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '../services/store/hooks';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+
 import { MainPageLayout, AppLayout } from '../components/Layouts';
 import { MainPage, DIRPage, PCAPage, NotFoundPage, WhyPMToolsPage, AuthorsAndHistory } from '../pages';
 import { useSystemTheme } from '../utils/GlobalHooks';
@@ -11,17 +13,19 @@ import { setCurrentDIRid, setCurrentPMDid, setDirStatData, setTreatmentData } fr
 import * as pcaPageReducer from '../services/reducers/pcaPage';
 import * as dirPageReducer from '../services/reducers/dirPage';
 
+import {Khokhlov_Gvozdik} from "../gag_components/khokhlov-gvozdik/khokhlov-gvozdik";
+
 function App() {
 
   const dispatch = useAppDispatch();
-  
+
   const { colorMode, rememberColorMode } = useAppSelector(state => state.appSettingsReducer);
   const systemTheme = useSystemTheme();
 
   // useEffect(() => {
   //   if (!rememberColorMode) dispatch(setColorMode(systemTheme));
   // }, [systemTheme, rememberColorMode]);
-  
+
   useEffect(() => {
     console.log('color', localStorage)
     const previousColorMode = localStorage.getItem('colorMode') || systemTheme;
@@ -131,11 +135,15 @@ function App() {
           <Route path='/app' element={<AppLayout />}>
             <Route path='pca' element={<PCAPage />}/>
             <Route path='dir' element={<DIRPage />}/>
+            <Route path='Khokhlov_Gvozdik' element={<Khokhlov_Gvozdik />}/>
           </Route>
           <Route path='*' element={<NotFoundPage />}/>
         </Routes>
+
       </ThemeProvider>
+
     </Suspense>
+
   );
 }
 

src/components/AppGraphs/HGGraph/HGGraph.tsx

@@ -0,0 +1,56 @@
+import React, { FC, useMemo } from "react";
+import styles from "./MagGraph.module.scss";
+import { useGraphSelectableNodesPCA, useGraphSelectedIDs, usePMDGraphSettings } from "../../../utils/GlobalHooks";
+import { IDirData, IGraph } from "../../../utils/GlobalTypes";
+import { IPmdData } from "../../../utils/GlobalTypes";
+import dataToMag from "../../../utils/graphs/formatters/mag/dataToMag";
+import { SelectableGraph } from "../../Common/Graphs";
+import getInterpretationIDs from "../../../utils/graphs/formatters/getInterpretationIDs";
+import { useAppSelector } from "../../../services/store/hooks";
+import { GraphSettings, TMenuItem } from "../../../utils/graphs/types";
+
+export interface IHGGraph extends IGraph {
+  data: IDirData;
+  menuSettings: {
+    menuItems: TMenuItem[];
+    settings: GraphSettings;
+  }
+}
+
+const HGGraph = ({ graphId, width, height, data, menuSettings }: IHGGraph) => {
+
+  return (
+    <>
+      {/* <SelectableGraph
+        graphId={graphId}
+        width={viewWidth}
+        height={viewHeight}
+        selectableNodes={[]}
+        nodesDuplicated={false}
+        menuItems={[]}
+        extraID={data.metadata.name}
+        graphName={`${data.metadata.name}_hg_zoomed`}
+      >
+        <g>
+          <Zoomed_lambert_graph
+            center_zone={center_zone}
+            dir_list={dir_list}
+            angle_list={angle_list}
+            grid_points={grid_points}
+            points_numb={points_numb}
+            sred_dir={sred_dir}
+            alpha95={alpha95}
+            isvis={isvis}
+            isvisgrid={isvisgrid}
+            grid_color={grid_color}
+            poly_color={poly_color}
+            degree_grid_isvis={degree_grid_isvis}
+            rumbs_isvis={rumbs_isvis}
+          />
+        </g>
+      </SelectableGraph> */}
+    </>
+  )
+}
+
+export default HGGraph;

src/components/AppGraphs/StereoGraphDIR/AxesAndData.tsx

@@ -6,7 +6,7 @@ import { graphSelectedDotColor } from "../../../utils/ThemeConstants";
 import { Axis, Data, Dot } from "../../Common/Graphs";
 
 interface IAxesAndData {
-  graphId: string;
+graphId: string;
   width: number;
   height: number;
   areaConstants: {

src/components/AppLogic/AppNavigation/AppNavigation.tsx

@@ -12,6 +12,7 @@ import OtherHousesIcon from '@mui/icons-material/OtherHouses';
 import { DefaultIconButton } from "../../Common/Buttons";
 import { useTranslation } from "react-i18next";
 import { Menu, MenuItem } from "@mui/material";
+import {Khokhlov_Gvozdik} from "../../../gag_components/khokhlov-gvozdik/khokhlov-gvozdik";
 
 const AppNavigation: FC = ({}) => {
 
@@ -56,6 +57,12 @@ const AppNavigation: FC = ({}) => {
         icon={'DIR'}
         to={'/app/dir'}
       />
+      <NavButton 
+        label={t('')}
+        icon={'CAC'}
+        to={'Khokhlov_Gvozdik'}
+      />
+
       <NavButton 
         label={t('appLayout.navPanel.projectRepo')}
         icon={<GitHubIcon />}

src/components/Common/Graphs/Dot/Dot.tsx

@@ -85,7 +85,7 @@ interface IDot {
    * @param highlightStatistics Whether to render orange highlights
    * @param showGC Whether to render great circles for dirs with 'gc' or 'gcn' code
    */
-  settings: DotSettings;
+  settings?: DotSettings;
 }
 
 /**
@@ -153,7 +153,11 @@ const Dot: FC<IDot> = ({
     <g>
       {
         [
+<<<<<<< HEAD
+          settings && (((showText || selected) && settings.annotations) &&
+=======
           (settings.annotations) &&
+>>>>>>> upstream/main
           <text 
             id={`${id}__annotation`}
             x={x}
@@ -188,7 +192,7 @@ const Dot: FC<IDot> = ({
             <line x1={x} x2={x} y1={y - 8} y2={y + 8} stroke={graphSelectedDotColor(type)}/>
           </g>,
 
-          confidenceCircle && settings.confidenceCircle &&
+          settings && (confidenceCircle && settings.confidenceCircle &&
           [
             <path 
               d={createStraightPath(confidenceCircle.xyDataSplitted.neg)}
@@ -249,8 +253,8 @@ const Dot: FC<IDot> = ({
               strokeLinecap="round"
               fillOpacity="0"
             />
-          ]
-        ]
+          ])
+  )]
       }
       {/* <circle 
         cx={x} 
@@ -278,7 +282,7 @@ const Dot: FC<IDot> = ({
         onMouseOut={() => handleOut(id)}
       />
       {
-        tooltipData && settings.tooltips && 
+        settings && tooltipData && settings.tooltips && 
           <Tooltip
             position={tooltipData.position} 
             isVisible={tooltipData.isVisible}