Merge pull request #53 from 4paradigm/feat/refine_computed_features

feat: refine computed features
4paradigm · Jan 10, 2024 · a8ae24a · a8ae24a
2 parents f2d43dd + 36a8c98
commit a8ae24a
Show file tree

Hide file tree

Showing 30 changed files with 1,831 additions and 65 deletions.
diff --git a/frontend/src/components/BigScreenPage.vue b/frontend/src/components/BigScreenPage.vue
@@ -9,7 +9,7 @@
     <a-typography-title>{{ $t('Feature Platform') }}</a-typography-title>
     <a-typography-paragraph>
       <blockquote>
-        OpenMLDB 特征平台是基于特征数据库实现的 Feature Store 服务，用户使用 SQL 来定义特征，离线场景中选择特征生成离线样本，在线场景中选择特征实现实时特征计算。
+        {{ $t('Text of Introduce OpenMLDB') }}
       </blockquote>
     </a-typography-paragraph>
   </a-typography>

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
@@ -5,7 +5,7 @@
 
 <a-layout class="layout">
   <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }">
-    <a-menu theme="dark" mode="inline" class="navi-menu" :openKeys="['whole_process_wizard', 'advanced_management', 'languages']">
+    <a-menu theme="dark" mode="inline" class="navi-menu" :openKeys="['whole_process_wizard', 'advanced_usage', 'advanced_management', 'languages']">
 
       <a-menu-item key="bigscrren">
         <router-link to='/'>{{ $t('Feature Big Screen') }}</router-link>
@@ -25,9 +25,18 @@
         <a-menu-item key="online">
           <router-link to='/developprocess/online'>{{ $t('Online Scenario') }}</router-link>
         </a-menu-item>
+      </a-sub-menu>
+
+      <a-sub-menu key="advanced_usage">
+        <template #title>{{ $t('Advanced Usage') }}</template>
+
 
         <a-menu-item key="sql">
-          <router-link to='/sql'>{{ $t('SQL Scenario') }}</router-link>
+          <router-link to='/sql'>{{ $t('SQL Playground') }}</router-link>
+        </a-menu-item>
+
+        <a-menu-item key="computedfeatures">
+          <router-link to='/computedfeatures'>{{ $t('Computed Features') }}</router-link>
         </a-menu-item>
       </a-sub-menu>
 

diff --git a/frontend/src/components/OfflineScenario.vue b/frontend/src/components/OfflineScenario.vue
@@ -17,26 +17,30 @@
     <a-typography-title :level="2">{{ $t('Offline Scenario') }}</a-typography-title>
     <a-typography-paragraph>
       <blockquote>
-        离线场景是使用分布式计算，对离线数据进行特征计算并导出机器学习所需的样本文件，用户首先<a-button type="link" @click="clickCreateFeature">{{ $t('Create Feature') }}</a-button>，然后选择特征来<a-button type="link" @click="showCreateOfflineSampleFormModal">{{ $t('Export Offline Sample') }}</a-button>。
+        {{ $t('Text of Offline Scenario') }}
       </blockquote>
     </a-typography-paragraph>
   </a-typography>
 
   <br/>
-  <h1>{{ $t('Offline Samples') }}</h1>
+  <h1>
+    {{ $t('Offline Samples') }}<a-button type="link" @click="showCreateOfflineSampleFormModal"><PlusCircleOutlined /></a-button>
+  </h1>
   <OfflineSamplesData></OfflineSamplesData>
 
 </div>
 </template>
 
 <script>
+import { PlusCircleOutlined } from '@ant-design/icons-vue';
 import OfflineSamplesData from '@/components/offlinesample/OfflineSamplesData.vue'
 import OfflineTables from '@/components/table/OfflineTables.vue'
 import CreateOfflineSampleForm from '@/components/form/CreateOfflineSampleForm.vue'
 import CreateFeatureForm from '@/components/form/CreateFeatureForm.vue'
 
 export default {
   components: {
+    PlusCircleOutlined,
     OfflineSamplesData,
     OfflineTables,
     CreateOfflineSampleForm,

diff --git a/frontend/src/components/OnlineScenario.vue b/frontend/src/components/OnlineScenario.vue
@@ -17,13 +17,15 @@
     <a-typography-title :level="2">{{ $t('Online Scenario') }}</a-typography-title>
     <a-typography-paragraph>
       <blockquote>
-        在线场景是上线特征服务，使用在线数据提供硬实时的在线特征抽取接口，用户首先<a-button type="link" @click="clickCreateFeature">{{ $t('Create Feature') }}</a-button>，然后选择特征来<a-button type="link" @click="showCreateFeatureServiceFormModal">{{ $t('Create Feature Service') }}</a-button>。
+        {{ $t('Text of Online Scenario') }}
       </blockquote>
     </a-typography-paragraph>
   </a-typography>
 
   <br/>
-  <h1>{{ $t('Feature Services') }}</h1>
+  <h1>
+    {{ $t('Feature Services') }}<a-button type="link" @click="showCreateFeatureServiceFormModal"><PlusCircleOutlined /></a-button>
+  </h1>
   <FeatureServicesData></FeatureServicesData>
 
 </div>
@@ -34,9 +36,11 @@ import FeatureServicesData from '@/components/featureservice/FeatureServicesData
 import OnlineTables from '@/components/table/OnlineTables.vue';
 import CreateFeatureServiceForm from '@/components/form/CreateFeatureServiceForm.vue';
 import CreateFeatureForm from '@/components/form/CreateFeatureForm.vue'
+import { PlusCircleOutlined } from '@ant-design/icons-vue';
 
 export default {
   components: {
+    PlusCircleOutlined,
     FeatureServicesData,
     OnlineTables,
     CreateFeatureServiceForm,

diff --git a/frontend/src/components/SqlScenario.vue b/frontend/src/components/SqlScenario.vue
@@ -24,10 +24,10 @@
 
   <br/>
   <a-typography>
-    <a-typography-title :level="2">{{ $t('SQL Scenario') }}</a-typography-title>
+    <a-typography-title :level="2">{{ $t('SQL Playground') }}</a-typography-title>
     <a-typography-paragraph>
       <blockquote>
-        用户可以执行任意的 OpenMLDB SQL 语句，在线模式下会请求在线数据库，可进行在线数据的增删改查；离线模式下会提交分布式执行的 SQL，可进行离线探索或样本生成。
+        {{ $t('Text of SQL Playground') }}
       </blockquote>
     </a-typography-paragraph>
   </a-typography>

diff --git a/frontend/src/components/SqlUsageDoc.vue b/frontend/src/components/SqlUsageDoc.vue
@@ -12,7 +12,7 @@
       <a-popconfirm
           title="确定复制到输入框？"
           @confirm="handleCopy(scope.record.sql)">
-        <a-button type="primary">复制</a-button>
+        <a-button type="primary">{{ $t('Copy') }}</a-button>
       </a-popconfirm>
     </template>
   </a-table>
@@ -38,13 +38,13 @@ export default {
 
       columns: [
           {
-            title: '功能',
+            title: this.$t('Function'),
             dataIndex: 'function',
             key: 'function',
             fixed: 'left',
           },
           {
-            title: '示例',
+            title: this.$t('Example'),
             dataIndex: 'sql',
             key: 'sql',
             slots: { customRender: 'content' }