Add toggle for diaplying/hiding symbol table (#262)

* Enable hiding symbol table
nand2tetris · Apr 8, 2024 · 86610de · 86610de
1 parent df509e9
commit 86610de
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/components/src/stores/asm.store.ts b/components/src/stores/asm.store.ts
@@ -379,6 +379,7 @@ export function makeAsmStore(
 
     reset() {
       failure = false;
+      translating = false;
       setStatus("Reset");
       translator.reset();
       this.resetHighlightInfo();

diff --git a/web/src/pages/asm.scss b/web/src/pages/asm.scss
@@ -11,6 +11,10 @@
   grid-template-columns: 2.5fr 1fr 1fr;
   grid-template-rows: 2fr 1fr;
 
+  &.hide-sym {
+    grid-template-rows: 1fr auto;
+  }
+
   .source {
     grid-area: source;
   }

diff --git a/web/src/pages/asm.tsx b/web/src/pages/asm.tsx
@@ -27,6 +27,8 @@ export const Asm = () => {
   const runner = useRef<Timer>();
   const [runnerAssigned, setRunnerAssigned] = useState(false);
 
+  const [showSymbolTable, setShowSymbolTable] = useState(true);
+
   useEffect(() => {
     if (toolStates.asmState) {
       actions.overrideState(toolStates.asmState);
@@ -117,7 +119,7 @@ export const Asm = () => {
   };
 
   return (
-    <div className="AsmPage grid">
+    <div className={`AsmPage grid ${showSymbolTable ? "" : "hide-sym"}`}>
       <Panel
         className="source"
         header={
@@ -242,9 +244,25 @@ export const Asm = () => {
           lineNumberTransform={(n) => (n - 1).toString()}
         />
       </Panel>
-      <Panel className="sym" header={<Trans>Symbol Table</Trans>}>
-        {/* {state.symbols.length > 0 && state.translating && "Symbol Table"} */}
-        {state.translating && <Table values={state.symbols} />}
+      <Panel
+        className="sym"
+        header={
+          <>
+            <div className="flex-1">
+              <Trans>Symbol Table</Trans>
+            </div>
+            <input
+              type="checkbox"
+              role="switch"
+              checked={showSymbolTable}
+              onChange={() => setShowSymbolTable(!showSymbolTable)}
+            />
+          </>
+        }
+      >
+        {state.translating && showSymbolTable && (
+          <Table values={state.symbols} />
+        )}
       </Panel>
       <Panel
         className="compare"