Merge pull request #2337 from botpress/f_compact-debugger

fix(debugger): a bit more compact nlu debugger
botpress · Sep 5, 2019 · 33b30c0 · 33b30c0
2 parents 215cc9c + 64b39be
commit 33b30c0
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 20 deletions.
diff --git a/modules/extensions/src/views/lite/components/debugger/style.scss b/modules/extensions/src/views/lite/components/debugger/style.scss
@@ -15,7 +15,7 @@
     justify-content: space-between;
   }
   .subSection {
-    margin: 10px 5px;
+    margin: 15px 5px;
     h5 {
       margin-bottom: 5px;
     }
@@ -30,9 +30,18 @@
         line-height: 1.5em;
       }
     }
+    .language {
+      > p {
+        margin-bottom: 5px;
+      }
+      strong {
+        color: #5c7080; //blueprint gray-1
+      }
+    }
   }
   .summaryTable {
     width: 100%;
+
     th {
       color: #5c7080; //blueprint gray-1
     }

diff --git a/modules/extensions/src/views/lite/components/debugger/style.scss.d.ts b/modules/extensions/src/views/lite/components/debugger/style.scss.d.ts
@@ -8,6 +8,7 @@ interface CssExports {
   'hovering': string;
   'inspector': string;
   'inspectorContainer': string;
+  'language': string;
   'notFound': string;
   'splash': string;
   'stacktrace': string;

diff --git a/modules/extensions/src/views/lite/components/debugger/views/Entities.tsx b/modules/extensions/src/views/lite/components/debugger/views/Entities.tsx
@@ -12,19 +12,19 @@ export const Entities: SFC<{ entities: sdk.NLU.Entity[] }> = props => (
         <tr>
           <th>Type</th>
           <th>Source</th>
-          <th>Normalized value</th>
-          <th>Unit</th>
+          <th>Normalized Value</th>
         </tr>
       </thead>
       <tbody>
         {props.entities.map(entity => (
           <tr key={entity.name}>
+            <td>{entity.name}</td>
             <td>
-              @{entity.type}.{entity.name}
+              <span>{entity.meta.source}</span>
+            </td>
+            <td>
+              {entity.data.value}&nbsp;{entity.data.unit}
             </td>
-            <td>{entity.meta.source}</td>
-            <td>{entity.data.value}</td>
-            <td>{entity.data.unit}</td>
           </tr>
         ))}
       </tbody>

diff --git a/modules/extensions/src/views/lite/components/debugger/views/Language.tsx b/modules/extensions/src/views/lite/components/debugger/views/Language.tsx
@@ -0,0 +1,24 @@
+import { Colors, H5, HTMLTable } from '@blueprintjs/core'
+import React, { FC } from 'react'
+
+import style from '../style.scss'
+
+interface Props {
+  detectedLanguage: string
+  usedLanguage: string
+}
+
+export const Language: FC<Props> = props => (
+  <div className={style.subSection}>
+    <div className={style.language}>
+      <p>
+        <strong>Detected language:</strong>&nbsp;
+        <span>{props.detectedLanguage}</span>
+      </p>
+      <p>
+        <strong>Used Language:</strong>&nbsp;
+        <span>{props.usedLanguage}</span>
+      </p>
+    </div>
+  </div>
+)
diff --git a/modules/extensions/src/views/lite/components/debugger/views/NLU.tsx b/modules/extensions/src/views/lite/components/debugger/views/NLU.tsx
@@ -7,6 +7,7 @@ import { Intents } from '../components/Intents'
 import style from '../style.scss'
 
 import { Entities } from './Entities'
+import { Language } from './Language'
 import { Slots } from './Slots'
 
 const NLU: SFC<{ nluData: sdk.IO.EventUnderstanding; session: any }> = ({ nluData, session }) => {
@@ -17,7 +18,7 @@ const NLU: SFC<{ nluData: sdk.IO.EventUnderstanding; session: any }> = ({ nluDat
   return (
     <div className={style.block}>
       <div className={style.title}>
-        <H4>Understanding</H4>
+        <H4>Language Understanding</H4>
         {nluData.ambiguous && (
           <Tooltip
             position={Position.TOP}
@@ -35,6 +36,7 @@ const NLU: SFC<{ nluData: sdk.IO.EventUnderstanding; session: any }> = ({ nluDat
           </Tooltip>
         )}
       </div>
+      <Language detectedLanguage={nluData.detectedLanguage} usedLanguage={nluData.language} />
       <Intents intents={nluData.intents} intent={nluData.intent} />
       {nluData.entities.length > 0 && <Entities entities={nluData.entities} />}
       <Slots sessionSlots={session.slots} slots={nluData.slots} />

diff --git a/modules/extensions/src/views/lite/components/debugger/views/Slots.tsx b/modules/extensions/src/views/lite/components/debugger/views/Slots.tsx
@@ -1,4 +1,4 @@
-import { Colors, H5, HTMLTable } from '@blueprintjs/core'
+import { Colors, H5, HTMLTable, Tooltip } from '@blueprintjs/core'
 import * as sdk from 'botpress/sdk'
 import _ from 'lodash'
 import React, { SFC } from 'react'
@@ -13,14 +13,9 @@ const renderSlotItem = (name: string, slot: any) => {
         <td>
           <ul>
             {slot.map(s => (
-              <li>{s.source}</li>
-            ))}
-          </ul>
-        </td>
-        <td>
-          <ul>
-            {slot.map(s => (
-              <li>{s.value}</li>
+              <Tooltip key={s.value} content={`Value: ${s.value}`} position={'top'}>
+                <li style={{ textDecoration: 'underline' }}>{s.source}</li>
+              </Tooltip>
             ))}
           </ul>
         </td>
@@ -31,8 +26,11 @@ const renderSlotItem = (name: string, slot: any) => {
   return (
     <tr>
       <td>{name}</td>
-      <td>{slot.source}</td>
-      <td>{slot.value}</td>
+      <td>
+        <Tooltip content={`Value: ${slot.value}`}>
+          <span style={{ textDecoration: 'underline' }}>{slot.source}</span>
+        </Tooltip>
+      </td>
       <td>{slot.turns ? `${slot.turns} turns ago` : 'This turn'} </td>
     </tr>
   )
@@ -56,7 +54,6 @@ export const Slots: SFC<Props> = props => {
           <tr>
             <th>Slot</th>
             <th>Source</th>
-            <th>Value</th>
             <th>Extracted</th>
           </tr>
         </thead>