Merge pull request #163 from dbcls/develop

Develop
dbcls · Mar 14, 2022 · b3e11fa · b3e11fa
2 parents e0ad493 + ef5b281
commit b3e11fa
Show file tree

Hide file tree

Showing 49 changed files with 1,635 additions and 841 deletions.
diff --git a/deploy/run-dev.sh b/deploy/run-dev.sh
@@ -0,0 +1,46 @@
+#!/bin/sh
+
+BASE = $HOME/dev
+
+update() {
+    cd $BASE/repos/umakaviewer
+    git pull origin develop
+}
+
+rebuild() {
+    cd $BASE/repos/umakaviewer
+    docker-compose -p umakaviewer build
+}
+
+start() {
+    cd $BASE/repos/umakaviewer
+    docker-compose -p umakaviewer up -d
+}
+
+stop() {
+    cd $BASE/repos/umakaviewer
+    docker-compose -p umakaviewer down
+}
+
+restart() {
+    cd $BASE/repos/umakaviewer
+    docker-compose -p umakaviewer restart
+}
+
+ps() {
+    cd $BASE/repos/umakaviewer
+    docker-compose -p umakaviewer ps
+}
+
+main() {
+    case $1 in
+        "update" ) update ;;
+        "rebuild" ) rebuild ;;
+        "start" ) start ;;
+        "stop" ) stop ;;
+        "restart" ) restart ;;
+        "ps" ) ps ;;
+    esac
+}
+
+main $1
diff --git a/dev/dev.docker-compose.yml b/dev/dev.docker-compose.yml
@@ -0,0 +1,33 @@
+version: "3"
+services:
+  mysql:
+    container_name: umaka-mysql-dev
+    build:
+      context: ../mysql
+    environment:
+      MYSQL_ALLOW_EMPTY_PASSWORD: 1
+      MYSQL_USER: umaka_v
+      MYSQL_DATABASE: dbcls_production
+      MYSQL_PASSWORD: glnyUnLiybsaE968Z7
+  redis:
+    container_name: umaka-redis-dev
+    image: redis:5.0-alpine
+  api:
+    container_name: umaka-api-dev
+    image: api-dev
+    build:
+      context: ../server
+    depends_on:
+      - mysql
+      - redis
+    volumes:
+      - /opt/services/umaka_v/firebase/adminsdk.json:/app/firebase-config.json
+  nginx:
+    container_name: umaka-nginx-dev
+    image: nginx-dev
+    build:
+      context: ../node
+    ports:
+      - 10080:80
+    depends_on:
+      - api
diff --git a/docker/default.conf b/docker/default.conf
@@ -15,4 +15,12 @@ server {
   location / {
     try_files $uri /index.html;
   }
+
+  location /api {
+    proxy_pass http://docker.for.mac.localhost:5000;
+  }
+
+  location /yasgui {
+    try_files $uri /yasgui.html;
+  }
 }
diff --git a/node/nginx/nginx.conf b/node/nginx/nginx.conf
@@ -43,8 +43,7 @@ http {
 
   server {
     listen       80;
-    server_name  v.umaka.dbcls.jp;
-    server_name  umaka-viewer.dbcls.jp;
+    server_name  umaka-viewer-dev.dbcls.jp;
     client_max_body_size 2g;
     root /public;
 
@@ -53,15 +52,11 @@ http {
     #   return 301 https://umaka-viewer.dbcls.jp$request_uri;
     # }
 
-    if ($host != "umaka-viewer.dbcls.jp") {
-      return 301 https://umaka-viewer.dbcls.jp$request_uri;
-    }
-
     location /api {
       proxy_pass http://api:5000;
       # include /home/umaka_v/local/nginx/uwsgi_params;
       # uwsgi_pass unix:/opt/services/umaka_v/uwsgi/uwsgi.sock;
-      proxy_set_header host "umaka-viewer.dbcls.jp";
+      proxy_set_header host "umaka-viewer-dev.dbcls.jp";
     }
 
     location /static {
@@ -74,5 +69,9 @@ http {
       try_files $uri /index.html;
       add_header Cache-Control no-cache;
     }
+
+    location /yasgui {
+      try_files $uri /yasgui.html;
+    }
   }
 }
diff --git a/node/package.json b/node/package.json
@@ -42,12 +42,14 @@
     "moment": "2.29.1",
     "react": "16.14.0",
     "react-contenteditable": "3.3.5",
+    "react-contexify": "^5.0.0",
     "react-dom": "16.14.0",
     "react-dropzone": "10.2.2",
     "react-intl": "3.12.1",
     "react-redux": "7.2.2",
     "react-router-dom": "5.2.0",
     "react-toastify": "5.5.0",
+    "react-tooltip": "^4.2.21",
     "redux": "4.0.5",
     "redux-form": "8.3.7",
     "redux-saga": "1.1.3",

diff --git a/node/src/html/yasgui.html b/node/src/html/yasgui.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Yasgui</title>
+    <link href="https://unpkg.com/@triply/yasgui/build/yasgui.min.css" rel="stylesheet" type="text/css" />
+    <script src="https://unpkg.com/@triply/yasgui/build/yasgui.min.js"></script>
+  </head>
+  <body>
+    <div id="yasgui"></div>
+    <script>
+      const yasgui = new Yasgui(document.getElementById("yasgui"), {
+        corsProxy: "/api/v1/proxy"
+      });
+    </script>
+  </body>
+</html>
diff --git a/node/src/style/server/style.css b/node/src/style/server/style.css
@@ -2,6 +2,7 @@
 @import "_mixin.css";
 @import "_common.css";
 @import "~sanitize.css/lib/sanitize.scss";
+@import "~react-contexify/scss/main.scss";
 
 /*login*/
 @import "_login.css";

diff --git a/node/src/style/style.scss b/node/src/style/style.scss
@@ -82,12 +82,12 @@ $breadcrumbs-height: 47px;
   }
 }
 
-div:after,
-ul:after {
-  content: "";
-  display: block;
-  clear: both;
-}
+// div:after,
+// ul:after {
+//   content: "";
+//   display: block;
+//   clear: both;
+// }
 
 html {
   height: 100%;
@@ -142,11 +142,6 @@ html {
   padding: 0 4px;
 }
 
-.arrow-line-base {
-  stroke: #666;
-  stroke-width: 4;
-  fill: none;
-}
 .arrow-line {
   stroke: #666;
   stroke-width: 3;
@@ -246,7 +241,10 @@ body {
           line-height: 16px;
           list-style-type: none;
           padding: 0 0 16px 16px;
-
+          justify-content: space-between;
+          align-items: center;
+          padding-right: 12px;
+          font-weight: bold;
           .text {
             display: inline-block;
             font-size: 14px;
@@ -258,10 +256,6 @@ body {
             width: auto;
           }
 
-          li:last-child {
-            margin-left: auto;
-            margin-right: 40px;
-          }
         }
       }
 
@@ -320,6 +314,7 @@ body {
                   display: inline-block;
                   width: 18px;
                   height: 18px;
+                  line-height: 18px;
                   text-align: center;
                   border-radius: 3px;
                   color: white;
@@ -620,18 +615,33 @@ body {
           height: 20px;
           overflow: hidden;
           tspan {
-            fill: #444;
+            fill: $white-color;
             font-size: 18px;
             font-weight: bold;
             line-height: 1.8;
             text-shadow:
-              0 0 2px $white-color, 0 0 2px $white-color, 0 0 2px $white-color, 0 0 2px $white-color,
-              0 0 2px $white-color, 0 0 2px $white-color, 0 0 2px $white-color, 0 0 2px $white-color,
-              0 0 2px $white-color, 0 0 2px $white-color, 0 0 2px $white-color, 0 0 2px $white-color,
-              0 0 2px $white-color, 0 0 2px $white-color, 0 0 2px $white-color, 0 0 2px $white-color;
+              0 0 2px #444, 0 0 2px #444, 0 0 2px #444, 0 0 2px #444,
+              0 0 2px #444, 0 0 2px #444, 0 0 2px #444, 0 0 2px #444,
+              0 0 2px #444, 0 0 2px #444, 0 0 2px #444, 0 0 2px #444,
+              0 0 2px #444, 0 0 2px #444, 0 0 2px #444, 0 0 2px #444;
           }
         }
       }
+      g#lines {
+        path {
+          stroke: #666;
+          stroke-width: 4;
+          fill: none;
+        }
+      }
+      g#lines-nodes {
+        circle {
+          r: 8;
+          stroke: #666;
+          fill: #666;
+        }
+      }
+
     }
 
     figure {
@@ -1392,19 +1402,46 @@ body {
   font-size: 14px;
   z-index: 5;
 
-  p, li {
-    margin-top: 8px;
-    list-style-type: none;
+  > * {
+    margin-bottom: 12px;
+    :last-child {
+      margin-bottom: 0;
+    }
   }
 
-  .subject {
-    margin-top: 16px;
+  .detail, .uri {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    h4 {
+      margin-right: 8px;
+    }
+  }
+
+  .subject, .object {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    li {
+      margin-top: 8px;
+      list-style-type: none;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
   }
 
   .object {
     color: #a567a7;
   }
 
+  .detail h4 {
+    font-weight: bold;
+  }
+  :not(.detail) h4 {
+    @extend .legend-label;
+  }
+
   .arrow {
     position: absolute;
     left: calc(50% - 25px);
@@ -1419,9 +1456,13 @@ body {
     }
 
     &.downward {
-      bottom: -25px;
+      bottom: -35px;
       border-width: 25px 25px 0 25px;
     }
+
+    &.none {
+      display: none;
+    }
   }
 }
 

diff --git a/node/src/ts/ApiClient.ts b/node/src/ts/ApiClient.ts
@@ -4,8 +4,7 @@ import firebase from 'firebase'
 import { Url, PUBLIC_DATA_SET_SIZE_PER_PAGE } from './constants'
 import { PublicDataSetParams } from './actions/data-set-list'
 import { DataSetParams } from './actions/admin'
-
-declare const API_ENDPOINT: string
+import { getApiEndpoint } from './utils'
 
 class ApiClient {
   user: firebase.User | null
@@ -14,7 +13,7 @@ class ApiClient {
 
   constructor() {
     this.api = axios.create({
-      baseURL: API_ENDPOINT,
+      baseURL: getApiEndpoint(),
     })
   }
 

diff --git a/node/src/ts/actions/visualize.ts b/node/src/ts/actions/visualize.ts
@@ -1,5 +1,5 @@
 import { Action } from 'redux'
-import { Content } from '../visualizer'
+import { Content } from '../visualizer/types'
 
 export enum VisualizeActionNames {
   GET_DATA_SET = 'visualize/get-data-set',

diff --git a/node/src/ts/components/App.tsx b/node/src/ts/components/App.tsx
@@ -48,6 +48,7 @@ const App = (props: { runRootSaga: () => void }) => {
             firebaseUser === null &&
             !location.pathname.startsWith(`${Url.VISUALIZER_PREFIX}/`) &&
             location.pathname !== Url.PUBLIC_DATA_SETS &&
+            location.pathname !== Url.SIGN_UP &&
             location.pathname !== Url.LOGIN
           ) {
             return <Redirect to={Url.LOGIN} />

diff --git a/node/src/ts/components/Visualize.tsx b/node/src/ts/components/Visualize.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
 import { GetDataSetAction, VisualizedDataSet } from '../actions/visualize'
 
-import Visualizer, { Content } from '../visualizer'
+import Visualizer from '../visualizer'
+import { Content } from '../visualizer/types'
 
 interface Props {
   match: {
@@ -20,7 +21,13 @@ const Visualize = (props: Props) => {
     classes: {},
     properties: [],
     prefixes: {},
-    meta_data: {},
+    meta_data: {
+      properties: 0,
+      triples: 0,
+      classes: 0,
+      endpoint: '',
+      crawl_date: '',
+    },
   })
 
   React.useEffect(() => {