adding tooltip for metadata

ml4ai · Jan 27, 2024 · 7776fc1 · 7776fc1
1 parent d164077
commit 7776fc1
Show file tree

Hide file tree

Showing 4 changed files with 244 additions and 40 deletions.
diff --git a/.github/workflows/test-and-deploy.yml b/.github/workflows/test-and-deploy.yml
@@ -1,18 +1,15 @@
-
-name: Test and deploy
+name: Deploy
 
 on:
   push:
     branches:
       - main
-
   pull_request:
     branches:
       - main
 
-# see https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-gatsby
 jobs:
-  build:
+  deploy:
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
@@ -22,11 +19,6 @@ jobs:
         with:
           node-version: "16"
 
-      # deps
-      #- run: sudo yarn global add <pkg>@^<version> --prefix /usr/local
-      #- run: yarn add <pkg>@^<version>
-
-      # install deps
       - run: yarn install
 
       - name: Cache dependencies
@@ -37,16 +29,8 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      #- run: npm ci
-      - run: npm run build
       - name: Deploy
         if: github.ref == 'refs/heads/main'
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          # see https://docs.github.com/en/free-pro-team@latest/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
-          user_name: 'github-actions[bot]'
-          user_email: 'github-actions[bot]@users.noreply.github.com'
-          commit_message: ${{ github.event.head_commit.message }}
-
+        run: npm run deploy
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/src/App.vue b/src/App.vue
@@ -50,6 +50,7 @@
         </vue-json-pretty>
       </div>
       <div class="svg-container">
+        <div id="tooltip" class="tooltip" style="opacity: 0;"></div>
         <!-- <svg width="100" height="100">
           <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" :fill="svgColor"/>
         </svg> -->
@@ -71,7 +72,9 @@ import VueJsonPretty from 'vue-json-pretty-highlight-row';
 import 'vue-json-pretty-highlight-row/lib/styles.css';
 import { getBoxLayout } from './utils/layout';
 import { drawBox } from './utils/drawBox';
-
+import { setGromet } from './utils/global.js';
+// import Vue from 'vue';
+// Vue.prototype.$gromet = { data: null };
 export default {
   name: 'App',
   components: {
@@ -147,12 +150,14 @@ export default {
         .on('zoom', handleZoom);
       svg.call(zoom);
       const graphData = this.gromet.modules[0];
+      setGromet(graphData);
       const fn0 = graphData.fn;
       const fnS = graphData.fn_array;
       let currentFN = fn0;
       if (this.startingFN !== 0){
         currentFN = fnS[this.startingFN-1];
       }
+      // console.log(graphData)
       const layout = getBoxLayout(currentFN);
       drawBox(layout, fnS, 0);
       // test
@@ -548,4 +553,18 @@ pre {
 span {
     text-align: left !important;
 }
+
+.tooltip {
+  position: absolute;
+  text-align: left;
+  width: auto;
+  height: auto;
+  padding: 5px;
+  font: 12px sans-serif;
+  background: lightsteelblue;
+  border: 0px;
+  border-radius: 8px;
+  pointer-events: none; /* 确保用户可以与下面的元素交互 */
+}
+
 </style>