fix:minor-updates

src/app/assets/icons/AIIcon.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { ReactComponent as Icon } from "app/modules/chart-module/assets/ai-icon.svg";
+import { Tooltip } from "react-tooltip";
+
+export default function AIIcon() {
+  return (
+    <>
+      <p
+        className="AIChart-info"
+        css={`
+          cursor: pointer;
+        `}
+      >
+        <Icon />
+      </p>
+      <Tooltip
+        anchorSelect=".AIChart-info"
+        place="bottom"
+        style={{
+          background: "#231D2C",
+          borderRadius: "8px",
+          color: "#fff",
+          fontSize: "12px",
+          fontFamily: "GothamNarrow-Medium, 'Helvetica Neue', sans-serif",
+          width: "320px",
+          lineHeight: "16px",
+          zIndex: 1,
+        }}
+      >
+        Based on the dataset selected, a recommendation for this chart was
+        offered by our AI assistant.
+      </Tooltip>
+    </>
+  );
+}

src/app/components/Dialogs/EmbedChartDialog/index.tsx

@@ -34,13 +34,18 @@ export default function EmbedChartDialog(props: {
     props.datasetId!,
     token ?? undefined
   );
+  const switchTabs = [
+    { value: "embed-code", label: "Embed Code" },
+    { value: "shared-link", label: "Shared Link" },
+  ];
   const [displayMode, setDisplayMode] = React.useState<string>("tracklist");
   const [widthValue, setWidthValue] = React.useState<number>(0);
   const [heightValue, setHeightValue] = React.useState<number>(0);
   const [copyAlert, setCopyAlert] = React.useState<boolean>(false);
-  const defaultSwitchTab = "embed-code";
-  const [activeSwitchTab, setActiveSwitchTab] =
-    React.useState<string>(defaultSwitchTab);
+
+  const [activeSwitchTab, setActiveSwitchTab] = React.useState<string>(
+    switchTabs[1].value
+  );
 
   const {
     notFound,
@@ -64,10 +69,6 @@ export default function EmbedChartDialog(props: {
     { value: "tracklist", label: "With tracklist" },
     { value: "compact", label: "Compact" },
   ];
-  const switchTabs = [
-    { value: defaultSwitchTab, label: "Embed Code" },
-    { value: "lishared-link", label: "Shared Link" },
-  ];
 
   const renderedChart = React.useMemo(() => {
     return chartFromAPI
@@ -100,7 +101,7 @@ export default function EmbedChartDialog(props: {
   };
 
   const handleCopyToClipboard = async () => {
-    copyToClipboard(defaultSwitchTab).then(() => {
+    copyToClipboard(switchTabs[1].value).then(() => {
       setCopyAlert(true);
     });
   };
@@ -248,7 +249,7 @@ export default function EmbedChartDialog(props: {
               </p>
             </div>
           </div>
-          {activeSwitchTab === defaultSwitchTab ? (
+          {activeSwitchTab !== switchTabs[1].value ? (
             <EmbedOptions
               chartId={props.chartId}
               displayMode={displayMode}

src/app/components/Dialogs/EmbedChartDialog/shareContent.tsx

@@ -28,7 +28,7 @@ export default function ShareContent(props: {
           padding: 16px 4px;
         }
       `}
-      id="embed-code"
+      id="shared-link"
     >
       {props.content}
     </div>

src/app/modules/chart-module/components/toolbox/steps/sub-header.tsx

@@ -48,9 +48,9 @@ export default function ToolboxSubHeader(
       <div>
         <p>{props.name}</p>{" "}
         <p>
-          <a href="." className="my-anchor-element">
+          <span className="my-anchor-element">
             <InfoIcon />
-          </a>
+          </span>
           <Tooltip
             anchorSelect=".my-anchor-element"
             place="top"

src/app/modules/chart-module/routes/customize/index.tsx

@@ -5,9 +5,9 @@ import { CommonChart } from "app/modules/chart-module/components/common-chart";
 import { styles as commonStyles } from "app/modules/chart-module/routes/common/styles";
 import { ChartBuilderCustomizeProps } from "app/modules/chart-module/routes/customize/data";
 import { useStoreState } from "app/state/store/hooks";
-import { ReactComponent as AIIcon } from "app/modules/chart-module/assets/ai-icon.svg";
 import ErrorComponent from "app/modules/chart-module/components/dialog/errrorComponent";
 import { useParams } from "react-router-dom";
+import AIIcon from "app/assets/icons/AIIcon";
 
 function ChartBuilderCustomize(props: Readonly<ChartBuilderCustomizeProps>) {
   useTitle("DX Dataxplorer - Customise");

src/app/modules/chart-module/routes/filters/index.tsx

@@ -7,14 +7,13 @@ import { useStoreState } from "app/state/store/hooks";
 import { CommonChart } from "app/modules/chart-module/components/common-chart";
 import { styles as commonStyles } from "app/modules/chart-module/routes/common/styles";
 import { ChartBuilderFiltersProps } from "app/modules/chart-module/routes/filters/data";
-import { ReactComponent as AIIcon } from "app/modules/chart-module/assets/ai-icon.svg";
 import ErrorComponent from "app/modules/chart-module/components/dialog/errrorComponent";
+import AIIcon from "app/assets/icons/AIIcon";
 
 function ChartBuilderFilters(props: Readonly<ChartBuilderFiltersProps>) {
   useTitle("DX Dataxplorer - Filters");
   const { page } = useParams<{ page: string }>();
   const mapping = useStoreState((state) => state.charts.mapping.value);
-
   if (props.dataError || props.chartError) {
     return (
       <>

src/app/modules/chart-module/routes/mapping/index.tsx

@@ -12,11 +12,11 @@ import {
   ChartBuilderMappingProps,
 } from "app/modules/chart-module/routes/mapping/data";
 import ChartPlaceholder from "app/modules/chart-module/components/placeholder";
-import { ReactComponent as AIIcon } from "app/modules/chart-module/assets/ai-icon.svg";
 import { useRecoilState } from "recoil";
 import { chartFromReportAtom } from "app/state/recoil/atoms";
 import { useLocation, useParams } from "react-router-dom";
 import MappingErrorComponent from "app/modules/chart-module/routes/mapping/error";
+import AIIcon from "app/assets/icons/AIIcon";
 
 function ChartBuilderMapping(props: Readonly<ChartBuilderMappingProps>) {
   useTitle("DX Dataxplorer - Mapping");

src/app/modules/chart-module/routes/preview-theme/index.tsx

@@ -11,13 +11,13 @@ import { useDataThemesEchart } from "app/hooks/useDataThemesEchart";
 import { styles as commonStyles } from "app/modules/chart-module/routes/common/styles";
 import { ChartBuilderPreviewThemeProps } from "app/modules/chart-module/routes/preview-theme/data";
 import WarningDialog from "app/modules/chart-module/components/dialog/warningDialog";
-import { ReactComponent as AIIcon } from "app/modules/chart-module/assets/ai-icon.svg";
 import GeomapLegend from "app/modules/chart-module/components/geomap-legend";
 import ErrorComponent from "app/modules/chart-module/components/dialog/errrorComponent";
 import { DatasetListItemAPIModel } from "app/modules/dataset-module/data";
 import { getDatasetDetailsSource } from "app/modules/chart-module/util/getDatasetDetailsSource";
 import { mobileDescriptioncss } from "app/modules/dataset-module/routes/upload-module/style";
 import moment from "moment";
+import AIIcon from "app/assets/icons/AIIcon";
 
 export function ChartBuilderPreviewTheme(props: ChartBuilderPreviewThemeProps) {
   useTitle("DX Dataxplorer - Preview Chart");

src/app/modules/dataset-module/routes/upload-module/upload-steps/finishedFragment.tsx

@@ -342,6 +342,10 @@ export default function FinishedFragment(props: Props) {
             margin-top: 0;
             font-size: 12px;
             font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif;
+            > a {
+              text-decoration: none;
+              color: inherit;
+            }
           }
           @media (max-width: 450px) {
             display: none;
@@ -352,7 +356,20 @@ export default function FinishedFragment(props: Props) {
         <p>Data Description : {props.datasetDetails.description}</p>
         <p>Data Category : {props.datasetDetails.category}</p>
         <p>Data Source : {props.datasetDetails.source}</p>
-        <p>Link to data source : {props.datasetDetails.sourceUrl || "NIL"}</p>
+        <p>
+          Link to data source :{" "}
+          {props.datasetDetails.sourceUrl ? (
+            <a
+              href={props.datasetDetails.sourceUrl}
+              rel="noreferrer noopener"
+              target="_blank"
+            >
+              {props.datasetDetails.sourceUrl}
+            </a>
+          ) : (
+            "NIL"
+          )}
+        </p>
       </div>
       <div css={mobileDescriptioncss}>
         <div>

src/app/modules/home-module/components/AssetCollection/Charts/gridItem.tsx

@@ -5,8 +5,8 @@ import { useAuth0 } from "@auth0/auth0-react";
 import { IconButton, useMediaQuery } from "@material-ui/core";
 import { ReactComponent as MenuIcon } from "app/modules/home-module/assets/menu.svg";
 import { ReactComponent as ClockIcon } from "app/modules/home-module/assets/clock-icon.svg";
-import { ReactComponent as AIIcon } from "app/modules/chart-module/assets/ai-icon.svg";
 import MenuItems from "app/modules/home-module/components/AssetCollection/Datasets/menuItems";
+import AIIcon from "app/assets/icons/AIIcon";
 
 interface Props {
   id: string;

src/app/modules/home-module/sub-modules/partners/components/tabCard.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import AboutCard from "app/modules/home-module/assets/about-card.png";
 import GrantsCard from "app/modules/home-module/assets/grants-card.png";
 import BudgetsCard from "app/modules/home-module/assets/budgets-card.png";
-import PerfomanceCard from "app/modules/home-module/assets/targets-results.png";
+import PerfomanceCard from "app/modules/home-module/assets/targets-result.png";
 import { TabCardEllipseCss } from "app/modules/home-module/sub-modules/partners/style";
 import { ReactComponent as FullEliipse } from "app/modules/home-module/assets/full-light-ellipse.svg";
 

src/app/modules/onboarding-module/index.tsx

@@ -4,7 +4,7 @@ import { useAuth0 } from "@auth0/auth0-react";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import { Route, Switch, useHistory, useLocation } from "react-router-dom";
 import AuthCard from "app/modules/onboarding-module/component/card";
-import OnboardingRightDeco from "app/modules/onboarding-module/asset/onboardingRight-img.svg";
+import OnboardingRightDeco from "app/modules/onboarding-module/asset/onboardingRight-img.png";
 import { useTitle } from "react-use";
 
 export default function Onboarding() {

src/app/modules/report-module/components/chart-wrapper/index.tsx

@@ -5,9 +5,9 @@ import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { CommonChart } from "app/modules/chart-module/components/common-chart";
 import { ChartAPIModel, emptyChartAPI } from "app/modules/chart-module/data";
-import { ReactComponent as AIIcon } from "app/modules/chart-module/assets/ai-icon.svg";
 import { useRenderChartFromAPI } from "./useRenderChartFromAPI";
 import { useLoadDatasetDetails } from "./useLoadDatasetDetailsAPI";
+import AIIcon from "app/assets/icons/AIIcon";
 
 interface Props {
   id: string;

src/app/modules/report-module/components/right-panel-create-view/panelLabel.tsx

@@ -31,7 +31,7 @@ export default function PanelLabel(props: {
         padding-top: 4px;
         margin-left: 5%;
         margin-bottom: 8px;
-        a {
+        span {
           display: flex;
           align-items: center;
           justify-content: center;
@@ -45,9 +45,9 @@ export default function PanelLabel(props: {
       `}
     >
       <p>{label}</p>
-      <a href="." className="report-panel-info">
+      <span className="report-panel-info">
         <InfoIcon />
-      </a>
+      </span>
       <Tooltip
         anchorSelect=".report-panel-info"
         place="bottom"

src/app/modules/report-module/components/right-panel-create-view/rhpGridItem.tsx

@@ -6,7 +6,7 @@ import { ReactComponent as ClockIcon } from "app/modules/report-module/asset/clo
 import { ReactComponent as ExpandIcon } from "app/modules/report-module/asset/expand-icon.svg";
 import { IconButton } from "@material-ui/core";
 import { ReportChartWrapper } from "app/modules/report-module/components/chart-wrapper/";
-import { ReactComponent as AIIcon } from "app/modules/chart-module/assets/ai-icon.svg";
+import AIIcon from "app/assets/icons/AIIcon";
 
 interface Props {
   id: string;

src/app/modules/user-profile-module/component/table.tsx

@@ -131,18 +131,18 @@ export function InvoiceTable() {
             display: flex;
             align-items: center;
             font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
-            a {
+            span {
               display: flex;
               align-items: center;
             }
           `}
         >
           <p>Invoices</p>
-          <a href="." className="report-panel-info">
+          <span className="invoice-info">
             <InfoIcon />
-          </a>
+          </span>
           <SpeechBubble
-            anchorSelect=".report-panel-info"
+            anchorSelect=".invoice-info"
             place="right"
             style={{
               background: "#231D2C",