@things-factory/integration-ui 7.0.0-alpha.8 → 7.0.0

package/client/viewparts/scenario-monitor.ts

@@ -1,5 +1,6 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist'
-import '@material/mwc-icon-button'
 import './scenario-instance-monitor'
 
 import gql from 'graphql-tag'
@@ -24,8 +25,8 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: row;
 
-        border: var(--border-dark-color);
-        background-color: var(--theme-white-color);
+        border: var(--border-dim-color);
+        background-color: var(--md-sys-color-surface);
         box-shadow: var(--box-shadow);
         border-radius: var(--border-radius);
         position: relative;
@@ -36,8 +37,8 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         position: relative;
         display: flex;
         flex-direction: column;
-        padding: var(--padding-default);
-        color: var(--secondary-color);
+        padding: var(--spacing-medium);
+        color: var(--md-sys-color-secondary);
         font-size: var(--fontsize-small);
         width: 100%;
         box-sizing: border-box;
@@ -63,7 +64,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         display: block;
         position: absolute;
         top: 0px;
-        right: var(--padding-default);
+        right: var(--spacing-medium);
         font-size: 40px;
         font-weight: bold;
         text-align: right;
@@ -77,8 +78,8 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
       [desc] [schedule] {
         background-color: #f1f1f1;
         border-radius: 20px;
-        margin: var(--margin-default) 0;
-        padding: var(--padding-narrow);
+        margin: var(--spacing-medium) 0;
+        padding: var(--spacing-small);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -86,16 +87,21 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         line-height: 8px;
       }
 
+      [desc] md-icon {
+        --md-icon-size: 18px;
+        border-radius: 50%;
+        color: var(--md-sys-color-on-primary);
+      }
+
       [buttons] {
-        --mdc-icon-button-size: 24px;
-        --mdc-icon-size: 24px;
-        border-top: var(--border-dark-color);
-        padding: var(--padding-narrow) 0 0 0;
+        border-top: var(--border-dim-color);
+        padding: var(--spacing-small) 0 0 0;
         text-align: right;
       }
 
-      [buttons] mwc-icon-button {
-        color: var(--primary-color);
+      [buttons] md-icon {
+        --md-icon-size: 22px;
+        color: var(--md-sys-color-primary);
       }
 
       [buttons][detail] {
@@ -104,14 +110,8 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         margin-bottom: auto;
       }
 
-      [desc] mwc-icon {
-        border-radius: 50%;
-        color: var(--theme-white-color);
-        font-size: 18px;
-      }
-
       :host([mode='detail']) [schedule] {
-        margin: var(--margin-default) 0 0 0;
+        margin: var(--spacing-medium) 0 0 0;
       }
 
       :host([mode='detail']) [desc] {
@@ -125,7 +125,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
       :host([mode='detail']) [buttons] {
         border-top: none;
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
       }
 
       ul {
@@ -141,7 +141,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
       ul > li {
         position: relative;
-        margin: var(--margin-default);
+        margin: var(--spacing-medium);
         min-width: 140px;
         border: 1px solid black;
         border-radius: var(--border-radius);
@@ -158,11 +158,11 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
       @media screen and (max-width: 480px) {
         :host {
-          margin: var(--margin-narrow);
+          margin: var(--spacing-small);
         }
 
         [desc] {
-          padding: var(--padding-narrow);
+          padding: var(--spacing-small);
         }
 
         [desc] [detail-info] {
@@ -194,7 +194,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
           <span>${instances.length}</span>
         </div>
         <div schedule>
-          <mwc-icon .style="background-color: ${color};">schedule</mwc-icon>
+          <md-icon .style="background-color: ${color};">schedule</md-icon>
           <pre>${schedule}</pre>
         </div>
         ${this.renderButtons(scenario)}
@@ -224,17 +224,23 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
     return html`
       <div buttons ?detail=${this.mode == 'detail'}>
-        <mwc-icon-button @click=${e => this.popupLogView(scenario)} icon="text_snippet"></mwc-icon-button>
+        <md-icon @click=${e => this.popupLogView(scenario)}>text_snippet</md-icon>
         ${!scenarioInstance
-          ? html` <mwc-icon-button icon="play_circle_outline" @click=${e => this.startScenario(scenario)}></mwc-icon-button>`
-          : html` <mwc-icon-button icon="pause_circle_outline" @click=${e => this.stopScenario(scenario)} stop></mwc-icon-button> `}
+          ? html` <md-icon @click=${e => this.startScenario(scenario)}>play_circle</md-icon>`
+          : html` <md-icon @click=${e => this.stopScenario(scenario)} stop>pause_circle</md-icon> `}
       </div>
     `
   }
 
   async popupLogView(scenario) {
     const popup = openPopup(
-      html` <scenario-instance-log-view .scenarioName=${scenario.name} @start=${() => this.startScenario(scenario)} startable></scenario-instance-log-view> `,
+      html`
+        <scenario-instance-log-view
+          .scenarioName=${scenario.name}
+          @start=${() => this.startScenario(scenario)}
+          startable
+        ></scenario-instance-log-view>
+      `,
       {
         size: 'large',
         title: `${i18next.t('title.scenario-log')} (${scenario.name})`

package/client/viewparts/scenarios-monitor.ts

@@ -1,5 +1,6 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist'
-import '@material/mwc-icon-button'
 import './scenario-monitor'
 
 import { css, html, LitElement } from 'lit'
@@ -22,38 +23,39 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
 
       [info] {
         display: flex;
-        margin-bottom: var(--margin-default);
-        padding: var(--padding-narrow) 0;
+        margin-bottom: var(--spacing-medium);
+        padding: var(--spacing-small) 0;
         flex-direction: row;
         align-items: center;
-        border-bottom: 2px solid var(--secondary-color);
+        border-bottom: 2px solid var(--md-sys-color-secondary);
       }
       [info] h2 {
         margin: 0;
         font: var(--subtitle-font);
-        color: var(--secondary-color);
+        color: var(--md-sys-color-secondary);
         text-transform: capitalize;
       }
 
       [info] > span {
         display: flex;
         margin-left: auto;
+        align-items: center;
       }
       [info] input {
         margin: var(--input-margin);
-        padding: var(--padding-narrow);
-        border: var(--border-dark-color);
+        padding: var(--spacing-small);
+        border: var(--border-dim-color);
         border-radius: var(--border-radius);
         font: var(--input-font);
       }
-      [info] mwc-icon {
-        margin-left: var(--margin-narrow);
-        color: rgba(var(--secondary-color-rgb), 0.6);
+      [info] md-icon {
+        margin-left: var(--spacing-small);
+        color: var(--md-sys-color-secondary);
         line-height: 34px;
         cursor: pointer;
       }
-      [info] mwc-icon[active] {
-        color: var(--primary-color);
+      [info] md-icon[active] {
+        color: var(--md-sys-color-primary);
       }
 
       [content] {
@@ -123,13 +125,17 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
         <h2>scenarios</h2>
         <span>
           <input .value=${filter} @change=${e => (this.filter = e.target.value)} placeholder="search" />
-          <mwc-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</mwc-icon>
-          <mwc-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</mwc-icon>
+          <md-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</md-icon>
+          <md-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</md-icon>
         </span>
       </div>
 
       <div content>
-        <pending-q-monitor .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${this.running}></pending-q-monitor>
+        <pending-q-monitor
+          .pendings=${this.pendings}
+          .colorIndex=${this.colorIndex || {}}
+          .running=${this.running}
+        ></pending-q-monitor>
 
         <div scenarios mode=${mode}>
           <div flowbox>

package/dist-client/analysis/graph-viewer-style.js

@@ -31,7 +31,7 @@ export const GraphViewerStyles = css `
   }
 
   .graph-info a.property {
-    background-color: #fff;
+    background-color: var(--md-sys-color-surface);
     border-color: #ccc;
     color: #333;
   }

package/dist-client/analysis/graph-viewer-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-viewer-style.js","sourceRoot":"","sources":["../../client/analysis/graph-viewer-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const GraphViewerStyles = css`\n  * {\n    margin: 0;\n    padding: 0;\n  }\n\n  .graph-viewer {\n    border: 1px solid #ddd;\n    border-radius: 5px;\n  }\n\n  .graph-info {\n    font-size: 16px;\n    padding: 10px;\n    position: absolute;\n  }\n\n  .graph-info a {\n    border: 1px solid;\n    display: inline-block;\n    font-size: 14px;\n    line-height: 1.428571429;\n    margin-left: 5px;\n    margin-top: 5px;\n    padding: 6px 12px;\n  }\n\n  .graph-info a.class {\n    color: #fff;\n  }\n\n  .graph-info a.property {\n    background-color: #fff;\n    border-color: #ccc;\n    color: #333;\n  }\n\n  .graph-info a.btn {\n    margin-left: 5px;\n    margin-top: 5px;\n    opacity: 1;\n  }\n\n  .graph-info a.info {\n    background-color: #a5abb6;\n    border: 1px solid #9aa1ac;\n    color: #fff;\n  }\n\n  .node.node-highlighted .ring {\n    filter: alpha(opacity=50);\n    opacity: 0.5;\n    stroke: #888;\n    stroke-width: 12px;\n  }\n\n  .node .outline {\n    cursor: pointer;\n    fill: #a5abb6;\n    pointer-events: all;\n    stroke: #9aa1ac;\n    stroke-width: 2px;\n  }\n\n  .node .ring {\n    fill: none;\n    filter: alpha(opacity=0);\n    opacity: 0;\n    stroke: #6ac6ff;\n    stroke-width: 8px;\n  }\n\n  .node .text.icon {\n    font-family: FontAwesome;\n  }\n\n  .node.selected .ring,\n  .node:hover .ring {\n    filter: alpha(opacity=30);\n    opacity: 0.3;\n  }\n\n  .relationship {\n    cursor: default;\n  }\n\n  .relationship line {\n    stroke: #aaa;\n  }\n\n  .relationship .outline {\n    cursor: default;\n  }\n\n  .relationship .overlay {\n    cursor: default;\n    fill: #6ac6ff;\n    filter: alpha(opacity=0);\n    opacity: 0;\n  }\n\n  .relationship text {\n    cursor: default;\n  }\n\n  .relationship.selected .overlay,\n  .relationship:hover .overlay {\n    filter: alpha(opacity=30);\n    opacity: 0.3;\n  }\n\n  svg {\n    cursor: move;\n  }\n`\n"]}
+{"version":3,"file":"graph-viewer-style.js","sourceRoot":"","sources":["../../client/analysis/graph-viewer-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const GraphViewerStyles = css`\n  * {\n    margin: 0;\n    padding: 0;\n  }\n\n  .graph-viewer {\n    border: 1px solid #ddd;\n    border-radius: 5px;\n  }\n\n  .graph-info {\n    font-size: 16px;\n    padding: 10px;\n    position: absolute;\n  }\n\n  .graph-info a {\n    border: 1px solid;\n    display: inline-block;\n    font-size: 14px;\n    line-height: 1.428571429;\n    margin-left: 5px;\n    margin-top: 5px;\n    padding: 6px 12px;\n  }\n\n  .graph-info a.class {\n    color: #fff;\n  }\n\n  .graph-info a.property {\n    background-color: var(--md-sys-color-surface);\n    border-color: #ccc;\n    color: #333;\n  }\n\n  .graph-info a.btn {\n    margin-left: 5px;\n    margin-top: 5px;\n    opacity: 1;\n  }\n\n  .graph-info a.info {\n    background-color: #a5abb6;\n    border: 1px solid #9aa1ac;\n    color: #fff;\n  }\n\n  .node.node-highlighted .ring {\n    filter: alpha(opacity=50);\n    opacity: 0.5;\n    stroke: #888;\n    stroke-width: 12px;\n  }\n\n  .node .outline {\n    cursor: pointer;\n    fill: #a5abb6;\n    pointer-events: all;\n    stroke: #9aa1ac;\n    stroke-width: 2px;\n  }\n\n  .node .ring {\n    fill: none;\n    filter: alpha(opacity=0);\n    opacity: 0;\n    stroke: #6ac6ff;\n    stroke-width: 8px;\n  }\n\n  .node .text.icon {\n    font-family: FontAwesome;\n  }\n\n  .node.selected .ring,\n  .node:hover .ring {\n    filter: alpha(opacity=30);\n    opacity: 0.3;\n  }\n\n  .relationship {\n    cursor: default;\n  }\n\n  .relationship line {\n    stroke: #aaa;\n  }\n\n  .relationship .outline {\n    cursor: default;\n  }\n\n  .relationship .overlay {\n    cursor: default;\n    fill: #6ac6ff;\n    filter: alpha(opacity=0);\n    opacity: 0;\n  }\n\n  .relationship text {\n    cursor: default;\n  }\n\n  .relationship.selected .overlay,\n  .relationship:hover .overlay {\n    filter: alpha(opacity=30);\n    opacity: 0.3;\n  }\n\n  svg {\n    cursor: move;\n  }\n`\n"]}

package/dist-client/analysis/graph-viewer.js

@@ -245,7 +245,7 @@ export class GraphViewer {
             .attr('pointer-events', 'none')
             .attr('text-anchor', 'middle')
             .attr('y', '24px')
-            .attr('font-family', 'Material Icons')
+            .attr('font-family', 'Material Symbols Outlined')
             .attr('font-size', '48px')
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline', 'middle')
@@ -317,26 +317,26 @@ export class GraphViewer {
         // d3.schemeCategory10,
         // d3.schemeCategory20,
         return [
-            '#68bdf6',
-            '#6dce9e',
-            '#faafc2',
-            '#f2baf6',
-            '#ff928c',
-            '#fcea7e',
-            '#ffc766',
-            '#405f9e',
-            '#a5abb6',
-            '#78cecb',
-            '#b88cbb',
-            '#ced2d9',
-            '#e84646',
-            '#fa5f86',
-            '#ffab1a',
-            '#fcda19',
-            '#797b80',
-            '#c9d96f',
-            '#47991f',
-            '#70edee',
+            '#68bdf6', // light blue
+            '#6dce9e', // green #1
+            '#faafc2', // light pink
+            '#f2baf6', // purple
+            '#ff928c', // light red
+            '#fcea7e', // light yellow
+            '#ffc766', // light orange
+            '#405f9e', // navy blue
+            '#a5abb6', // dark gray
+            '#78cecb', // green #2,
+            '#b88cbb', // dark purple
+            '#ced2d9', // light gray
+            '#e84646', // dark red
+            '#fa5f86', // dark pink
+            '#ffab1a', // dark orange
+            '#fcda19', // dark yellow
+            '#797b80', // black
+            '#c9d96f', // pistacchio
+            '#47991f', // green #3
+            '#70edee', // turquoise
             '#ff75ea' // pink
         ];
     }