Feature multiple splitpane #179

Triumph-light · 2025-06-28T15:21:51Z

Description

Main function: Add splitpane to support multi block display

Change point:

Transformation of parser module: Change the current parser to an array type and store the corresponding parser for the display container
Transformation of options module: Transform parserOptions and rawOptions into a {parserid: parserinfo} structure to store corresponding options information for local storage of options in the future. Since parserOptions was previously computed, it is now a complex data type that cannot be processed by computed, so it is implemented by watch
UI module modification: Added expLayout to store corresponding display layouts, switching layouts will clear information based on the current Parser

Linked Issues

issue 140

Additional context

Is the current structural design reasonable, and are there any other issues or hidden logic bugs with the type.
The language of inputContainer is determined by using the currently active tab to determine whether this interaction is OK

bolt-new-by-stackblitz · 2025-06-28T15:21:54Z

Run & review this pull request in StackBlitz Codeflow.

vercel · 2025-06-28T15:21:55Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ast-explorer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 13, 2025 9:25am

Triumph-light · 2025-06-28T16:02:02Z

Now there are still some bugs and ts type that have not been repaired. I will fix them and then see if the code is optimized.

sxzz · 2025-06-28T21:07:43Z

There are many bugs need to be fixed.
- Try switch language, editor is disappeared.
- Padding and text color, use label for parser name instead of id.
Use left-right layout by default

sxzz

Fix TS errors as well.

sxzz · 2025-06-28T21:08:49Z

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "editor.formatOnSave": true
+  "editor.codeActionsOnSave": {


Revert these changes.

sxzz · 2025-06-28T21:09:16Z

app.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { expLayout } from '~/state/ui.js'


Suggested change

import { expLayout } from '~/state/ui.js'

import { expLayout } from '~/state/ui'

sxzz · 2025-06-28T21:09:33Z

components/InputContainer.vue

-import { currentParser } from '~/state/parser/parser'
+import { parsersOptions } from '~/state/parser/options'
+import { currentParsers } from '~/state/parser/parser'
+import { activeTab } from '~/state/ui.js'


Suggested change

import { activeTab } from '~/state/ui.js'

import { activeTab } from '~/state/ui'

sxzz · 2025-06-28T21:10:44Z

icons/layout1.vue

@@ -0,0 +1,18 @@
+<template>


Use UnoCSS icon.

sxzz · 2025-06-28T21:11:31Z

public/.svg

@@ -0,0 +1 @@
+<svg t="1750689713539" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16875" width="200" height="200"><path d="M170.666667 896a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667z m170.666666-469.333333H213.333333v384h128v-384z m469.333334 0h-384v384h384v-384z m0-213.333334H213.333333v128h597.333334V213.333333z" fill="#000000" p-id="16876"></path></svg>


what's this?

sxzz · 2025-06-28T21:11:56Z

utils/index.ts

@@ -0,0 +1,21 @@
+export function getIntersection<T>(arr1: T[], arr2: T[]): T[] {
+  // 优化：对较小数组建 Set，减少内存占用


Remove the Chinese comment.

sxzz · 2025-06-28T21:12:05Z

state/url.ts

@@ -1,11 +1,13 @@
+// import { rawOptions, setDefaultOptions } from './parser/options'


Remove comments

sxzz · 2025-06-28T21:12:30Z

state/ui.ts

@@ -18,6 +19,13 @@ export const outputView = useLocalStorage<'tree' | 'json'>(
  'tree',
 )

-export const sideBarAvailable = computed(
-  () => currentParser.value.options.configurable && !!currentParserGui.value,
+export const expLayout = ref<Layout>('layout1')


No idea about expLayout. Use a more clear name, and value.

… in different modes

…nent with non-element root node

Triumph-light · 2025-07-11T02:07:03Z

There are a few details and bugs that need to be addressed. I will continue your work when I have some free time.

I also found some problems when I was using it, and I will also fix and optimize it together.

outslept · 2025-07-12T20:43:04Z

FYI clicking this produces 2 tabs

Result of the click, I don't think this is intended to work like that

Triumph-light · 2025-07-13T02:06:34Z

仅供参考，单击此按钮将产生 2 个标签
点击的结果，我不认为这是应该这样运作的

What do you think it should be? Do you expect that there will be two different parsers after clicking?
I think it's just a display of multiple layouts, similar to how VSCode splits files. The specific content is determined by the user's own choice.
The advantage of this is that users can have more autonomy in their operations.
When there is only one parser for certain data formats, it can still be compatible and allow for horizontal comparisons, such as simultaneous observation of tree and JSON formats.

outslept · 2025-07-13T02:13:10Z

I totally get the idea. I was talking that going to this mode with presumably empty localstorage & no tabs - creates 2 tabs for parser output (displaying the exact same info). Shouldn't it be a single tab for 1 parser? Why do we double it for this state?

Triumph-light · 2025-07-13T03:17:38Z

I totally get the idea. I was talking that going to this mode with presumably empty localstorage & no tabs - creates 2 tabs for parser output (displaying the exact same info). Shouldn't it be a single tab for 1 parser? Why do we double it for this state?

How to understand "a single tab for 1 parser". I don't quite understand this.

You mean that when you switched to this kind of multi-tab for the first time, you parsed the same analysis twice, right? This is indeed a problem.

zhanjuntao and others added 13 commits June 20, 2025 17:58

feat：support splitpane component

8d3c13b

feat: output style add w/h-full

a846a8e

feat: move parser select to outcontainer

944fe24

feat: support multiple parser

d33d40e

feat: props type

3716ace

feat: type

38da9b8

feat: basic operation of multiple parser

0bfaa94

Merge branch 'main' into feature-multiple-splitpane

36ff6d9

feat: layout

44774be

feat: The development is basically complete.

200b1ec

feat: The development is basically complete.

f479607

fix: type fix

fe10d17

feat: support different parser's version and delete log and fix type

a750bc2

vercel bot deployed to Preview June 28, 2025 15:23 View deployment

feat: control sidebar's display

fdeaac1

vercel bot deployed to Preview June 28, 2025 15:37 View deployment

sxzz requested changes Jun 28, 2025

View reviewed changes

feat: revert vsc setting

d612d8d

vercel bot deployed to Preview June 29, 2025 12:51 View deployment

fix: ts type fix, style bug fix

b7406ca

vercel bot deployed to Preview June 29, 2025 15:23 View deployment

style: eslint fix

0964e6b

vercel bot deployed to Preview June 29, 2025 15:35 View deployment

feat: Supports saving of old options and optimizing parsing execution…

14b1932

… in different modes

vercel bot deployed to Preview July 2, 2025 07:50 View deployment

Merge branch 'main' into feature-multiple-splitpane

57a2eaf

vercel bot deployed to Preview July 7, 2025 03:08 View deployment

fix: add root div in order to resolve Runtime directive used on compo…

e9c8eea

…nent with non-element root node

vercel bot deployed to Preview July 7, 2025 08:17 View deployment

fix: parse loading

b896596

vercel bot deployed to Preview July 7, 2025 09:05 View deployment

fix: ts module parser fail

ee2f896

vercel bot deployed to Preview July 7, 2025 12:17 View deployment

fix: style fix

872c370

vercel bot deployed to Preview July 7, 2025 13:04 View deployment

Triumph-light added 2 commits July 12, 2025 22:23

refactor: make parserModules clearly

b965f3f

feat: Support for auto focus is provided by each respective party

bde5baa

vercel bot deployed to Preview July 12, 2025 14:27 View deployment

feat: Support for hideLocationData is provided by each respective party

f9a7e04

vercel bot deployed to Preview July 12, 2025 14:36 View deployment

feat: Support for outputView is provided by each individual

175cdb9

vercel bot deployed to Preview July 12, 2025 14:55 View deployment

refactor: Concentrate on changing the current container data

b8a388e

vercel bot deployed to Preview July 13, 2025 05:38 View deployment

feat: Support hideKeys for respective containers

ce626ac

vercel bot deployed to Preview July 13, 2025 05:53 View deployment

feat: Adjust the style

835408a

vercel bot deployed to Preview July 13, 2025 06:08 View deployment

feat: Cache the parsing results of the same parser

a2f3582

vercel bot deployed to Preview July 13, 2025 09:24 View deployment

Triumph-light marked this pull request as ready for review July 27, 2025 08:33

		@@ -1,4 +1,6 @@
		<script setup lang="ts">
		import { expLayout } from '~/state/ui.js'

	import { expLayout } from '~/state/ui.js'
	import { expLayout } from '~/state/ui'

	import { activeTab } from '~/state/ui.js'
	import { activeTab } from '~/state/ui'

		@@ -0,0 +1 @@
		<svg t="1750689713539" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16875" width="200" height="200"><path d="M170.666667 896a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667z m170.666666-469.333333H213.333333v384h128v-384z m469.333334 0h-384v384h384v-384z m0-213.333334H213.333333v128h597.333334V213.333333z" fill="#000000" p-id="16876"></path></svg>

		@@ -0,0 +1,21 @@
		export function getIntersection<T>(arr1: T[], arr2: T[]): T[] {
		// 优化：对较小数组建 Set，减少内存占用

		@@ -1,11 +1,13 @@
		// import { rawOptions, setDefaultOptions } from './parser/options'

Uh oh!

Feature multiple splitpane #179

Are you sure you want to change the base?

Feature multiple splitpane #179

Uh oh!

Conversation

Triumph-light commented Jun 28, 2025

Description

Linked Issues

Additional context

Uh oh!

bolt-new-by-stackblitz bot commented Jun 28, 2025

Uh oh!

vercel bot commented Jun 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Triumph-light commented Jun 28, 2025

Uh oh!

sxzz commented Jun 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sxzz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Triumph-light commented Jul 11, 2025

Uh oh!

outslept commented Jul 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Triumph-light commented Jul 13, 2025

Uh oh!

outslept commented Jul 13, 2025

Uh oh!

Triumph-light commented Jul 13, 2025

Uh oh!

Uh oh!

vercel bot commented Jun 28, 2025 •

edited

Loading

sxzz commented Jun 28, 2025 •

edited

Loading

outslept commented Jul 12, 2025 •

edited

Loading