diff --git a/app/package.json b/app/package.json
index b690ba0..4b56939 100644
--- a/app/package.json
+++ b/app/package.json
@@ -17,8 +17,8 @@
   "dependencies": {
     "@headlessui/react": "^1.7.14",
     "@heroicons/react": "^2.0.8",
-    "@kanaries/graphic-walker": "0.4.56",
-    "@kanaries/gw-dsl-parser": "0.1.45-rc6",
+    "@kanaries/graphic-walker": "0.4.58",
+    "@kanaries/gw-dsl-parser": "0.1.47",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
diff --git a/app/src/components/preview/index.tsx b/app/src/components/preview/index.tsx
index f22d80e..14833ba 100644
--- a/app/src/components/preview/index.tsx
+++ b/app/src/components/preview/index.tsx
@@ -68,14 +68,14 @@ const Preview: React.FC<IPreviewProps> = observer((props) => {
                     {formatedCharts.map((chart, index) => {
                         return <TabsContent key={index} value={index.toString()}>
                             <PureRenderer
-                                themeKey={themeKey as IThemeKey}
+                                vizThemeConfig={themeKey as IThemeKey}
                                 name={chart.visSpec.name}
                                 visualConfig={chart.visSpec.config}
                                 visualLayout={chart.visSpec.layout}
                                 visualState={chart.visSpec.encodings}
                                 type='remote'
                                 computation={async(_) => { return chart.data }}
-                                dark={props.dark as IDarkMode}
+                                appearance={props.dark as IDarkMode}
                             />
                         </TabsContent>
                     })}
@@ -103,14 +103,14 @@ const ChartPreview: React.FC<IChartPreviewProps> = observer((props) => {
                 <h1 style={{marginTop: "1rem", color: "#333", fontSize: "1.1rem", marginBottom: "0.5rem", paddingInlineStart: "1rem"}}>{ props.title }</h1>
                 <p style={{color: "#666", fontWeight: 300, paddingInlineStart: "1rem"}}>{ props.desc }</p>
                 <PureRenderer
-                    themeKey={props.themeKey as IThemeKey}
+                    vizThemeConfig={props.themeKey as IThemeKey}
                     name={props.visSpec.name}
                     visualConfig={props.visSpec.config}
                     visualLayout={props.visSpec.layout}
                     visualState={props.visSpec.encodings}
                     type='remote'
                     computation={async(_) => { return formatedData }}
-                    dark={props.dark as IDarkMode}
+                    appearance={props.dark as IDarkMode}
                 />
             </div>
         </React.StrictMode>
diff --git a/app/src/index.tsx b/app/src/index.tsx
index 4e22799..763b467 100644
--- a/app/src/index.tsx
+++ b/app/src/index.tsx
@@ -229,11 +229,11 @@ const ExploreApp: React.FC<IAppProps & {initChartFlag: boolean}> = (props) => {
                 mode === "walker" ? 
                 <GraphicWalker
                     {...props.extraConfig}
-                    dark={useContext(darkModeContext)}
-                    themeKey={props.themeKey}
+                    appearance={useContext(darkModeContext)}
+                    vizThemeConfig={props.themeKey}
                     fieldkeyGuard={props.fieldkeyGuard}
-                    rawFields={props.rawFields}
-                    dataSource={props.useKernelCalc ? undefined : props.dataSource}
+                    fields={props.rawFields}
+                    data={props.useKernelCalc ? undefined : props.dataSource}
                     storeRef={storeRef}
                     ref={gwRef}
                     toolbar={toolbarConfig}
@@ -408,7 +408,7 @@ function GraphicRendererApp(props: IAppProps) {
                             /> :
                             <GraphicRenderer
                                 {...globalProps}
-                                dataSource={props.dataSource!}
+                                data={props.dataSource!}
                                 chart={[chart]}
                             />
                         }
@@ -437,7 +437,7 @@ function TableWalkerApp(props: IAppProps) {
                 /> :
                 <TableWalker
                     {...globalProps}
-                    dataSource={props.dataSource}
+                    data={props.dataSource}
                 />
             }
         </React.StrictMode>
diff --git a/app/yarn.lock b/app/yarn.lock
index a1bac5e..c15b9d3 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -1045,10 +1045,10 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
-"@kanaries/graphic-walker@0.4.56":
-  version "0.4.56"
-  resolved "https://registry.yarnpkg.com/@kanaries/graphic-walker/-/graphic-walker-0.4.56.tgz#fb277b21b6fdcca41ec99728accbcaf46566f95d"
-  integrity sha512-8KcWvhkDzVu9S6tWFSiz5qcYRsZDRPpUsFU5Wgmechk3v57ymJUC3RnJDFLv3sOs8IqwN+BXa9/I4FWht48WEQ==
+"@kanaries/graphic-walker@0.4.58":
+  version "0.4.58"
+  resolved "https://registry.yarnpkg.com/@kanaries/graphic-walker/-/graphic-walker-0.4.58.tgz#37af3369a37940ee7ec27fcea23bb21871820265"
+  integrity sha512-F/nSmcdH9dN1DxCCJXHGBWgHQmiMCvBy3G2WJ4EeedGSonW1sf0odwvfrY/vzOKFOlDCrsh79o8THUn8yesrTw==
   dependencies:
     "@headlessui-float/react" "^0.11.4"
     "@headlessui/react" "1.7.12"
@@ -1117,10 +1117,10 @@
     vega-lite "^5.6.0"
     vega-webgl-renderer "^1.0.0-beta.2"
 
-"@kanaries/gw-dsl-parser@0.1.45-rc6":
-  version "0.1.45-rc6"
-  resolved "https://registry.yarnpkg.com/@kanaries/gw-dsl-parser/-/gw-dsl-parser-0.1.45-rc6.tgz#1ede8cea7fc867af79bc6ee13302ef3da609e854"
-  integrity sha512-uPmwJXzKpQf0/27Cf7hrCoSDw2qZwnXjsLJ5HkQdra1Jb6HogmVHpKGu6MN4eQjly4mlDAyrCXFjQCeEX55/BQ==
+"@kanaries/gw-dsl-parser@0.1.47":
+  version "0.1.47"
+  resolved "https://registry.yarnpkg.com/@kanaries/gw-dsl-parser/-/gw-dsl-parser-0.1.47.tgz#b31f990bb66940b0b94434b2e016be72fb3fcc81"
+  integrity sha512-aFdu/+0bJeR5J06j7r1Upj/B8WQnsssEpCWIif93dn1xup0HvYq+5iKm1lxW4OIvYi0/Ti1vCqjOuqVPB6D+ow==
 
 "@kanaries/react-beautiful-dnd@^0.1.1":
   version "0.1.1"
diff --git a/pygwalker/__init__.py b/pygwalker/__init__.py
index 1c778ad..1e53068 100644
--- a/pygwalker/__init__.py
+++ b/pygwalker/__init__.py
@@ -10,7 +10,7 @@
 from pygwalker.services.global_var import GlobalVarManager
 from pygwalker.services.kaggle import show_tips_user_kaggle as __show_tips_user_kaggle
 
-__version__ = "0.4.8a7"
+__version__ = "0.4.8a8"
 __hash__ = __rand_str()
 
 from pygwalker.api.jupyter import walk, render, table
diff --git a/pyproject.toml b/pyproject.toml
index 220580a..a0dca0c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -25,7 +25,7 @@ dependencies = [
     "requests",
     "arrow",
     "sqlalchemy",
-    "gw_dsl_parser==0.1.45a6",
+    "gw_dsl_parser==0.1.47",
     "appdirs",
     "segment-analytics-python==2.2.3",
     "pandas",