Update per Scott's feedback

lmcnulty · Jul 24, 2023 · 593d3c2 · 593d3c2
1 parent 5f7cb29
commit 593d3c2
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 14 deletions.
diff --git a/site/gatsby-site/src/pages/summaries/cset-charts.js b/site/gatsby-site/src/pages/summaries/cset-charts.js
@@ -67,6 +67,42 @@ export default function CsetChartsPage({ data, ...props }) {
         classifications={classifications}
         namespace="CSETv1"
       />
+      <ul>
+        <li>
+          <b>Autonomy1 (fully autonomous)</b>: Does the system operate independently, without
+          simultaneous human oversight, interaction or intervention?
+        </li>
+
+        <li>
+          <b>Autonomy2 (human-on-loop)</b>: Does the system operate independently but with human
+          oversight, where the system makes decisions or takes actions but a human actively observes
+          the behavior and can override the system in real time?
+        </li>
+
+        <li>
+          <b>Autonomy3 (human-in-the-loop)</b>: Does the system provide inputs and suggested
+          decisions to a human that
+        </li>
+      </ul>
+      {[
+        'Physical Objects',
+        'Entertainment Industry',
+        'Report, Test, or Study of data',
+        'Deployed',
+        'Producer Test in Controlled Conditions',
+        'Producer Test in Operational Conditions',
+        'User Test in Controlled Conditions',
+        'User Test in Operational Conditions',
+      ].map((attributeShortName) => (
+        <GroupBarChart
+          key={attributeShortName}
+          title={`Domain questions – ${attributeShortName}`}
+          groups={allVsHarmDefinition}
+          attributeShortName={attributeShortName}
+          classifications={classifications}
+          namespace="CSETv1"
+        />
+      ))}
     </>
   );
 }
@@ -112,6 +148,9 @@ function BarChart({ attributeShortName, classifications, namespace, title, filte
         },
       },
     },
+    tooltip: {
+      show: false,
+    },
   };
 
   return (
@@ -164,19 +203,21 @@ function GroupBarChart({ groups, attributeShortName, classifications, namespace,
     return count;
   };
 
-  const topValues = Array.from(allValues)
-    .sort((a, b) => occurences(a) - occurences(b))
-    .slice(0, 10);
+  const byOccurences = (a, b) => occurences(a) - occurences(b);
+
+  const topValues = Array.from(allValues).sort(byOccurences).slice(0, 10);
 
   const options = {
     data: {
       x: 'x',
       columns: [
         ['x', ...groupNames],
-        ...topValues.map((value) => [
-          value,
-          ...groupNames.map((groupName) => groups[groupName].valuesCount[value] || 0),
-        ]),
+        ...topValues
+          .sort()
+          .map((value) => [
+            value,
+            ...groupNames.map((groupName) => groups[groupName].valuesCount[value] || 0),
+          ]),
       ],
       groups: [topValues],
       type: bar(),
@@ -190,6 +231,9 @@ function GroupBarChart({ groups, attributeShortName, classifications, namespace,
         },
       },
     },
+    tooltip: {
+      show: false,
+    },
   };
 
   return (
@@ -199,6 +243,33 @@ function GroupBarChart({ groups, attributeShortName, classifications, namespace,
         (by Incident Count)
       </div>
       <BillboardJS bb={bb} options={{ ...options }} />
+      <div className="flex gap-2 flex-wrap justify-around">
+        {Array.from(allValues).length > 5 &&
+          groupNames.map((groupName) => {
+            const byGroupOccurences = (a, b) =>
+              (groups[groupName].valuesCount[b] || 0) - (groups[groupName].valuesCount[a] || 0);
+
+            return (
+              <div key={groupName}>
+                <h3 className="text-lg text-center">{groupName}</h3>
+                <table>
+                  <tr>
+                    <th className="p2 text-left">Category</th>
+                    <th className="p2">Count</th>
+                  </tr>
+                  {Array.from(allValues)
+                    .sort(byGroupOccurences)
+                    .map((value) => (
+                      <tr key={value}>
+                        <td className="p2">{value}</td>
+                        <td className="p2 text-center">{groups[groupName].valuesCount[value]}</td>
+                      </tr>
+                    ))}
+                </table>
+              </div>
+            );
+          })}
+      </div>
     </>
   );
 }

diff --git a/site/gatsby-site/src/templates/taxonomy.js b/site/gatsby-site/src/templates/taxonomy.js
@@ -12,6 +12,7 @@ import { Card, Badge, Button } from 'flowbite-react';
 import AiidHelmet from 'components/AiidHelmet';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+import { isAiHarm } from 'utils/cset';
 
 const StatItem = ({ text, value }) => {
   return (
@@ -166,13 +167,7 @@ const getStats = (taxa, classification) => {
   };
 
   const filteredClassification = classification.filter(
-    (c) =>
-      c.namespace === taxa.namespace &&
-      !(
-        c.namespace == 'CSETv1' &&
-        (getClassificationValue(c, 'AI System') != 'yes' ||
-          getClassificationValue(c, 'Clear link to technology') != 'yes')
-      )
+    (c) => c.namespace === taxa.namespace && !(c.namespace == 'CSETv1' && !isAiHarm(c))
   );
 
   const stats = {};