Overhaul WiP

src/App.vue

@@ -1,17 +1,19 @@
 <script setup>
-import IconBandaid from './components/icons/IconBandaid.vue';
-import IconGithub from './components/icons/IconGithub.vue';
-import InputCodeEditor from './components/InputCodeEditor.vue';
-import FileLoader from './components/FileLoader.vue';
-import ParseButton from './components/ParseButton.vue';
-import NodesList from './components/NodesList.vue';
-import FilterEditor from './components/FilterEditor.vue';
+import store from './store';
+import {computed} from 'vue';
 import ToasterView from './components/ToasterView.vue';
+import ExplorationTab from './tabs/ExplorationTab.vue';
+import IconGithub from './components/icons/IconGithub.vue';
+import IconBandaid from './components/icons/IconBandaid.vue';
+// import TransformationTab from './tabs/TransformationTab.vue';
+
+const tabs = {
+  explore: ExplorationTab,
+  // transform: TransformationTab,
+};
+
+const availableTabs = computed(() => Object.keys(tabs));
 
-const navItems = [
-  FileLoader,
-  ParseButton,
-];
 </script>
 
 <template>
@@ -21,11 +23,9 @@ const navItems = [
         <icon-bandaid/>
 				<span class="nav-title">fl<b>AST</b>er</span>
 			</span>
-      <span class="nav-items">
-        <span v-for="navItem of navItems" :key="navItem" class="nav-item">
-          <component :is="navItem"></component>
-        </span>
-      </span>
+<!--      <span class="tabs">-->
+<!--        <button class="btn tab-btn" v-for="tabName in availableTabs" :key="tabName" @click="store.currentTab = tabName">{{tabName}}</button>-->
+<!--      </span>-->
       <span title="View code on GitHub">
 				<a href="https://github.com/ctrl-escp/flaster" title="flASTer on GitHub">
 					<span class="github-text">View on GitHub</span>
@@ -34,15 +34,11 @@ const navItems = [
 			</span>
     </nav>
   </header>
-  <div class="panes">
-    <div class="pane-top">
-      <input-code-editor/>
-      <nodes-list/>
-    </div>
-    <div class="pane-bottom">
-      <filter-editor/>
-    </div>
-  </div>
+  <main>
+    <keep-alive>
+      <component :is="tabs[store.currentTab]"/>
+    </keep-alive>
+  </main>
   <toaster-view/>
 </template>
 
@@ -61,6 +57,10 @@ a:link {
   margin-right: 10px;
 }
 
+main {
+  margin-top: .5rem;
+}
+
 nav {
   background-color: #212121;
   display: flex;
@@ -70,15 +70,6 @@ nav {
   height: var(--nav-height);
 }
 
-.nav-items {
-  display: flex;
-  flex-direction: row;
-}
-
-.nav-item {
-  margin: 0 5px;
-}
-
 .nav-left {
   display: flex;
   align-items: center;
@@ -88,22 +79,13 @@ nav {
   font-size: 2.4rem;
 }
 
-.pane-bottom {
-  flex: 1;
-  display: flex;
-}
+.tab-btn {
+  text-transform: capitalize;
 
-.pane-top {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
 }
 
-.panes {
+.tabs {
   display: flex;
-  flex-direction: column;
-  height: calc(95vh - var(--nav-height));
-  gap: .2rem;
-  width: 100%;
+  gap: 1rem;
 }
 </style>

src/assets/main.css

@@ -21,6 +21,11 @@ body {
     transform: translate(1px, 1px);
 }
 
+.btn:disabled {
+    transform: none;
+    cursor: not-allowed;
+}
+
 .highlighted-code {
     background-color: rgba(255, 234, 0, 0.27);
 }

src/components/CodeEditor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {store} from '../store.js';
+import store from '../store';
 import {ref, onMounted} from 'vue';
 import {lintKeymap} from '@codemirror/lint';
 import {EditorState} from '@codemirror/state';

src/components/CodeViewSwitch.vue

@@ -0,0 +1,22 @@
+<script setup>
+import {onMounted, ref} from 'vue';
+import store from '../store';
+
+const messages = {
+  isOriginal: 'Show Transformed Code',
+  isTransformed: 'Show Original Code',
+};
+
+const codeViewBtn = ref(null);
+
+onMounted(() => {});
+</script>
+
+<template>
+  <button ref="codeViewBtn" class="btn" @click="store.isShowingTransformedCode = !store.isShowingTransformedCode" :disabled="!store.isTransformed">
+    {{ store.isShowingTransformedCode ? messages.isTransformed : messages.isOriginal }}
+  </button>
+</template>
+
+<style scoped>
+</style>

src/components/FileLoader.vue

@@ -1,14 +1,14 @@
 <script setup>
+import store from '../store';
 import {onMounted, ref} from 'vue';
-import {store} from '../store.js';
 
 const messages = {
-  noFile: 'Load file',
+  noFile: 'Load File',
   loaded: '',
 };
 
 const status = ref(null);
-const inputCodeEditorId = 'inputCodeEditor';
+const inputCodeEditorId = store.editorIds.inputCodeEditor;
 
 onMounted(() => {
   if (status.value) status.value.innerText = messages.noFile;
@@ -20,18 +20,12 @@ function fileChanged(el) {
   if (files.length) file = files[0];
   if (file) {
     file.text().then(c => {
-      const editor = store.getEditor(inputCodeEditorId);
-      editor.dispatch({
-        changes: [
-          {from: 0, to: editor.state.doc.length},
-          {from: 0, insert: c},
-        ],
-      });
+      store.setContent(store.getEditor(inputCodeEditorId), c);
       store.resetParsedState();
     });
     status.value.innerText = messages.loaded + file.name.substring(0, 30);
   } else {
-    store.getEditor(inputCodeEditorId).dispatch({changes: {from: 0, insert: ''}});
+    store.setContent(store.getEditor(inputCodeEditorId), '');
     status.value.innerText = messages.noFile;
     store.resetParsedState();
   }

src/components/FilterEditor.vue

@@ -1,6 +1,6 @@
 <script setup>
+import store from '../store';
 import {computed} from 'vue';
-import {store} from '../store.js';
 import CodeEditor from './CodeEditor.vue';
 import IconCheckboxActive from './icons/IconCheckboxActive.vue';
 import IconCheckboxInactive from './icons/IconCheckboxInactive.vue';
@@ -24,6 +24,7 @@ function applyFilter(filterSrc) {
     try {
       filterSrc = filterSrc.trim();
       store.filteredNodes = store.filteredNodes.filter(eval(`n => ${filterSrc}`));
+      // noinspection JSCheckFunctionSignatures
       store.filters.push({
         src: filterSrc,
         enabled: true,
@@ -75,14 +76,7 @@ function combineEnabledFilters() {
 }
 
 function setFilterEditorContent(filterSrc) {
-  const editor = store.getEditor(store.editorIds.filterEditor);
-  editor.dispatch({
-    changes: {
-      from: 0,
-      to: editor.state.doc.length,
-      insert: filterSrc
-    }
-  });
+  store.setContent(store.getEditor(store.editorIds.filterEditor),filterSrc);
 }
 </script>
 
@@ -133,6 +127,10 @@ function setFilterEditorContent(filterSrc) {
   min-width: 41%;
 }
 
+.applied-filters-wrapper > fieldset {
+  min-width: 40vw;
+}
+
 .btn-apply {
   background-color: greenyellow;
 }
@@ -178,10 +176,10 @@ function setFilterEditorContent(filterSrc) {
 
 .filter-line {
   display: flex;
+  flex: 1;
 }
 
 .filter-src {
-  width: 900px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/components/InputCodeEditor.vue

@@ -1,6 +1,6 @@
 <script setup>
+import store from '../store';
 import CodeEditor from './CodeEditor.vue';
-import {store} from '../store.js';
 
 const initialValue = `// This is the default code for flASTer
 // Click the button at the top to load a file or paste directly into the editor
@@ -14,15 +14,15 @@ const initialValue = `// This is the default code for flASTer
 
 <template>
 	<fieldset class="code-editor-wrapper">
-		<legend>Your code</legend>
+		<legend>Your code <span v-if="store.isShowingTransformedCode">(transformed)</span></legend>
 		<code-editor :editor-id="store.editorIds.inputCodeEditor" :initial-value="initialValue"/>
 	</fieldset>
 </template>
 
 <style scoped>
 .code-editor-wrapper {
 	flex: 1;
-	min-width: 0;
+	min-width: 40vw;
 	padding: 0;
 	width: 100%;
 	height: 50vh;

src/components/NodesList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {store} from '../store.js';
+import store from '../store';
 import {computed, onMounted, reactive} from 'vue';
 
 const state = reactive({
@@ -113,6 +113,7 @@ legend {
 
 .node-src {
   max-width: calc(50vw - 20rem);
+  min-width: 30vw;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/components/ParseButton.vue

@@ -1,12 +1,12 @@
 <script setup>
+import store from '../store';
 import {onMounted, ref} from 'vue';
-import {store} from '../store.js';
 
 const messages = {
-  parseContent: 'Parse content',
-  contentParsed: 'Content is parsed ',
-  astParseFail: 'Unable to parse AST',
-  emptyCode: 'No content',
+  parseContent: 'Parse Content',
+  contentParsed: 'Content is Parsed ',
+  astParseFail: 'Unable to Parse AST',
+  emptyCode: 'No Content',
 };
 
 const parsedStatusEl = ref(null);
@@ -33,7 +33,6 @@ function resetParsedState() {
   store.ast = [];
   store.matchingNodes = [];
   setContentUnparsed();
-  store.updateNodesInfoMsg();
   store.page = 0;
 }
 
@@ -47,7 +46,7 @@ function parseContent() {
   try {
     resetParsedState();
     const code = store.getEditor(store.editorIds.inputCodeEditor).state.doc.toString();
-    if (!code.length) store.logMessage(messages.emptyCode, 'error');
+    if (!code?.length) store.logMessage(messages.emptyCode, 'error');
     else {
       new Promise(() => {
         store.filteredNodes = store.ast = [];

src/components/ToasterView.vue

@@ -1,6 +1,6 @@
 <script setup>
-import {onMounted, reactive, ref} from 'vue';
-import {store} from '../store.js';
+import store from '../store';
+import {onMounted, reactive} from 'vue';
 import ToasterMessage from './ToasterMessage.vue';
 
 const TOAST_TIMEOUT = 3.5 * 1000;

src/store/exploration.js

@@ -0,0 +1,14 @@
+export default {
+
+  nodesPageSize: 100,
+  page: 0,
+  isContentParsed: false,
+  isTransformed: false,
+  isShowingTransformedCode: false,
+  filteredNodes: [],
+  filters: [],
+  areFiltersActive: true,
+  // placeholders
+  resetParsedState() {},
+  parseContent() {},
+};