UI: Menu and routing works with style reminiscent of aitestory

rpdata-ui/package-lock.json

@@ -46,6 +46,15 @@
           "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
           "dev": true
         },
+        "graphql": {
+          "version": "0.9.6",
+          "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
+          "integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
+          "dev": true,
+          "requires": {
+            "iterall": "^1.0.0"
+          }
+        },
         "invariant": {
           "version": "2.2.2",
           "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
@@ -69,6 +78,22 @@
         }
       }
     },
+    "@types/async": {
+      "version": "2.0.49",
+      "resolved": "https://registry.npmjs.org/@types/async/-/async-2.0.49.tgz",
+      "integrity": "sha512-Benr3i5odUkvpFkOpzGqrltGdbSs+EVCkEBGXbuR7uT0VzhXKIkhem6PDzHdx5EonA+rfbB3QvP6aDOw5+zp5Q==",
+      "optional": true
+    },
+    "@types/graphql": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.12.6.tgz",
+      "integrity": "sha512-wXAVyLfkG1UMkKOdMijVWFky39+OD/41KftzqfX1Oejd0Gm6dOIKjCihSVECg6X7PHjftxXmfOKA/d1H79ZfvQ=="
+    },
+    "@types/zen-observable": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.5.4.tgz",
+      "integrity": "sha512-sW6xN96wUak4tgc89d0tbTg7QDGYhGv5hvQIS6h4mRCd8h2btiZ80loPU8cyLwsBbA4ZeQt0FjvUhJ4rNhdsGg=="
+    },
     "abab": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
@@ -139,14 +164,14 @@
       "integrity": "sha512-z55ocwKBRLryBs394Sm3ushTtBeg6VAeuku7utSoSnsJKvKcnXFIyC6vh27n3rXyxSgkJBBCAvyOn7gSUcTYjg=="
     },
     "ajv": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
-      "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz",
+      "integrity": "sha512-hOs7GfvI6tUI1LfZddH82ky6mOMyTuY0mk7kE2pWpmhhUSkumzaTO5vbVwij39MdwPQWCV4Zv57Eo06NtL/GVA==",
       "requires": {
-        "co": "^4.6.0",
-        "fast-deep-equal": "^1.0.0",
+        "fast-deep-equal": "^2.0.1",
         "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.3.0"
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.1"
       }
     },
     "ajv-keywords": {
@@ -293,6 +318,54 @@
         }
       }
     },
+    "apollo-boost": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/apollo-boost/-/apollo-boost-0.1.10.tgz",
+      "integrity": "sha512-Bevaab5xqmOuxVmn8DV+7suoKP/ADX8NKzvfZhD3LgbP72MzpFXxulnP5/xSIBKn08mZvloeYGYdQkoxa7q3/Q==",
+      "requires": {
+        "apollo-cache": "^1.1.12",
+        "apollo-cache-inmemory": "^1.2.5",
+        "apollo-client": "^2.3.5",
+        "apollo-link": "^1.0.6",
+        "apollo-link-error": "^1.0.3",
+        "apollo-link-http": "^1.3.1",
+        "apollo-link-state": "^0.4.0",
+        "graphql-tag": "^2.4.2"
+      }
+    },
+    "apollo-cache": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.1.12.tgz",
+      "integrity": "sha512-D0BPiHvJ6vIrXRh6P4mwlxuUOvODGuJxJq+zIjP8fADIqwjYtH3U3d/PY8dQ2fn4bDbvIAWBUkADBuJLpLIIpg==",
+      "requires": {
+        "apollo-utilities": "^1.0.16"
+      }
+    },
+    "apollo-cache-inmemory": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.2.5.tgz",
+      "integrity": "sha512-D9KIT4bq7ORm0BVXjSIxU09SvTUunWKxM63Lvr81hR83I7B7RRM3uFBDUV9VG8rlIGkD+1obBNlW2ycerFV8wQ==",
+      "requires": {
+        "apollo-cache": "^1.1.12",
+        "apollo-utilities": "^1.0.16",
+        "graphql-anywhere": "^4.1.14"
+      }
+    },
+    "apollo-client": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.3.5.tgz",
+      "integrity": "sha512-FYg+Mj/HWSaO/ZllT5JnyHGUhkFhZ+UOdEvJd/DYKjxHNPal/d3jyXtG947r4IhUqPmmxXsAXNwvJGPieBKJGg==",
+      "requires": {
+        "@types/async": "2.0.49",
+        "@types/zen-observable": "^0.5.3",
+        "apollo-cache": "^1.1.12",
+        "apollo-link": "^1.0.0",
+        "apollo-link-dedup": "^1.0.0",
+        "apollo-utilities": "^1.0.16",
+        "symbol-observable": "^1.0.2",
+        "zen-observable": "^0.8.0"
+      }
+    },
     "apollo-codegen": {
       "version": "0.10.13",
       "resolved": "https://registry.npmjs.org/apollo-codegen/-/apollo-codegen-0.10.13.tgz",
@@ -308,6 +381,77 @@
         "node-fetch": "^1.5.3",
         "source-map-support": "^0.4.2",
         "yargs": "^7.0.1"
+      },
+      "dependencies": {
+        "graphql": {
+          "version": "0.9.6",
+          "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
+          "integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
+          "dev": true,
+          "requires": {
+            "iterall": "^1.0.0"
+          }
+        }
+      }
+    },
+    "apollo-link": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.2.tgz",
+      "integrity": "sha512-Uk/BC09dm61DZRDSu52nGq0nFhq7mcBPTjy5EEH1eunJndtCaNXQhQz/BjkI2NdrfGI+B+i5he6YSoRBhYizdw==",
+      "requires": {
+        "@types/graphql": "0.12.6",
+        "apollo-utilities": "^1.0.0",
+        "zen-observable-ts": "^0.8.9"
+      }
+    },
+    "apollo-link-dedup": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/apollo-link-dedup/-/apollo-link-dedup-1.0.9.tgz",
+      "integrity": "sha512-RbuEKpmSHVMtoREMPh2wUFTeh65q+0XPVeqgaOP/rGEAfvLyOMvX0vT2nVaejMohoMxuUnfZwpldXaDFWnlVbg==",
+      "requires": {
+        "apollo-link": "^1.2.2"
+      }
+    },
+    "apollo-link-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/apollo-link-error/-/apollo-link-error-1.1.0.tgz",
+      "integrity": "sha512-4Vu/IUn6Kn6+Fthym4iuqypCKcLdwTg3MaCvtLdaLbt9X2hNCq3y8mv6vuWIlAY51X8wKhCgYghQSOs5R/embQ==",
+      "requires": {
+        "apollo-link": "^1.2.2"
+      }
+    },
+    "apollo-link-http": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/apollo-link-http/-/apollo-link-http-1.5.4.tgz",
+      "integrity": "sha512-e9Ng3HfnW00Mh3TI6DhNRfozmzQOtKgdi+qUAsHBOEcTP0PTAmb+9XpeyEEOueLyO0GXhB92HUCIhzrWMXgwyg==",
+      "requires": {
+        "apollo-link": "^1.2.2",
+        "apollo-link-http-common": "^0.2.4"
+      }
+    },
+    "apollo-link-http-common": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/apollo-link-http-common/-/apollo-link-http-common-0.2.4.tgz",
+      "integrity": "sha512-4j6o6WoXuSPen9xh4NBaX8/vL98X1xY2cYzUEK1F8SzvHe2oFONfxJBTekwU8hnvapcuq8Qh9Uct+gelu8T10g==",
+      "requires": {
+        "apollo-link": "^1.2.2"
+      }
+    },
+    "apollo-link-state": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/apollo-link-state/-/apollo-link-state-0.4.1.tgz",
+      "integrity": "sha512-69/til4ENfl/Fvf7br2xSsLSBcxcXPbOHVNkzLLejvUZickl93HLO4/fO+uvoBi4dCYRgN17Zr8FwI41ueRx0g==",
+      "requires": {
+        "apollo-utilities": "^1.0.8",
+        "graphql-anywhere": "^4.1.0-alpha.0"
+      }
+    },
+    "apollo-utilities": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.0.16.tgz",
+      "integrity": "sha512-5oKnElKqkV920KRbitiyISLeG63tUGAyNdotg58bQSX9Omr+smoNDTIRMRLbyIdKOYLaw3LpDaRepOPqljj0NQ==",
+      "requires": {
+        "fast-json-stable-stringify": "^2.0.0"
       }
     },
     "append-transform": {
@@ -3203,6 +3347,17 @@
         "text-table": "~0.2.0"
       },
       "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "^4.6.0",
+            "fast-deep-equal": "^1.0.0",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.3.0"
+          }
+        },
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
@@ -3231,6 +3386,11 @@
           "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
           "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw=="
         },
+        "fast-deep-equal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+          "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
+        },
         "js-yaml": {
           "version": "3.12.0",
           "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz",
@@ -3240,6 +3400,11 @@
             "esprima": "^4.0.0"
           }
         },
+        "json-schema-traverse": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
+          "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
+        },
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
@@ -3799,9 +3964,9 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
     "fast-deep-equal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
-      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
     },
     "fast-json-stable-stringify": {
       "version": "2.0.0",
@@ -4078,8 +4243,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4114,8 +4278,7 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -4123,8 +4286,7 @@
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4227,8 +4389,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4238,7 +4399,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4350,8 +4510,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4466,7 +4625,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4484,7 +4642,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4671,12 +4828,19 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
     },
     "graphql": {
-      "version": "0.9.6",
-      "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
-      "integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
-      "dev": true,
+      "version": "0.13.2",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.13.2.tgz",
+      "integrity": "sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog==",
       "requires": {
-        "iterall": "^1.0.0"
+        "iterall": "^1.2.1"
+      }
+    },
+    "graphql-anywhere": {
+      "version": "4.1.14",
+      "resolved": "https://registry.npmjs.org/graphql-anywhere/-/graphql-anywhere-4.1.14.tgz",
+      "integrity": "sha512-Wy4h9FWwxgrDRP16wXApP/VmNKXXTvY8jZLDtgxwDuC8Z6LSVkeCDjQSCyNKdgktky104UCbIQ3x+et9bQupDA==",
+      "requires": {
+        "apollo-utilities": "^1.0.16"
       }
     },
     "graphql-language-service-config": {
@@ -4699,6 +4863,17 @@
         "graphql-language-service-parser": "0.0.10",
         "graphql-language-service-types": "0.0.16",
         "graphql-language-service-utils": "0.0.10"
+      },
+      "dependencies": {
+        "graphql": {
+          "version": "0.9.6",
+          "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
+          "integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
+          "dev": true,
+          "requires": {
+            "iterall": "^1.0.0"
+          }
+        }
       }
     },
     "graphql-language-service-parser": {
@@ -4717,6 +4892,17 @@
       "dev": true,
       "requires": {
         "graphql": "^0.9.6"
+      },
+      "dependencies": {
+        "graphql": {
+          "version": "0.9.6",
+          "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
+          "integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
+          "dev": true,
+          "requires": {
+            "iterall": "^1.0.0"
+          }
+        }
       }
     },
     "graphql-language-service-utils": {
@@ -4727,7 +4913,23 @@
       "requires": {
         "graphql": "^0.9.6",
         "graphql-language-service-types": "0.0.16"
+      },
+      "dependencies": {
+        "graphql": {
+          "version": "0.9.6",
+          "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.9.6.tgz",
+          "integrity": "sha1-UUQh6dIlwp38j9MFRZq65YgV7yw=",
+          "dev": true,
+          "requires": {
+            "iterall": "^1.0.0"
+          }
         }
+      }
+    },
+    "graphql-tag": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.9.2.tgz",
+      "integrity": "sha512-qnNmof9pAqj/LUzs3lStP0Gw1qhdVCUS7Ab7+SUB6KD5aX1uqxWQRwMnOGTkhKuLvLNIs1TvNz+iS9kUGl1MhA=="
     },
     "growly": {
       "version": "1.3.0",
@@ -4816,6 +5018,29 @@
       "requires": {
         "ajv": "^5.1.0",
         "har-schema": "^2.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "^4.6.0",
+            "fast-deep-equal": "^1.0.0",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.3.0"
+          }
+        },
+        "fast-deep-equal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+          "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
+        },
+        "json-schema-traverse": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
+          "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
+        }
       }
     },
     "has": {
@@ -4901,6 +5126,28 @@
         "upper-case": "^1.1.3"
       }
     },
+    "history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "requires": {
+        "invariant": "^2.2.1",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^2.2.0",
+        "value-equal": "^0.4.0",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -4911,6 +5158,11 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+    },
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -5867,8 +6119,7 @@
     "iterall": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.2.2.tgz",
-      "integrity": "sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==",
-      "dev": true
+      "integrity": "sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA=="
     },
     "jest": {
       "version": "20.0.4",
@@ -6499,9 +6750,9 @@
       "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
     },
     "json-schema-traverse": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
-      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "json-stable-stringify": {
       "version": "1.0.1",
@@ -9100,6 +9351,18 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-apollo": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-2.1.9.tgz",
+      "integrity": "sha512-o6otpfh/neSzNjaq2x1GL9+aFz13pxQ0si4h2XpE7ON1lXD24YwpdFF277s8h1KFSVRvZmpzLmrg9OyOU9mo+w==",
+      "requires": {
+        "fbjs": "^0.8.16",
+        "hoist-non-react-statics": "^2.5.0",
+        "invariant": "^2.2.2",
+        "lodash": "^4.17.10",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-dev-utils": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.1.tgz",
@@ -9141,6 +9404,33 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
       "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
     },
+    "react-router": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
+      "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
+      "requires": {
+        "history": "^4.7.2",
+        "hoist-non-react-statics": "^2.5.0",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.1",
+        "warning": "^4.0.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+      "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+      "requires": {
+        "history": "^4.7.2",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.1",
+        "react-router": "^4.3.1",
+        "warning": "^4.0.1"
+      }
+    },
     "react-scripts": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
@@ -9563,6 +9853,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
       "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY="
     },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -9700,6 +9995,29 @@
       "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
       "requires": {
         "ajv": "^5.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "^4.6.0",
+            "fast-deep-equal": "^1.0.0",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.3.0"
+          }
+        },
+        "fast-deep-equal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+          "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
+        },
+        "json-schema-traverse": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
+          "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
+        }
       }
     },
     "select-hose": {
@@ -10375,6 +10693,11 @@
         "upper-case": "^1.1.1"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
@@ -10959,6 +11282,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -10995,6 +11323,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz",
+      "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watch": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",
@@ -11052,6 +11388,17 @@
         "yargs": "^8.0.2"
       },
       "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "^4.6.0",
+            "fast-deep-equal": "^1.0.0",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.3.0"
+          }
+        },
         "ajv-keywords": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-2.1.1.tgz",
@@ -11084,6 +11431,11 @@
             }
           }
         },
+        "fast-deep-equal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+          "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
+        },
         "has-flag": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@@ -11097,6 +11449,11 @@
             "number-is-nan": "^1.0.0"
           }
         },
+        "json-schema-traverse": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
+          "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
+        },
         "load-json-file": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -11661,6 +12018,19 @@
           "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
         }
       }
+    },
+    "zen-observable": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.8.tgz",
+      "integrity": "sha512-HnhhyNnwTFzS48nihkCZIJGsWGFcYUz+XPDlPK5W84Ifji8SksC6m7sQWOf8zdCGhzQ4tDYuMYGu5B0N1dXTtg=="
+    },
+    "zen-observable-ts": {
+      "version": "0.8.9",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.9.tgz",
+      "integrity": "sha512-KJz2O8FxbAdAU5CSc8qZ1K2WYEJb1HxS6XDRF+hOJ1rOYcg6eTMmS9xYHCXzqZZzKw6BbXWyF4UpwSsBQnHJeA==",
+      "requires": {
+        "zen-observable": "^0.8.0"
+      }
     }
   }
 }

rpdata-ui/package.json

@@ -3,8 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "ajv": "^6.5.2",
+    "apollo-boost": "^0.1.10",
+    "graphql": "^0.13.2",
+    "graphql-tag": "^2.9.2",
+    "pluralize": "^7.0.0",
     "react": "^16.4.1",
+    "react-apollo": "^2.1.9",
     "react-dom": "^16.4.1",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4"
   },
   "scripts": {
@@ -15,5 +23,10 @@
   },
   "devDependencies": {
     "@playlyfe/gql": "^2.6.0"
+  },
+  "proxy": {
+    "/graphql": {
+      "target": "http://127.0.0.1:17000"
+    }
   }
 }

rpdata-ui/src/App.css

@@ -1,3 +0,0 @@
-.App {
-  
-}

rpdata-ui/src/App.js

@@ -1,14 +1,23 @@
-import React, { Component } from 'react';
-import './App.css';
+import React, { Component } from 'react'
+import { Route, Router, Redirect, Switch } from "react-router-dom";
+
+import StoryRoot from './routes/story/StoryRoot';
+import LogsIndex from './routes/logs/LogsIndex';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <p>Hi</p>
+        <Switch>
+          <Redirect exact path="/" to="/story/" />
+          <Route path="/story/" component={StoryRoot}/>
+          <Route path="/logs/" component={LogsIndex}/>
+        </Switch>
       </div>
     );
   }
 }
 
 export default App;
+
+/* See ./common/Menu.js to change the top navbar */

rpdata-ui/src/client.js

@@ -0,0 +1,13 @@
+import { ApolloClient } from "apollo-client"
+import { HttpLink } from "apollo-link-http"
+import { InMemoryCache } from "apollo-cache-inmemory"
+
+const client = new ApolloClient({
+  link: new HttpLink({
+    uri: "/graphql"
+  }),
+  
+  cache: new InMemoryCache(),
+})
+
+export default client

rpdata-ui/src/colors.css

@@ -0,0 +1,76 @@
+/* /story/ */
+.theme-story .color-menu {
+  color: #789;
+}
+.theme-story .MenuLink.selected {
+  background-color: rgba(34, 187, 255, 0.125);
+}
+.theme-story .MenuLink:hover, .theme-story .Menu > .head-menu > a:hover {
+  background-color: rgba(34, 187, 255, 0.25);
+}
+.theme-story .color-primary {
+  color: #1CF;
+}
+.theme-story .color-text {
+  color: #ABC;
+}
+
+/* /logs/ */
+.theme-logs .color-menu {
+  color: #998;
+}
+.theme-logs .MenuLink.selected {
+  background-color: rgba(255, 187, 34, 0.125);
+}
+.theme-logs .MenuLink:hover, .theme-logs .Menu > .head-menu > a:hover {
+  background-color: rgba(255, 187, 34, 0.25);
+}
+.theme-logs .color-primary {
+  color: #FC1;
+}
+.theme-logs .color-text {
+  color: #CCB;
+}
+
+/* /data/ */
+.theme-data .color-menu {
+  color: #898;
+}
+.theme-data .MenuLink.selected {
+  background-color: rgba(35, 255, 128, 0.125);
+}
+.theme-data .MenuLink:hover, .theme-data .Menu > .head-menu > a:hover {
+  background-color: rgba(35, 255, 128, 0.25);
+}
+.theme-data .color-primary {
+  color: #1F8;
+}
+.theme-data .color-text {
+  color: #ACB;
+}
+
+/* Tag colors */
+.color-tag-event {
+  color: #B77;
+}
+.color-tag-location {
+  color: #7B7;
+}
+.color-tag-organization {
+  color: #B7B;
+}
+.color-tag-series {
+  color: #BB7;
+}
+.color-tag-character {
+  color: #37B;  
+}
+
+/* Danger */
+.color-danger {
+  color: #FA3;
+}
+
+.MenuLink:hover, .MenuLink:hover .text, .Menu > .head-menu > a:hover {
+  color: #EEE !important;
+}

rpdata-ui/src/common/Background.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import './css/Background.css';
+
+/**
+ * Background renders a full-size image that detects whether the source is
+ * landscape or portrait. It's a react-ification of AiteStory's background.
+ */
+export default class Background extends Component {
+  /**
+   * @param {HTMLImageElement} img 
+   */
+  onRef(img) {
+    if (img == null) {
+      return
+    }
+
+    if (img.complete && typeof(img.naturalHeight) !== 'undefined' && img.naturalHeight !== 0) {
+      const width = img.clientWidth
+      const height = img.clientHeight
+  
+      if(width > (height * 1.50)) {
+        img.className += ' landscape'
+      }
+    } else {
+      img.onload = function () {
+        const width = img.clientWidth
+        const height = img.clientHeight
+  
+        if(width > (height * 1.50)) {
+          img.className += ' landscape'
+        }
+      }
+    }  
+  }
+
+  render() {
+    const src = this.props.src || "/assets/images/bg.png"
+    const opacity = this.props.opacity || 0.25
+
+    return <img style={{filter: `brightness(${(Number(opacity)) * 100}%)`}} ref={this.onRef.bind(this)} className="Background" src={src} />
+  }
+}

rpdata-ui/src/common/Menu.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import { Link } from "react-router-dom";
+
+import './css/Menu.css';
+
+export default class Menu extends Component {
+  render() {
+    const { children } = this.props
+
+    return (
+      <nav className="Menu">
+        <h1 className="color-primary">Aite RP</h1>
+        <div className="head-menu">
+          <HeadMenuLink to="/story/">Story</HeadMenuLink>
+          <HeadMenuLink to="/logs/">Logs</HeadMenuLink>
+        </div>
+        <div className="content">
+          { children }
+        </div>
+      </nav>
+    )
+  }
+}
+
+export function MenuLink({ icon, children, tagType, to, onClick }) {
+  const isSelected = window.location.pathname === to
+  const className = isSelected ? "selected" : "not-selected"
+  const textClass = isSelected ? "color-primary" : `color-tag-${tagType||"none"}`
+
+  const body = (
+    <div className={`MenuLink color-menu ${className}`} onClick={onClick}>
+      <div className="icon color-primary">{icon}</div>
+      <div className={`text ${textClass}`}>{children}</div>
+    </div>
+  )
+
+  if (to == null) {
+    return body
+  } else {
+    return <Link to={to}>{body}</Link>
+  }
+}
+
+export function MenuGap() {
+  return <div className="MenuGap"></div>
+}
+
+export function MenuHeader({children}) {
+  return <div className="MenuHeader color-menu">{children}</div>
+}
+
+export function HeadMenuLink({to, children}) {
+  const className = (window.location.pathname.startsWith(to) ? "color-primary" : "color-menu")
+
+  return <Link className={className} to={to}>{children}</Link>
+}
+
+export function MenuBlurb({children}) {
+  return <div className="MenuBlurb">{children}</div>
+}

rpdata-ui/src/common/css/Background.css

@@ -0,0 +1,22 @@
+img.Background {
+  /* Set rules to fill background */
+  width: 100%;
+  /* Set up proportionate scaling */
+  min-height: 100%;
+  height: auto;
+  /* Set up positioning */
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+img.Background.landscape {
+  /* Set rules to fill background */
+  height: 100%;
+  /* Set up proportionate scaling */
+  min-width: 100%;
+  width: auto;
+}

rpdata-ui/src/common/css/Menu.css

@@ -0,0 +1,64 @@
+.Menu {
+  position: sticky;
+  width: 28ch;
+  text-align: center;
+}
+
+  .Menu > .head-menu {
+    padding: 0 2ch;
+    padding-bottom: 0.5em;
+  }
+
+    .Menu > .head-menu > a {
+      display: inline-block;
+      padding: 0.25em 1ch;
+
+      font-size: 0.75em;
+    }
+
+  .Menu > h1 {
+    padding: 1em 0 0em 0;
+    margin: 0;
+    font-size: 2.5em;
+
+    user-select: none;
+  }
+
+  .Menu > .content {
+    margin-top: 1em;
+    text-align: left;
+  }
+
+.MenuLink {
+  width: 100%;
+  padding-left: 0.5ch;
+  font-size: 1.1em;
+
+  cursor: pointer;
+}
+
+  .MenuLink .icon {
+    display: inline-block;
+    width: 3ch;
+    padding: 0.15em 0.125em;
+    text-align: center;
+  }
+
+  .MenuLink .text {
+    display: inline-block;
+  }
+
+.MenuGap {
+  padding: 0.25em;
+}
+
+.MenuHeader {
+  opacity: 0.5;
+  user-select: none;
+  padding: 0.125em 1.5ch;
+}
+
+.MenuBlurb {
+  opacity: 0.5;
+  padding: 0.25em 1.5ch;
+}

rpdata-ui/src/index.css

@@ -2,4 +2,10 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
+  background-color: black;
+  color: white;
+}
+
+a {
+  text-decoration: none;
 }

rpdata-ui/src/index.js

@@ -1,8 +1,21 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom"
+import { ApolloProvider } from "react-apollo";
+
+import client from "./client";
+import App from "./App"
+import registerServiceWorker from "./registerServiceWorker"
+
+import "./index.css"
+import "./colors.css";
+
+ReactDOM.render((
+  <ApolloProvider client={client}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </ApolloProvider>
+), document.getElementById('root'))
 
-ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();

rpdata-ui/src/routes/logs/LogsIndex.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import Background from '../../common/Background';
+import LogsMenu from './LogsMenu';
+
+export default class LogsIndex extends Component {
+  render() {
+    return (
+      <div className="StoryIndex theme-logs">
+        <Background src="https://wiki.aiterp.net/images/c/ce/Ehanis_Tioran_-_Portrait_-_Resized.png" />
+        <LogsMenu />
+      </div>
+    )
+  }
+}

rpdata-ui/src/routes/logs/LogsMenu.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import Menu, { MenuHeader, MenuLink, MenuGap } from '../../common/Menu';
+
+export default class LogsMenu extends Component {
+  render() {
+    return (
+      <Menu>
+        <MenuHeader>Logs</MenuHeader>
+        <MenuLink to="/logs/" icon="R">Recent</MenuLink>
+        <MenuGap />
+        <MenuHeader>Options</MenuHeader>
+        <MenuLink icon="+">Create Log</MenuLink>
+        <MenuLink icon="I">Import Log</MenuLink>
+      </Menu>
+    )
+  }
+}

rpdata-ui/src/routes/story/StoryMenu.js

@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+import Menu, { MenuHeader, MenuLink, MenuGap } from "../../common/Menu";
+import pluralize from "pluralize"
+
+export default class StoryMenu extends Component {  
+  render() {
+    return (
+      <Menu>
+        <MenuHeader>Story</MenuHeader>
+        <MenuLink to="/story/" icon="A">All</MenuLink>
+        <MenuGap />
+        <MenuHeader>By Category</MenuHeader>
+        <CategoryLinks categories={this.props.categories} />
+        <MenuGap />
+        <MenuHeader>By Tag</MenuHeader>
+        <MenuLink to="/story/tag/Location/Miner's%20Respite" icon="L" tagType="location">Miner's Respite</MenuLink>
+        <MenuLink to="/story/tag/Chracter/Ilyna%20T'Rea" icon="C" tagType="character">Ilyna T'Rea</MenuLink>
+        <MenuLink to="/story/tag/Organization/Redrock%20Agency" icon="O" tagType="organization">Redrock Agency</MenuLink>
+        <MenuLink to="/story/tag/Series/Yellow%20Haze" icon="S" tagType="series">Yellow Haze</MenuLink>
+        <MenuLink to="/story/tag/Event/Surveying%20The%20Ice%20World" icon="E" tagType="event">Surveying the Ice World</MenuLink>
+        <MenuLink to="/story/tag/" icon="T">All Tags</MenuLink>
+        <MenuGap />
+        <MenuHeader>Your Content</MenuHeader>
+        <MenuLink to="/story/authored/" icon="A">Listed</MenuLink>
+        <MenuLink to="/story/open/" icon="O">Open</MenuLink>
+        <MenuLink to="/story/unlisted/" icon="U">Unlisted</MenuLink>
+        <MenuGap />
+        <MenuHeader>Options</MenuHeader>
+        <MenuLink icon="+">Create Story</MenuLink>
+      </Menu>
+    )
+  }
+}
+
+function CategoryLinks({categories}) {
+  return categories.map(category => {
+    const icon = category.charAt(0).toUpperCase()
+    const label = pluralize(category)
+
+    return <MenuLink to={`/story/category/${category}`} icon={icon}>{label}</MenuLink>
+  })
+}

rpdata-ui/src/routes/story/StoryRoot.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import { Query } from 'react-apollo';
+
+import Background from '../../common/Background';
+import StoryMenu from './StoryMenu';
+
+import INDEX_QUERY from "./gql/StoryIndex";
+
+export class StoryIndex extends Component {
+  render() {
+    const categories = this.props.categoryType.enumValues.map(ev => ev.name).sort()
+
+    return (
+      <div className="StoryIndex theme-story">
+        <Background />
+        <StoryMenu categories={categories} />
+      </div>
+    )
+  }
+}
+
+export default () => (
+  <Query query={INDEX_QUERY}>
+    {({ loading, error, data }) => {
+      if (loading) return 'Loading...';
+      if (error) return `Error! ${error.message}`;
+
+      return <StoryIndex {...data} />
+    }}
+  </Query>
+);

rpdata-ui/src/routes/story/gql/StoryIndex.js

@@ -0,0 +1,23 @@
+import gql from "graphql-tag"
+
+export default gql`
+  query StoryIndex {
+    categoryType: __type(name: "StoryCategory") {
+      enumValues {
+        name
+        description
+      }
+    }
+    
+    stories(input: {}) {
+      id
+      name
+      author
+      open
+      tags {
+        kind
+        name
+      }
+    }
+  }
+`