added disable ax button

Author: garrettlchow

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 reactime
+Copyright (c) 2025 reactime
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

src/app/FrontendTypes.ts

@@ -399,6 +399,8 @@ export interface AxContainer {
   };
   snapshots: [];
   currLocation: object;
+  setShowTree: any;
+  setShowParagraph: any;
 }
 
 export interface FilteredNode {

src/app/components/StateRoute/AxMap/Ax.tsx

@@ -32,7 +32,7 @@ export type LinkTypesProps = {
 };
 
 export default function AxTree(props) {
-  const { currLocation, axSnapshots, width, height } = props;
+  const { currLocation, axSnapshots, width, height, setShowTree, setShowParagraph } = props;
 
   let margin = defaultMargin;
   let totalWidth = width;
@@ -157,6 +157,8 @@ export default function AxTree(props) {
           setOrientation={setOrientation}
           setLinkType={setLinkType}
           setStepPercent={setStepPercent}
+          setShowTree={setShowTree}
+          setShowParagraph={setShowParagraph}
         />
       </div>
 

src/app/components/StateRoute/AxMap/AxContainer.tsx

@@ -11,6 +11,8 @@ const AxContainer = (props: AxContainer) => {
     snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
     snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
     currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
+    setShowTree,
+    setShowParagraph,
   } = props;
 
   return (
@@ -28,6 +30,8 @@ const AxContainer = (props: AxContainer) => {
               currLocation={currLocation}
               width={width}
               height={h}
+              setShowTree={setShowTree}
+              setShowParagraph={setShowParagraph}
             />
           );
         }}

src/app/components/StateRoute/AxMap/axLinkControls.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
+import { toggleAxTree, setCurrentTabInApp } from '../../../slices/mainSlice';
 
 const AxLinkControls = ({
   orientation,
@@ -7,9 +9,30 @@ const AxLinkControls = ({
   setOrientation,
   setLinkType,
   setStepPercent,
+  setShowTree,
+  setShowParagraph,
 }) => {
+  const dispatch = useDispatch();
+  const disableAxTree = () => {
+    dispatch(toggleAxTree('toggleAxRecord'));
+    dispatch(setCurrentTabInApp('AxTree'));
+    setShowTree(false);
+    setShowParagraph(true);
+  };
+
   return (
     <div className='link-controls'>
+      <div className='accessibility-disable'>
+        <input
+          type='radio'
+          id='disable'
+          name='accessibility'
+          value='disable'
+          onChange={disableAxTree}
+        />
+        <label htmlFor='disable'>Disable</label>
+      </div>
+
       <div className='control-group'>
         <label className='control-label'>Orientation:</label>
         <select

src/app/components/StateRoute/AxMap/useForceUpdate.tsx

@@ -114,7 +114,6 @@ function History(props: Record<string, unknown>): JSX.Element {
       if (!delta) return 'No state changes';
 
       const changedState = findStateChangeObj(delta);
-      console.log('changed state', formatters.html.format(changedState[0]));
       return changedState.length > 0 ? formatters.html.format(changedState[0]) : 'No state changes';
     } catch (error) {
       console.error('Error in findDiff:', error);

src/app/components/StateRoute/History.tsx

@@ -119,6 +119,8 @@ const StateRoute = (props: StateRouteProps) => {
                     snapshot={snapshot}
                     snapshots={snapshots}
                     currLocation={currLocation}
+                    setShowTree={setShowTree}
+                    setShowParagraph={setShowParagraph}
                   />
                 </div>
               ) : (

src/app/components/StateRoute/StateRoute.tsx

@@ -34,11 +34,40 @@
   transition: all 200ms ease;
   user-select: none;
 }
+
 .accessibility-controls label:hover {
   background-color: #0d9488;
   transform: translateY(-1px);
 }
 
+.accessibility-disable input[type='radio'] {
+  display: none;
+}
+
+.accessibility-disable label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 60px;
+  padding: 6px 12px;
+  font-family: 'Outfit', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  color: #374151;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 200ms ease;
+  user-select: none;
+}
+
+.accessibility-disable label:hover {
+  border-color: #d1d5db;
+  background-color: #f3f4f6;
+  transform: translateY(-1px);
+}
+
 .accessibility-text {
   padding: 12px 24px;
   max-width: 800px;

src/app/styles/components/_ax.scss

@@ -21,7 +21,7 @@ body {
 // 1. Configuration and helpers
 @import 'abstracts/variablesLM';
 
-// 3. Base stuff
+// 3. Base
 @import 'base/helpers';
 
 // 4. Layout-related sections