Clean up analysis page; store query in URLs

wilsonzlin · May 5, 2024 · 1b95918 · 1b95918
1 parent 43e96f9
commit 1b95918
Show file tree

Hide file tree

Showing 14 changed files with 584 additions and 517 deletions.
diff --git a/app/component/App.tsx b/app/component/App.tsx
@@ -14,15 +14,19 @@ export const App = () => {
     router.addListener(handler);
     return () => router.removeListener(handler);
   }, []);
-  const Page = useMemo(
-    () =>
-      ({
-        "/": SearchPage,
-        "/city": CityPage,
-        "/analysis": AnalysisPage,
-      })[path] ?? NotFoundPage,
-    [path],
-  );
+  const [Page, params] = useMemo(() => {
+    const [pfx, ...params] = path
+      .slice(1)
+      .split("/")
+      .map((c) => decodeURIComponent(c));
+    const Page =
+      {
+        "": SearchPage,
+        c: CityPage,
+        a: AnalysisPage,
+      }[pfx] ?? NotFoundPage;
+    return [Page, params] as const;
+  }, [path]);
 
   const [edge, setEdge] = useState(DEFAULT_EDGE);
   useEffect(() => {
@@ -37,7 +41,7 @@ export const App = () => {
 
   return (
     <EdgeContext.Provider value={edge}>
-      <Page />
+      <Page params={params} />
     </EdgeContext.Provider>
   );
 };
diff --git a/app/component/ColorInput.css b/app/component/ColorInput.css
@@ -0,0 +1,7 @@
+.ColorInput {
+  cursor: pointer;
+
+  > div {
+    border-radius: 100%;
+  }
+}
diff --git a/app/component/ColorInput.tsx b/app/component/ColorInput.tsx
@@ -0,0 +1,31 @@
+import hexToRgb from "@xtjs/lib/hexToRgb";
+import rgbToHex from "@xtjs/lib/rgbToHex";
+import "./ColorInput.css";
+
+export const ColorInput = ({
+  color,
+  onChange,
+  size,
+}: {
+  color: [number, number, number];
+  onChange: (color: [number, number, number]) => void;
+  size: number;
+}) => {
+  return (
+    <label className="ColorInput">
+      <input
+        hidden
+        type="color"
+        value={rgbToHex(...color)}
+        onChange={(e) => onChange(hexToRgb(e.currentTarget.value))}
+      />
+      <div
+        style={{
+          backgroundColor: `rgb(${color.join(",")})`,
+          height: `${size}px`,
+          width: `${size}px`,
+        }}
+      />
+    </label>
+  );
+};
diff --git a/app/component/PageSwitcher.tsx b/app/component/PageSwitcher.tsx
@@ -19,11 +19,11 @@ export const PageSwitcher = () => {
             <span>Search</span>
             <Ico i="public" size={ICO_SIZE} />
           </RouteLink>
-          <RouteLink href="/city">
-            <span>City</span>
+          <RouteLink href="/c/">
+            <span>Community</span>
             <Ico i="groups" size={ICO_SIZE} />
           </RouteLink>
-          <RouteLink href="/analysis">
+          <RouteLink href="/a/">
             <span>Analysis</span>
             <Ico i="monitoring" size={ICO_SIZE} />
           </RouteLink>

diff --git a/app/index.css b/app/index.css
@@ -27,7 +27,7 @@ table {
 
   th,
   td {
-    padding: 0.5rem;
+    padding: 0.25rem 0.375rem;
     border: 1px solid #ddd;
   }
 }

diff --git a/app/index.html b/app/index.html
@@ -9,8 +9,8 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
-    <link rel="stylesheet" href="./dist/index.css" />
-    <script defer src="./dist/index.js"></script>
+    <link rel="stylesheet" href="/dist/index.css" />
+    <script defer src="/dist/index.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/app/page/Analysis.css b/app/page/Analysis.css
@@ -44,95 +44,47 @@
     }
   }
 
-  .query-form {
-    border: 1px solid #999;
-    padding: 0.5rem;
-
-    margin-right: 3.5rem; /* Make room for PageSwitcher. */
-
+  .queries {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 1rem;
 
-    > input {
-      flex-grow: 1;
-    }
-  }
-
-  .controls {
-    display: flex;
-    align-items: center;
-    gap: 2.5rem;
-
-    /* For narrow screens. */
-    flex-wrap: nowrap;
-    white-space: nowrap;
-    overflow: auto;
+    margin-right: 3.5rem; /* Make room for PageSwitcher. */
 
-    font-size: 0.9rem;
-    color: #333;
+    .query {
+      min-width: 0;
+      flex: 1 1 0;
 
-    > label {
-      cursor: pointer;
+      border: 1px solid #ccc;
+      padding: 0.5rem;
 
       display: flex;
       align-items: center;
-      gap: 0.375rem;
+      gap: 0.75rem;
 
-      > input {
-        border: 1px solid #ccc;
-        padding: 0.25rem;
+      > .err {
+        color: red;
       }
-    }
-  }
 
-  > .layout-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 2rem;
-
-    > * {
-      min-width: 0;
-      flex: 1 1 0;
-    }
-  }
-
-  .PopularitySection {
-    > .queries {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      white-space: nowrap;
-      flex-wrap: nowrap;
-      overflow: auto;
-
-      > button.add-comparison {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-
-        > span {
-          font-size: 0.9rem;
-        }
+      > .color {
+        width: 1.25rem;
+        height: 1.25rem;
+        border-radius: 50%;
       }
-    }
-  }
 
-  .PopularitySectionQuery {
-    > form {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-
-      border: 1px solid #ccc;
-      padding: 0.25rem;
+      > .value {
+        min-width: 0;
+        flex-grow: 1;
+      }
 
-      > input {
-        font-size: 0.9rem;
+      > :not(.value) {
+        flex-shrink: 0;
+      }
 
-        &:read-only {
-          cursor: not-allowed;
-        }
+      > .sim {
+        font-size: 0.875rem;
+        width: 2.25rem;
+        text-align: right;
       }
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,7 @@ table { @@
       th,
       td {
-        padding: 0.5rem;
+        padding: 0.25rem 0.375rem;
         border: 1px solid #ddd;
       }
     }
@@ Expand Down @@