finish conversion from class to functional, underscore and jquery rem…

…oved

client-report/src/components/app.jsx

@@ -7,7 +7,7 @@ import URLs from "../util/url.js";
 import DataUtils from "../util/dataUtils.js";
 import Heading from "./framework/heading.jsx";
 import Footer from "./framework/Footer.jsx";
-import Overview from "./overview.js";
+import Overview from "./overview.jsx";
 import MajorityStrict from "./lists/majorityStrict.jsx";
 import Uncertainty from "./lists/uncertainty.jsx";
 import UncertaintyNarrative from "./lists/uncertaintyNarrative.jsx";
@@ -18,7 +18,7 @@ import Beeswarm from "./beeswarm/beeswarm.jsx";
 import Controls from "./controls/controls.jsx";
 import net from "../util/net.js";
 import ConsensusNarrative from "./lists/consensusNarrative.jsx";
-import RawDataExport from "./RawDataExport.js";
+import RawDataExport from "./RawDataExport.jsx";
 
 const pathname = window.location.pathname; // "/report/2arcefpshi"
 const report_id = pathname.split("/")[2];
@@ -50,7 +50,7 @@ const App = (props) => {
     disagree: globals.brandColors.disagree,
     pass: globals.brandColors.pass,
   });
-  const [narrative, setNarrative] = useState({});
+  const [narrative, setNarrative] = useState(null);
   const [errorText, setErrorText] = useState(null);
   const [extremity, setExtremity] = useState(null);
   const [uncertainty, setUncertainty] = useState(null);
@@ -146,7 +146,7 @@ const App = (props) => {
       }
       const decodedChunk = decoder.decode(value, { stream: true });
 
-      if (!decodedChunk.includes('POLIS-PING:')) setNarrative(n => Object.assign(n, JSON.parse(decodedChunk)));
+      if (!decodedChunk.includes('POLIS-PING:')) setNarrative(n => Object.assign((n || {}), JSON.parse(decodedChunk)));
     }
   }
 
@@ -511,6 +511,8 @@ const App = (props) => {
     );
   }
 
+  console.log(conversation, narrative)
+
   return (
     <div style={{ margin: "0px 10px" }} data-testid="reports-overview">
       <Heading conversation={conversation} />
@@ -550,27 +552,31 @@ const App = (props) => {
           <>
             <button onClick={() => setModel(m => m === "claude" ? "gemini" : "claude" )}>Toggle Model</button>
             <h4>Current Model: {model}</h4>
-            <ConsensusNarrative
-              math={math}
-              comments={comments}
-              conversation={conversation}
-              ptptCount={ptptCount}
-              formatTid={formatTid}
-              voteColors={voteColors}
-              narrative={narrative}
-              model={model}
-            />
-            <UncertaintyNarrative
-              math={math}
-              comments={comments}
-              uncertainty={uncertainty}
-              conversation={conversation}
-              ptptCount={ptptCount}
-              formatTid={formatTid}
-              voteColors={voteColors}
-              narrative={narrative}
-              model={model}
-            />
+            {narrative ? (
+              <>
+                <ConsensusNarrative
+                  math={math}
+                  comments={comments}
+                  conversation={conversation}
+                  ptptCount={ptptCount}
+                  formatTid={formatTid}
+                  voteColors={voteColors}
+                  narrative={narrative}
+                  model={model}
+                />
+                <UncertaintyNarrative
+                  math={math}
+                  comments={comments}
+                  uncertainty={uncertainty}
+                  conversation={conversation}
+                  ptptCount={ptptCount}
+                  formatTid={formatTid}
+                  voteColors={voteColors}
+                  narrative={narrative}
+                  model={model}
+                />
+              </>
+            ) : "...Loading"}
           </>
         ) : (
           <>

client-report/src/components/barChart.js → client-report/src/components/barChart.jsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 
-const BarChart = ({comment, groupVotes, ptptCount/*, conversation*/}) => {
+const BarChart = ({comment, groupVotes, ptptCount}) => {
 
   const rectStartX = 70;
   const barHeight = 15;

client-report/src/components/comment.jsx

@@ -0,0 +1,66 @@
+// // Copyright (C) 2012-present, The Authors. This program is free software: you can redistribute it and/or  modify it under the terms of the GNU Affero General Public License, version 3, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import PropTypes from "prop-types";
+import Flex from "./flex";
+import * as globals from "./globals";
+import BarChart from "./barChart";
+
+const Comment = ({ dispatch, params, acceptButton, rejectButton, acceptClickHandler, rejectClickHandler, comment, formatTid, conversation, ptptCount }) => {
+  const getDate = () => {
+    const date = new Date(+comment.created);
+    return `${date.getMonth() + 1} / ${date.getUTCDate()} / ${date.getFullYear()}`;
+  };
+
+  const getVoteBreakdown = () => {
+    if (typeof comment.agree_count !== "undefined") {
+      return (
+        <span>
+          ({comment.agree_count} agreed, {comment.disagree_count} disagreed, {comment.pass_count} passed)
+        </span>
+      );
+    }
+    return "";
+  };
+
+  const styles = { ...globals.paragraph, fontStyle: "italic" };
+
+  return (
+    <Flex
+      styleOverrides={{
+        width: "100%",
+        marginBottom: 50,
+        background: comment.index % 2 !== 0 ? "none" : "none",
+      }}
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="flex-start"
+    >
+      <Flex alignItems="baseline" justifyContent="flex-start" styleOverrides={{ width: globals.paragraphWidth }}>
+        <span style={{ ...styles }}>
+          {formatTid(comment.tid)} - {comment.is_meta ? "Metadata: " : ""}
+          {comment.txt}
+        </span>
+      </Flex>
+      <svg width={globals.barChartWidth} height={70}>
+        <line x1="120" y1="0" x2="120" y2="65" strokeWidth="2" stroke="rgb(245,245,245)" />
+        <BarChart conversation={conversation} comment={comment} ptptCount={ptptCount} />
+      </svg>
+    </Flex>
+  );
+};
+
+Comment.propTypes = {
+  dispatch: PropTypes.func,
+  params: PropTypes.object,
+  acceptButton: PropTypes.bool,
+  rejectButton: PropTypes.bool,
+  acceptClickHandler: PropTypes.func,
+  rejectClickHandler: PropTypes.func,
+  comment: PropTypes.object,
+  formatTid: PropTypes.func,
+  conversation: PropTypes.object,
+  ptptCount: PropTypes.number,
+};
+
+export default Comment;

client-report/src/components/graphAxes.jsx

@@ -0,0 +1,31 @@
+// Copyright (C) 2012-present, The Authors. This program is free software: you can redistribute it and/or  modify it under the terms of the GNU Affero General Public License, version 3, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import * as globals from "./globals";
+
+const GraphAxes = ({yCenter, xCenter/*, report*/}) => {
+  return (
+    <g>
+      <line
+        x1={0 /* magic number is axis padding */}
+        y1={yCenter}
+        x2={globals.side /* - 50 */}
+        y2={yCenter}
+        style={{
+          stroke: "rgb(230,230,230)",
+          strokeWidth: 1
+        }}/>
+      <line
+        x1={xCenter}
+        y1={0 }
+        x2={xCenter}
+        y2={globals.side /* - 50 */ /* magic number is axis padding */}
+        style={{
+          stroke: "rgb(230,230,230)",
+          strokeWidth: 1
+        }}/>
+    </g>
+  );
+};
+
+export default GraphAxes;

client-report/src/components/lists/consensusNarrative.jsx

@@ -12,6 +12,7 @@ const ConsensusNarrative = ({
   narrative,
   model
 }) => {
+  console.log(narrative?.group_informed_consensus)
   if (!narrative?.group_informed_consensus) {
     return <div>Loading Consensus...</div>;
   }

client-report/src/components/lists/participantGroup.jsx

@@ -22,8 +22,6 @@ const ParticipantGroup = ({
     groupLabel = "Group " + globals.groupLabels[gid];
   }
 
-  console.log(groupComments)
-
   return (
     <div
       style={{